Home » Angular » What is the Angular CLI?

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,

  1. We will focus on what is the Angular CLI? (Angular Command Line Interface).
  2.  Why we use Angular CLI?

Notice: I assume that you have some understanding of Angular basics such as bootstrapping, components, services, modules, architecture, routes, guards etc.

What is Angular CLI?

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 the application folder structure and configuration files.

                          FoldersAngular CLI folder structure

                            Filesfile structure

If you look at the Angular 5 application structure, you can see many folders and configuration files. The most important folder is the app folder which usually contains our working files. Most important file is the package.json  which contains the angular dependencies as a JSON object.

angular

Step 2: Install, all the NPM packages manually. The most important package is @angular/core. Without this package we can’t run our Angular application.

angular file

Step 3: Create the root application module. By conventionally root application module is called AppModule. The AppModule bootstraps and launches the application.

Angular CLI-json file

Step 4: Create the 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.

angular core

Step 5: Create the 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.

app module

Step 6: Create index.html. This is the main HTML page and it will be loaded when someone visits the site.

test Angular CLI

If you use extra JavaScript library or any other CSS files, you have to link those libraries and files in index.html.

Now, you can imagine that It is a 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 a 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.

main component

So, write that boilerplate code again and again, is not only time consuming but also it is error-prone. In real-world applications, we have to create many components, services, pipes, guards etc. So, imagine the amount of time is 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. The most of software related projects are done in a pre-defined time frame. If we late to deliver the project within the given period, it will increase the development cost.

Why is Angular CLI?

So, Angular CLI is the best solution to avoid those kinds 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.

  1. Component “ng g component com-name” or “ng g c com-name”
  2. Service “ng g service service-name” or “ng g s service-name”
  3. Interface “ng g interface interface-name” or “ng g I interface-name”
  4. 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 the 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.

Please follow us:
error
Summary
What is the Angular CLI?
Article Name
What is the Angular CLI?
Description
If you are new to Angular and 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?
Author
Publisher Name
Angular + Laravel
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*

FACEBOOK
FACEBOOK
YOUTUBE
YOUTUBE