What is the Angular CLI?
If you are new to Angular or you just learning Angular, this tutorial for you.
Do you want to become an Angular programmer? Then, don’t keep any doubt about basic things in Angular. Let’s start!
In this post,
- We will focus on what is the Angular CL?I (Angular Command Line Interface).
- Why we use Angular CLI?.
Notice: I assume that you have some understanding about Angular Basics such as bootstrapping, components, services, modules, architecture, routes, guards etc.
What is it?
Think, what is happens if we setting up our Angular application by hand?.
I listed some basic steps bellow that we have to do.
Step 1: Create application folder structure and configuration files.
If you look at the Angular 5 application structure, you can see many folders and configuration files. Most important folder is app folder which usually contains our working files. Most important file is package.json which contains the angular dependencies as a JSON object.
Step 2: Install, all the NPM packages manually. Most important one is @angular/core. Without this package we can’t run our Angular application.
Step 3: Create root application module. By conventionally root application module is called AppModule. The AppModule bootstraps and launches the application.
Step 4: Create root application component. Every Angular application should have at least one component. By conventionally root application components is called AppComponent. This root component connects each other components with the page DOM.
Step 5: Create application entry file. By convention this entry file is called main.ts. It has code to load the root application module. By doing this we are telling angular that bootstrapping component in our root application components.
Step 6: Create index.html. This is main html page and it will be loaded when someone visit the site.
Now, you can imagine that It is very time-consuming and error prone process. Not only that, if we want to create components, pipes, services, directives, routing guards, we will have to write that boilerplate code for each.
What is boilerplate code?
As an example, to create a component, we have to create a class, export that, decorate with @Component decorator and create constructor. Not only that, to use @Component decorator we have to import it from Angular core. So we have to write all this boilerplate code.
So, write that boilerplate code again and again is not only time consume but also it is error prone. In a real world application, we have to create many components, services, pipes, guards etc. So, imagine the amount of time be waste writing that boilerplate code. In the real world we usually have more than one contributor working on a given Angular project. By all these contributors are creating these files by hand. Most of software related projects are done in pre-defined time frame. If we late to deliver the project within given period, it will increase the development cost.
Why is it?
So, Angular CLI is a best solution to avoid those kind of drawbacks. It creates Angular applications, components, modules, pipes, directives, services and much more efficiently, effectively and consistency while still following the best practices of Angular.
So, Angular CLI helps us
01. Creating Angular applications.
02. Create the code scaffolding for Angular features like components, directives, pipes, services etc.
03. It automatically adds all JS and SCC files into index.html when application build.
04. It follows angular best practices and conventions.
05. Run unit testing and End-to-End testing.
06. Create optimized builds for deployment to production.
By now, I hope you would understand the importance of Angular Command Line Interface in the Angular application development.
I list down a few important commands required while working with Angular projects.
- Component “ng g component com-name” or “ng g c com-name”
- Service “ng g service service-name” or “ng g s service-name”
- Interface “ng g interface interface-name” or “ng g I interface-name”
- Module “ng g module module-name“ or “ng g m module-name ”
If we want to specify the folder path, we can do it with name.
Example – Assume that we want to create a new service, UserService in src/app/shared/services.
So, we can do it by running “ng g s shared/services/user-service”.
I think, you got the idea. Basically, that’s it. If you have any problem, please comment in the comment section. If you like this post don’t forget to share.
Thank you for reading.