googleads
Basic Implementation: Angular2 using Angular CLI | Angular Developers
Angular Technical Web Development

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

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

 

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

 

3. Next, run the following on your command line to install the 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

 

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

 

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

The following two tabs change content below.

Manigandan

An ideal Full Stack Developer, having around 5+ years of experience in web development arena, expertise in AngularJS, Nodejs, PHP and also scoring 6 years of experience in Networking & Window servers. A perfect all-rounder has fondness to play diverse role. he always strives to match perfection and likely remains the best in whatever role he takes.

Leave a Reply

Your email address will not be published. Required fields are marked *