Introduction
Angular is a JavaScript library or a framework used for building a client-side web application.
- It is used for building Single Page Applications (SPA).
- It supports two-way data binding.
- It supports both desktop and mobile application development.
- One framework for mobile & desktop as mentioned in https://angular.io/.
In order to work with Angular, we need to get started by creating a sample project manually by adding all its dependent files such as JavaScript, TypeScript, jQuery, Angular, Protractor, karma and few other configuration files separately which is very time-consuming work.
Whenever we create any sample project, the main thing is the design of the project or the solution which is difficult for the experienced developer as well. Just for designing the project, it will take a complete day if it is done manually.
In order to avoid these problems, Angular CLI plays a major role in the creation of the project with the proper folder structured format with just the execution of a few commands which is explained below.
What is Angular/CLI
Angular CLI is also known as Command Line Interface which is used for creating the Project, and adding dependent files or Npm packages to the projector solution folder for easy development. It also helps in end to end testing with Protractor, unit testing with Karma, bundling the files, deployment, building the solution, executing or running the solution, updating and adding the npm packages, etc.
If the programmer wants to work on a certain project, he or she needs to create the project manually by adding all the dependent files or libraries like jQuery, Bootstrap, React.js, Angular, JavaScript etc based on the project's requirement, which is a very difficult task for junior as well as senior developers, which will take a day or two for just designing the project structure. In order to overcome the above problem, the Angular team has designed the project structure with the help of Angular CLI commands. Before the creation of any Angular project, we need to execute the Angular/Cli command. With the help of Angular/Cli command, we can create the project and can perform other development tasks such as testing, deployment, bundling etc. Please refer to https://cli.angular.io/ for more information about Angular CLI Commands.
- npm install -g @angular/cli
This command is used for installing Angular/cli globally, in this command -g refers to globally. Once the above command is executed the Angular/cli folder is created in the below path.
C:\Users\userName\AppData\Roaming\npm\node_modules\@angular\cli.
The cli folder contains Commands folder with various commands which is explained below. If we didn't execute the npm and install -g @angular/cli command and if we try to create a new project with ng new, we will get an error message. That means we need to execute the above command in order to proceed with the creation of the Angular project.
- ng new
This command is used to create a new project for development in Angular, for example: if we want to create a project, say "Angular6PracticeProject", then the command for creating the project is "ng new Angular6PracticeProject".
This command creates a new project with the proper folder structure which is designed by the Angular team which helps in easy development, Reusability of code, Maintainability etc.
It creates a new project in a systematic folder structure which makes the development easier. It takes not more than 5 minutes to create the project with various files in a structured format which can be easily understandable to the person who is not familiar with the Angular too.
- ng serve
This command is used for the execution of an Angular project. Once the project's development is done if we want to execute or run the Angular application we need to use ng serve command. ng serve command executes the Angular project by starting the development server at Url: http://localhost:4200. After executing the command the user needs to manually open the browser of his choice and navigate to the above-mentioned Url. If we want to open the browser by navigating to the above-mentioned Url automatically then we need to use
ng serve --open or ng serve -o.
These above commands once executed opensthe development server or the browser by navigating to the above-mentioned URL automatically.
- ng build
Once the Angular's code development is done if we want to build the solution we need to use ng build command.
This Command builds the project solution as well as creating the folder with the name dist by placing all the TypeScript files compiling to JavaScript files and placing the files in the dist folder. This dist folder later can be taken in production.
- ng build --prod
This command builds all the files by performing bundling of each file separately.
- ng e2e
This command is used for testing End to End application using a Protractor.
- ng test
This command is used for performing unit testing of the application or Angular's functionality using Karma.
- ng add @angular/elements
This command is used for installing or downloading new npm packages.
- ng update @angular/core
This command is used for updating or upgrading the existing npm packages.
- ng --version or ng -v
This command is used to check the version of Angular/cli which is installed in this path
C:\Users\user\AppData\Roaming\npm\node_modules\@angular\cli.
- ng help
- This command shows all the help files like below:
- Add support for a library to your project.
- build (b) builds your app and places it into the output path (dist/ by default). config Get/set configuration values.
- doc (d) opens the official Angular API documentation for a given keyword.
- e2e (e)
- generate (g) generates and/or modifies files based on a schematic.
- help displays help for the Angular CLI.
- lint (l) codes in the existing project.
- new (n) creates a new directory and a new Angular app.
- run runs Architect targets.
- serve (s) builds and serves your app, rebuilding on file changes.
- test (t) runs unit tests in the existing project.
- update updates your application and its dependencies.
- version (v) outputs Angular CLI version.
- xi18n extracts i18n messages from source code.
For more detailed help run "ng [command name] --help".
- ng generate component ComponentName
This command is used for adding a new component to the Angular project for development.
- ng config
It is used to get or set the configuration files.
Thanks & I hope this article helps you. Stay tuned for more articles in Angular 6.1.