Well, in this article we learn how to give a kick start to an angular project. If you are new to Angular world, this article will help you to start with a “HelloWorld!” example. You we learn: -
· Introduction
· Installation
· Angular-CLI
· Creating Angular App
· Running Angular App
· Updating App’s content
Introduction:Whenever you design any application, scalability, and maintainability are big concerns and they need special attention. There are many tools/technologies or strategy available to achieve these in backend side, but very limited in front end of your application. Angular solved this problem. Angular allow you to create front of your application very easily. It provides you a very comprehensive front-end application architecture. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges.
Pre-Assumptions: It is assumed that reader of this article has basic knowledge of javascript/jquery. If reader does not have any prior knowledge of javascript/jquery, she needs to read some good articles on javascript/jquery basics.
Source: https://angular.io/generated/images/guide/architecture/overview2.png
Angular is a platform and framework for building client applications in HTML and TypeScript. Angular is itself written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.
A very basic architecture and components/modules are shown above picture. For deep details check https://angular.io/guide/architecture.
Installation: Angular provides a cli that helps you develop your application very quickly and easily. You can execute a few commands and CLI will generate all required boilerplate code for you. As we will going ahead, you will have more understanding of CLI and its uses.
1. Install Node.js and NPM: You can download it from https://nodejs.org/en/download/. Choose installer for your operating system and install it.
After installation, verify node installation using following command
node -v
npm -v
It will show you installed versions on your machine, as you can see on my machine, node version is 9.4.0 and npm version is 5.6.0
1. Install Angular-CLI: You have already installed node and npm in last step. Now, it’s very easy to install Angular-CLI using following command.
npm install -g @angular/cli
You can verify after installation using
ng –version
You can see the installed CLI version as 1.5.5, yours might be different.
if everything goes right, Angular cli is installed and you are ready to create your very first project with Angular.
Creating Angular App: As you are done with installation. You can create you first application, using angular CLI.
· Go to the directory where you want to create your angular project.
· Run ng new my-app and wait to complete. It may take several minutes because it will install all required dependencies for you. (Note: you must be connected to internet as all dependencies will be downloaded from internet directly)
When you run above commend, your screen will be like
You can see the last line, it means your packages are being downloaded. After completion, you will get a success message. Once it’s done, your application will be ready.
Running angular App: You have successfully created your angular app in last step. Now it’s time to check the magic, cli did for you. Just cd to your application home directory and run below command
ng serve
If you get any error like below 
Don’t panic. Error log clearly says that it could not found @angular-devkit/core. If this is the case, you can run following command
npm install @angular-devkit/core –save
npm install command is use to install node packages and –save will add this package to a file package.json. You can declare all the node packages required to your application and then when you run npm install command without providing any package name it will install all declared packages in package.json file. In our case this file is generated by Angular-CLI only.
After installation @angular-devkit/core package, let’s try it again and run “ng serve” command.
If all is well, you should see the output like this. Notice, a first line. It tells you that your application is running on 4200 port. Although you can change it by passing an argument with your “ng serve” command, like below:
ng serve -o –port=4500
“-o” is used to open browser automatically and –port is used to specify any port to run your application. Your screen will show you message like
Congratulations! You have created your first application in Angular.
Updating App’s Content: Go to your project’s home directory and find “src” directory. For now, you can ignore other files and folders. 99% you will be working with src folder only.
Go inside the “src/app”, you must see 5 different files. We will explain all in my next article. For now, you just need to focus on “app.component.html”. This file will contain html content. Open this file into your favorite editor. I would personally recommend “Visual Code”. It’s a great editor for angular development, you may find others as well.
Delete everything into this file and write following lines there.
<div style="text-align:center">
<h1>Hurrah! I have created my first angular application.</h1>
</div>
Check your browser again, although it would be refreshed automatically when you save any file but if it is not you can refresh and you will start seeing your updated content as below.
Congratulations! You have setup your angular development environment and created “HelloWorld” application successfully. We will discuss Angular’s important components in my next article.
No comments:
Post a Comment