What is Angular CLI

If you are a foodie like me, I am sure you will enjoy the recipes on my friend's YouTube channel. If you find them useful, please subscribe and share to support her. She's really good at what she does.

In this course 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 recomend to watch our Angular 2 tutorial for beginnners 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.

Here is the link for Angular 2 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

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

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

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

In our next video, we will discuss installing Angular CLI

Text version of the video

Slides

Angular CLI Tutorial

Angular CLI Text articles & Slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

[vishaljaiswal]

there is no doubt you are a great trainer .i am following you since 2014 . your lecture is really very helpful for all specially for those who con't afford training . thank you sir please keep it on...

[parajn]

I've watched so many of your training videos, since past two years. Just supported whatever I could through paypal.
Keep making awesome training videos.

[GireeshJavali]

Hi Sir, I am following your series since 2015, ur doing great work, THANKS, please continue...

[sayantanighosh]

You are a genius. I am a huge fan of your teaching.

[nskmuscat]

Thanks Venkat, a great contribution to the community. Please cover dynamic injection of HTML objects inside the component template during run time. In angular 1.x it was very easy with $compiler but in Angular 2+ it is too complicated.

[gurujiclasses]

just awesome ...both you and yours tutorials SIR...thanks a lot :)

[saurabhchauhan]

Habituated to press like and then start watching video :) that is your achievement and trust of quality education.

[bijayy]

Passionately waiting for next video.
Thank you.

[MrProbin]

your way of explanation very u are great teacher....u saved many life

[rafakoscinski]

would be nice to see a tutorial, on how to implement latest angular with cli in visual studio for mvc, specially when you have areas, it's hard to find something like this in the internet

[shekharrajepandhare]

hi venkat, please add some videos on route guards as well . It would really helpful for beginners

[sandeepklmf]

wonderful these videos are very helpful... can you please provide some tutorials for generic components and there uses with session managements if is there any...

[bsuhanijayaswal]

Hello Sir !!! Your efforts are really appreciated. Can you please make a series on Angular Jasmin Karma Unit/End2End Testing. Thanks

[SuperLalbabu]

Can you also make video tutorial on Rxjs?

[ethanviolet]

Hey I love your tutorials. But I think you should redo the older ones because the audio on like c# and the older ones your the best!

[yt]

thank you very much.. It is very good VDO awesome!

[m.r.c.prasad]

Hi Venkat sir. Could you please upload videos on reactjs.

[codetowhy]

Hi Sir, Please give us idea about Webpack Configuration in different Tutorial Series.

[shahidwani]

Sir, please make videos on .net core 2.0

[mdhabib-xfdc]

hello friends i hv problem when i start npm giving some error i cant solve tired to find solution == npm ERR! Please include the following file with any support request:
npm ERR! E:\angular2\npm-debug.log