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.
- 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.
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
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
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.