Angular CLI is one fantastic tool that we will explore through this post. The entire post will be a Quick Guide for it, so if you are a beginner, this post should get you into understanding it.
If you wish to see this post in a video format, click this link → https://youtu.be/t9m_O_SOcSw
If you are into Angular, you can learn it here → https://bit.ly/3hdZvRX
What is Angular CLI
Angular CLI stands for Command Line Interface and it is for Angular Technology. It was developed by Google as Angular is as well.
The main goal of this tool is to help you to Develop, Initialize and Maintain Angular Projects.
Installation
Installing Angular CLI will also install the latest version of Angular. To do that, run the next command.
npm install -g @angular/cli
This command will install Angular and Angular CLI globally on your machine.
With the installation finished, you will be able to use the help command.
ng help
The help command will show you the entire list of commands that you can use and it should look something like this.
Generating a Project
One such Automation Command could be to generate an Angular project. Command itself will create all necessary files and set up the entire project for us.
ng new my-todo-app
In this example, I am creating a new Angular Application which is called my-todo-app.
Replace your application name with mine and you are good to go.
Running a Project Locally
To run your generated project, we first must go into our project and use a command which will open our project on http://localhost:4200.
cd my-todo-app
ng serve
The first command will route ourselves into our project, in my example my-todo-app.
The second command will serve our Angular Project on a local host.
Generate
Even if the creation of Angular application and serving those is nice feet, there is much more automation that we can do with Angular CLI.
For example, we can generate files for our Angular applications like Modules, Components, Services, Guards, and others as well.
ng generate --help
Passing help flag next to generate command, you will get all different files that Angular CLI can generate.
Creating a Component
To create or generate Angular Component with Angular CLI we can run the next method.
ng generate component todo
This will generate our todo folder with todo component files like HTML, CSS, TS, and test file which is SPEC.TS.
Testing
Next to the generation of specific files, Angular CLI can help us with testing as well.
ng test
Command of test will run our testing files and give back to our results of tests.
Angular uses Jasmin and Karma for testing.
Linting
Linting can help us to clear our code and remove redundant code.
ng lint
Command itself will check all of our files and give us the result of that check. If there were some errors or warnings, it will point those to us, so we could resolve those.
Conclusion
This is a quick guide for Angular CLI and if you liked this post, make sure to comment on it and I can create another with more in-depth details about Angular CLI.
If you wish to see this post in a video format, click this link → https://youtu.be/t9m_O_SOcSw
If you are into Angular, you can learn it here → https://bit.ly/3hdZvRX
Until the next time.
Oldest comments (0)