Angular – Creating a New App

Introduction

Angular is a framework for dynamic web applications. It provides a way to organize your HTML, JavaScript and CSS to keep your front-end code clean.

An Angular app is an interaction of the following Angular artifacts

• Components
• Services
• Directives
• Pipes
• Modules

In this post, we will create a very simple angular application using angular-cli.

Steps

Install npm

• Install node and npm

Install Angular CLI

npm install -g @angular/cli

Generate a new Angular App

ng new my-new-app

You will be asked few questions e.g. routing setup (yes) and css style types etc.

Serving the App

ng serve --open //from within app directory

Generate a new Service

ng generate service my-test
ng g s another --path=app/core  //absolute path //or --lint fix

For detailed steps, you can check the webpage from angular.

Building Angular App

npm run build -prod -aot 

check angular.json file for build-output path

Installing Bootstrap and jQuery

First install the following packages

npm install --save bootstrap jquery

then update angular.json file with following styles and scripts information

We can now add the bootstrap classes for styling e.g. nav bar in html as following:

Creating a Module

ng g m products/product --flat //import it into app module
ng g module company –m app.module //another module

We can import ProductModule into app module as follows:

and we can setup routing as follows:

the navigation HTML as follows

Lazy Loading Angular modules

Lazy loading help with performance. You can check more details on this link.

To demonstrate, we’ll create a quotes module with its own routing. Then we’ll create a component inside this quotes module (–module flag will register component with module):

ng g m quotes --routing
ng g c /quotes/components/quotes --module quotes

The component will not be part of AppModule, and we won’t import it into AppModule. QuotesModule will load when it’s required.

Next, we’ll edit quotes.routing.module.ts file as shown below

next, update the app.routing.module.ts file as shown below

and add the navigation link HTML as follows:

Lazy loading

Now, if we serve the application, we can see the following console output for lazy chunk files:

we can navigate the application and see the difference when it initially loads vs when the quotes link is clicked:

Shared Module

In real-life projects, we often need to use a lot of components in multiple feature modules e.g. common modules, like ReactiveFormsModule or FormsModule, and other common components. Shared modules can help us to achieve this with less code, improving productivity.

Instead of importing these common modules and components in every feature module, we can create a shared module that has all these modules and components. Import them into a shared module and import this shared module into all feature modules. 

Create a Shared Module

A shared module is a type of feature module so we can create it in similar way

ng g m shared --routing

Now create a shared component in the SharedModule and export it from the shared module so we can directly use it in other modules or components without importing the shared component into other modules.

ng g c shared/components/shared --module shared

As we know, we can use the component if it is registered in the module. But to use SharedComponent, we will not import it in AppModule or QuotesModule. We need to export SharedComponent from ShareModule.

Importing SharedModule into other modules

Instead of importing the components into the other modules, import the SharedModule into other modules. Every component registered in the SharedModule can be used by other modules.

Similarly, we can import SharedModule in another module (quotes) as follows

For more information about sharing module, you can check this link from angular documentation.

Application Structure

Following is the application structure so far:

Summary

This post covers the first steps when setting up a new angular application. We’ll be extending the application in later posts. The source code is available from this git repository.

Let me know if you have some questions or comments.

Till next time, happy coding.