Using Angular CLI to Generate Angular Apps with Best Practices

Angular CLI is a command-line interface for Angular that helps you kick-start your application development with the boilerplate code that follows all the necessary best practices. By executing the commands in Angular CLI, you can generate services, components, routes, and pipes for your application.

In this chapter, we will cover the following topics:

• Introducing Angular CLI
• Installing and setting up Angular CLI
• Generating code for new applications
• Generating components and routes
• Generating services
• Generating directives and pipes
• Creating builds targeting various environment
• Running tests for your application
• Updating Angular CLI

Introducing Angular CLI

Angular CLI is a command-line interface available as a node package. Angular CLI, introduced with Angular, helps you develop applications faster by generating the boilerplate code for a new application and adding features such as services, pipes, components, and directives to existing applications. Angular CLI is very powerful and handy in scaffolding your application easily. With the help of Angular CLI, we can create, build, test, and run our application, which will be a great relief to the developers.

Angular CLI runs under node and is dependent on many packages.

Installing and setting up Angular CLI

To install Angular CLI, we must have the latest version of node and npm installed in our system. Make sure the required packages are installed already and then start installing Angular CLI globally. The minimum required npm version is 3.x.x and the node version is 4.x.x. Sometimes, you may get an error when installing Angular CLI. In such cases, make sure you have the latest version of node.js installed. We can verify the version of node by executing the following command:

node --version

We can check the version of npm by executing the following command:

npm --version  

Now, we know the versions of node and npm installed in our development machine. Let's install Angular CLI globally by executing the following command:

npm install -g angular-cli 

Angular CLI has been installed and is available globally to use in our development machine...

Generating code for a new application

We have Angular CLI ready to use now. Let's generate a boilerplate code for an Angular application that displays the list of books. We will call the name of the application as BookList. Execute the following command in the node.js command:

ng new BookList

This command will create a folder named BookList and generate the boilerplate code to get started with the Angular application. The following image shows the file structure organized in the generated code:

To make sure the generated code works fine, let's run the application by executing the following commands. First navigate to the application folder by executing this statement:

cd BookList

Then, execute the following code to launch the application in the development server :

ng serve

Now, let's browse to http://localhost:4200/ and the following page will be rendered in...

Generating components and routes

A component is a logical grouping of functionalities, views, and styles applicable to the view and a class associated to the component that deals with these artifacts. Components take responsibility for rendering the view as per the business logical requirements.

We can generate code for components using Angular CLI. This tool is very handy in scaffolding the components. Let's generate a component named booklist for our application by executing the following statement. Navigate to the Angular project folder by executing the command here:

cd BookList

Then, execute the following Angular CLI command to generate the component Booklist:

ng generate component booklist

Executing the preceding statement creates the booklist.component.css, booklist.component.html, booklist.component.spec.ts and the booklist.component.ts, as shown in the following...

Generating services

Services are user-defined classes to solve some purposes. Angular recommends having only template-specific codes in components. A component's responsibility is to enrich the UI/UX in an Angular application and it delegates business logic to services. Components are the consumers of services.

We have the component in place that helps render the Booklist template. Now, let's run a CLI command to generate a service to serve the list of books. Execute the following command to generate booklist.services.ts and booklist.services.spec.ts:

The code snippet of the generated booklist.service.ts is shown here:

import { Injectable } from '@angular/core';   
   
@Injectable()   
export class BooklistService {   
   
  constructor() { }   
   
}   

Notice that BooklistService is decorated with @Injectible so that this booklist service will be available...

Generating directives and pipes

A class decorated with @Directive to attach metadata is called a directive. It is an instruction or guideline to render the template.

We have seen generating components and services. Now, let's generate directives and pipes using Angular CLI. We will start with creating a directive named book. Run the following command to generate the directive:

ng generate directive book       

The outcome of executing the command is shown here:

Executing this command creates two files, namely, book.directive.spec.ts and book.directive.ts respectively. Here is the code snippet of book.directive.ts:

import { Directive } from '@angular/core';
 @Directive({
    selector: '[appBookish]' 
   }) 
  export class BookishDirective { 
      constructor() { } 
  } 

The code snippet of book.directive.spec.ts is shown here:

/* tslint:disable:no-unused...

Creating builds targeting various environments

Using Angular CLI, we can also create builds for our application targeting various environments, such as development and production. The application will be configured specific to environments. For example, an application may be configured to use staging URLs for APIs in development or staging environments and production URLs of APIs will be configured in a LIVE or production environment. Developers will be manually updating the configuration of the URL as per the environment the application is built on. Angular facilitates to automate this process of creating builds by targeting various environments.

A constant variable environment is maintained in a file named environment.ts. This file will help to override the default values as per the parameter passed when executing the build command.

To use the production file, we need to execute...

Running tests for your application

Testing the application is the essential process to be carried out before moving it to production. Developers can write tests to assert the behavior of the application. Writing proper tests will protect the application from deviating away from the requirement.

Jasmine is a test framework that facilitates to write tests to assert the behavior of the application and execute the tests in the browser using the HTML test runner. Karma is a test runner, which enables the developer to write unit tests simultaneously during the development phase. Once the build process is completed, tests will be executed using Karma. Protractor can be used to run end-to-end tests that assert the workflow of the application as an end-user experience.

The following command runs the tests in the application:

ng test 

The end-to-end test can be executed by running the...

Updating Angular CLI

We can update the Angular CLI version in a global package and in your local project. To update the Angular CLI package globally, run the following command:

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest 

To update the CLI in your local project folder, run the command here:

rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows 
  Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
npm install --save-dev @angular/cli@latest
npm install 

Summary

That was smooth and easy, wasn't it? Angular CLI makes the life of the developer easier by generating the boilerplate code for various artifacts of an Angular application. You started learning about the powerful tool Angular CLI and how it helps you to kick-start your application with the boilerplate code. Then, you learned to generate components, directives, pipes, routes, and services using the Angular command line interface. Finally, you also learned about building an Angular application using the Angular CLI. In the next chapter, we will discuss about working with Angular components.