This blog is an introduction into the basics of how to implement Angular2 in the frontend, using Angular CLI.

So, what is Angular CLI?

Angular CLI is a command line interface which is built using nodejs style (commonJs) modules. Angular2 is a framework for creating Single Page Application (SPA).
Next, let us see the basic difference between Angular and Angular2, and why we use Angular2.

Angular2 is not the logical upgrade of Angular 1; angular 2 is completely rewritten.

Angular2 uses Typescript which is a superset of javascript

While Angular 1.x was not built with mobile support, Angular 2 is mobile oriented.

Angular 1’s core concept was $scope, while you will not have $scope in angular 2.0.

“Components” replace the controllers of Angular 1.x in Angular 2.

Angular 2 has changed Structural directives syntax (for ex. ng-repeat is replaced with *ngFor)

Compare the file size – Angular 2 is 20kb less than angular 1 which helps in decreasing the load time for apps

Before we begin, let us also brush on what is Nodejs, npm and typescript.

NodeJS is a JavaScript runtime designed to build fast and scalable network applications easily. Providing an extensive library of a variety of JavaScript modules, NodeJS simplifies the development of web applications and helps to build them faster.

The Node Package manager(npm) to manage nodejs libraries. NPM makes it easy for JavaScript developers to share and reuse code, also it makes it easy to update the code that you’re sharing new update.
TypeScript is a typed superset of JavaScript which has been built and maintained by Microsoft and chosen by the AngularJS.

Now, let’s begin

Before we begin, there are few pre requisites (of course!). Install Angular2 as follows:

Angular2 Installation

1.Run the following on your command line to install the Nodejs

#this command mentions the source of the setup
curl -sL https://deb.nodesource.com/setup | sudo -E bash -  
#once the source has been mentioned, nodejs is installed
apt-get install -y nodejs

2. You can check if it has been properly installed by looking for its version, as follows

node -v
npm   -v

3. Next, run the following on your command line to install the angular CLI

npm install -g @angular-cli

The -g in the command installs the Angular CLI globally to your local machine. A directory called node_modules will be created in the root where the package is installed.
4. Lastly, we need to create an angular2 app, which is done by providing the following command

ng new my-first-app

Then, navigate to your installed my-first-app folder (which is created once the above command is issued).
The folder structure will be as in the pic below:

Now, execute the first app using following command

ng serve

Once this is executed, the URL – http://localhost:4200 is generated. Launching this URL in your browser will bring out the newly created Angular2 app. Following is a sample output

Further frontend activities can be performed once the app is successfully created. As seen above, creating a basic Angular2 app using Angular CLI is quite simple. Only the basics of implementing Angular2 using Angular CLI are covered here. For further/full details, you can check out Angular CLI here.
If you are looking for angular developers for your project ? Hire Angular developer from Agira Technologies to build best web-apps at affordable rates. Our dedicated Angular developers are well-versed with all the updates and ensure top-notch web applications development to meet your business requirements. For any queries reach us via info@agiratech.com