Basic Implementation of Angular2 using Angular CLI

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

 

Angular-2

 

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:

 

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:

 

folder-structure

 

 

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

 

app-works

 

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.