Software Developer
Angular is an open-source framework that is TypeScript based and used to build applications for desktops and websites. The Angular project was directed by the Angular Team at Google and built with the aid of a large community of businesses and individuals. Angular is also known as “Angular 2+” or “Angular v2 and above” because it is a complete rebuild of AngularJS (Angular 1). It was released in 2016 under an MIT license and is mainly used for front-end web development. Angular is component-based, and this internet framework can help you to build scalable website applications efficiently. It also offers several built-in libraries that cover various important features such as document control, client-server communication, routing, and more.
Angular CLI is a Command Line Interface that provides the capability to utilize the Command Window to execute and build the basic Angular application structure just by writing down the CLI Commands which Angular understands and interprets the action to be taken on each command. Angular CLI is compatible with all higher and major versions of Angular (NOT AngularJS).
In the very first step to start working with Angular CLI is to install the CLI package from NPM (Node Package Manager).
This command works just like any other NPM command where for installing external dependency we run.
Code:
npm install dependencyName
Once this is done successfully, we are good to use the Angular Command-line interface and start building Angular Applications using this interface.
This module of angular CLI will assist you to set up your software from scratch in preference to growing each aspect, service, modules, and HTML and constructing the entire utility manually which turns into a chunk of tedious and time-consuming paintings when we do it manually. Growing projects from scratch, producing components, services, skipping the test, jogging the software on the browser, and lots of greater such features can be done from the angular command-line interface (CLI).
Let’s see some of the examples and usage of Angular CLI commands.
Building a basic application on Angular Framework using Angular CLI.
Code:
npm install -g @angular/cli
ng new basic-demo-application
The Angular CLI comes into the picture as soon as ng is read, it traverses to the next command, which is new, so now CLI knows that it has to create a new Angular Application and the 3rd parameter is the name of the application, it can be any lower case name of your application which will have all files and modules inside this basic-demo-application folder.
A few basic questions will prompt you while CLI is building a new application like which style sheet should be used (CSS, SCSS), would you like to add Angular Routing, and a few.
This is not it; the ng new command has a lot more options that can be used to achieve additional project requirements as well.
Given below shows hosting the angular application on the browser:
Code:
npm install -g @angular/cli
ng new basic-demo-application
cd basic-demo-application
ng serve
To host your application on the browser window, once the application is created using the ng new CLI command, go inside the basic-demo-application directory and run the ng serve CLI command. This will start listening to your application on port 4200 and you can easily test your application locally while developing. The ng serve command lets you build, rebuild after changes are done, and serve your application.
Given below shows generating of new components/ services/ modules with the angular application:
ng generate component component-name
ng generate application application-name
ng generate directive directive-name
ng generate interface interface-name
ng generate library library-name
ng generate module module-name
ng generate enumenum-name
ng generate appShellappShell-name
ng generate pipe pipe-name
Creating or adding any new construct like components, service, modules within angular application gets too tedious process if you need to do that manually and to overcome this work Angular CLI has another CLI command which helps you to generate new service, directive, component, application, library, class, interface, etc. All these constructs of ng generate come along with additional option tags such as defaults, dryRun, force, help, flat, interactive, etc. This lets the user decide on whether there is any need for an additional folder or not, overwrites existing files, etc. The options tag should be used with – a prefix.