What is Angular CLI

Suggested Video Tutorials
Angular 2 tutorial for beginners
ASP.NET Web API Tutorial
Bootstrap tutorial for beginners

In this video we will learn
1. What is Angular CLI
2. Why should we use Angular CLI and the benefits it provide


Before watching this course I strongly recommend to watch our Angular 2 tutorial for beginners course in which we have discussed all the basics of Angular. Once you have a good understanding of the angular basics, it will be easy for you to get the most out of this Angular CLI course.


First let's understand why should we use Angular CLI and what problems it solves.

If you have any experience with Angular, then you already know manually setting up an Angular application from scratch is a laborious and time consuming process. We have to

1. Create a separate application folder and add the package definition file ( ie. package.json) and other configuration files. We will discuss what these configuration files are in detail in our upcoming videos in this series.
2. Install the packages using NPM
3. Create the root application component (i.e AppComponent) as every angular application should have atleast one component which is the root component. This root component bootstraps the angular application. 
4. Create the root application module (AppModule) as every angular application should have atleast one module which is the root module
5. Create main.ts file which is the entry point to the application. The code in this file, loads the angular root module - AppModule
6. Create index.html which hosts our application

You have to manually write all the boilerplate code yourself, which is not only monotonous but also time consuming. If you have an inline view template and inline styles for your component, then it is enough if you just create the TypeScript component class file. But if you have lot of HTML and styles, then for maintainability and separation of concerns, you want your HTML to be in a separate template file and your styles in a separate stylesheet. In this case you will have to manually create the HMTL template and CSS files as well in addition to the component class file.

In a real world application, we will have many components. Just imagine the amount of time we have to spend to create these different component files and the same boilerplate code. In an Angular application, in addition to components, we also have directives, pipes, services etc. Again imagine the amount of time it takes to create that same boilerplate code for all these.

In a real world, we usually have more than one developer working on a given angular project. While all these developers are creating these different files and writing the required boiler plate code, are they following the angular teams best practices and conventions. What if the developers are not following them. How do we enforce them. Well, one way to enforce these is by manual code reviews. Code reviews are not only time consuming but also error prone. 

The other option is to have some tooling in place to address this. Angular CLI is such a tool. It help us create angular applications, components, modules, pipes, directives, services and much more with great speed and consistency while still following the angular teams best practices and conventions.

What is Angular CLI

1. CLI stands for Command Line Interface. So Angular CLI is command line tool the help us 
2. Create Angular applications faster and with great consistency
3. Create the boiler plate code for angular features like components, directives, pipes, services etc.
4. Create boiler plate code for TypeScript features like classes, interfaces, enums etc.
5. It follows angular best practices and conventions out of the box
6. Run Unit and End-to-End (e2e) tests
7. Create optimised builds for deployment to production

We will see all these in action in our upcoming videos.

No doubt Angular CLI, will greatly help us improve our productivity as it can get an angular app up and running in no time. It can also generate components, directives, pipes, services etc with great speed. However, to get the most out of this tutorial and to understand what CLI does, it is better to understand how to manually create an angular project from scratch. Also learn how to manually create components, pipes, services, modules etc. Once you have a good working knowledge of how these different pieces fit together in an angular application, we can then use tools like Angular CLI to boost our productivity. Otherwise, if a there is a problem with a feature generated by Angular CLI, it might take a very long time to identify what is wrong. We have covered the basics of creating components, services, pipes etc in our Angular 2 course. Here is the link for Angular 2 course.
https://www.youtube.com/watch?v=WWQZCDegWHg&list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6

In our next video, we will discuss installing Angular CLI