How to work with Angular CLI (Command Line Interface)?

One of the most popular and powerful web development frameworks today is Angular which is developed by Google. Every framework has own history. So here, we describe the history of angular.

History of Angular

The major release version of Angular is Angular 1, Angular 2, Angular 4. The first version of angular is known as AngularJS. AngularJS was followed by Angular 2, which came in with a lot of changes when compared to AngularJS.

The structure of Angular is based on the Components/Services architecture. The concept of AngularJS was based on the model view controller. AngularJS was released in October 2010, Angular 2 was released in September 2016 and Angular 4 released in March 2017. Angular 4 is the latest release from the Angular team after Angular 2.

About Angular CLI

CLI  has to make angular 4 development easier and faster. The great feature of angular CLI is made by the official angular developer. It also helps in unit testing and an end to end testing for the application. The interesting things about angular are smarter and faster.

Let’s first see how we can install Angular CLI.

The official site for Angular CLI is https://cli.angular.io/

If you click on the Get started option, you will be directed to the GitHub repository for the CLI https://github.com/angular/angular-cli

Environment Setup

The Environment Setup required for Angular 2 or 4. To install Angular 4, we require the following −

• NodeJs
• Npm
• Angular CLI
• IDE for writing your code

Installation process and Environment

The first step is to install the angular CLI with the following command:

Syntax :

npm install -g angular-cli

Now, angular CLI installation is successfully completed on your machine.

Let us check whether Angular CLI is installed or not on our machine. To check the installation, run the following command in the command prompt −

Syntax :

ng -v

After npm (node.js package manager) installation the next step to create a demo project.

How to create Project?

You can use the following command to create AngularJS project:

Syntax :

ng new project_name

Example :

Use the following command to create a new project.

ng new angular-demo1

The following command will automatically create the project and download the required npm package.

Here we are using Visual studio Code IDE for writing our code, To download Visual Studio Code, go to https://code.visualstudio.com/ and click Download for Windows.

Click Download for Windows for installing the IDE and run the setup to start using IDE.

Let us open the Angular-Demo1 application and see how the folder structure looks like.

Let us compile our project with the following command:

ng serve

Now project is compiled successfully and you will receive the following output −

Now you can use the default URL “http://localhost:4200/” to run your application in the browser:

Difference between angular version

After the success of AngularJS, the Google engineers are always ready to remove the discrepancy o the previous release and add new things to make this frameworks more lovable. So till now, the Google has released three major version angular 1, angular 2 and angular 4. There are three version so of course we have some difference in between versions.

Angular 1 (AngularJS)

• The architecture of Angular 1 is based on MVC (model view controller).
• Angular 1 use JavaScript to build the application more responsive.

Angular 2

• The architecture of Angular 2 is based on service/controller.
• Angular 2 uses the Typescript to write the responsive application.
• Best thing of this version is that, it has made it possible to accomplish the native applications for a mobile platform like React Native.
• Angular 2 has changed to component based UI. This helps to developer for divide the applications in terms of components with desired features and enable to call required User Interface. this helps to improve the flexibility and re usability as compared to Angular 1.

Angular 4

• It is much faster as compare to previous release and reduces the file generated code of it’s components, it also allows the developer to generate code that can use in debug mode and production mode.
• Angular 4 use type-script to write the responsive application.
• These version of angular is compatible with newer versions of Type Script 2.1 and Type Script 2.2.
• The best thing of this version is that , it has made the code file size smaller and improved the speed of the application.

Advantage of AngularJS

Every programming language have own advantages to stay in this so fast industry so like other technologies Angular attract developer with more advance option and following advantages.

• Angular was developed and maintained by google developers. it means this is interesting thing to learn you from. the best advantages is that if you face any challenges on the way then there are engineers who is always ready to help you to solve your challenges.
• As i already mention, this frameworks follow MVC pattern and it helps programmer to splitting the application into multiple MVC components. after that programmer has to write a code to put them together again automatically. that is save programmer development time and reduces the app’s time to market.
• The best advantages is that angularJS is a comprehensive solution for rapid front-end development. It means it does not need any other plugins or frameworks to use. Moreover, there are a range of other features that include Restful actions, data building, dependency injection, enterprise level testing, etc.
• It also helps in unit testing and end to end testing for the application.

Apart from these advantages, there are lot’s of other advantages that make AngularJS as popular as it is.

Disadvantages of AngularJS

Along with lot’s of advantages, you will always come across disadvantages of any platform or frameworks. That is the case which is also apply with Angular too.

• Angular framework is big and complicated. With multiple ways to do the same thing it is hard to tell which way is better for particular task.
• All developer have own style and habit to write code which might complicate integration of different components into a whole solution.
• The life cycle of angular is complex which is very confusing.

Summary

Command Line Interface (CLI) can be used to single page application with AngularJS framework. It also helps in creating a unit and end to end tests for the application. The application development using AngularJS provides with more secure, flexible and s callable facilities. The developer can be easily upgrade from angular 2 to it’s latest version.