Angular CLI 7 Tutorial — Develop a Vehicle Insurance Project
In this tutorial you'll be learning how to use Angular CLI 7 (the latest version as of this writing) to create Angular applications and different constructs like modules, services, components and pipes etc.
We'll be building a car insurance front-end web application throughout a series that will start with this tutorial that aims to get you started with generating your Angular project from scratch.
In order to follow this tutorial, you'll need to have a development environment ready for front-end development with Angular.
In nutshell, you need to have:
- Node.js 8.9+ and NPM installed. You can install both from the official website.
- Basic knowledge of TypeScript,
- Basic knowledge of Unix bash for macOS and Linux users,
- Or basic knowledge of CMD or Powershell for Windows users.
In this tutorial, we assume you are working with a bash terminal. If that's not the case you can simply use the equivalent commands in Windows Command Prompt or Powershell.
You can check the available version of Node.js in your system using:
$ node -v
Installing Angular CLI 7
Angular CLI is a tool developed by the Angular team to allow developers to quickly create Angular projects without wasting time setting up complex build tools like Webpack.
In this section, you'll start by installing the Angular CLI 7 which is the latest version as of this writing.
Open your terminal and run the following command:
$ npm install --global @angular/cli
This step assumes you've installed Node.js and npm in your system.
In Debian-based system and macOS, you may need to add sudo to your command in order to install your package globally. This depends on your npm configuration so make sure you either configure npm properly or simply add sudo. On Windows, you'll need to open CMD or Powershell with administrator privileges
You quickly can all the available commands that you can use with the CLI by running the following command:
$ ng help
Now that you've installed the CLI, you can generate an Angular 7 project but first let's introduce the application we'll be building and the requirements we'll be implementing in this tutorial series.
Introducing the Project's Requirements
The application we'll be building starting with this tutorial and throughout a series of multiple posts is a simple car insurance web application (just the front-end, the back-end will be emulated using the Angular In-memory database).
It provides a CRUD interface for handling operations to create, get, update and delete data that can be categorized into the following categories:
- Coverage etc.
Generating a New Angular 7 Project
Now that you have Angular CLI installed and you understand what web application you are going to develop. You need to generate a project by running:
$ ng new angular-car-insurance
angular-car-insurance is the name we've provided for the project but you can provide any valid name you see fit.
Serving your Project
Angular CLI provides a development server that you can use to serve your projects locally when your developing them with many features like live code reloading which allows you to change your code and see the results without manually re-starting the development server to reloading the application in the browser.
To start the develoment server and serve your project, you simply need to use the
First, navigate into your project's root folder and run the
$ cd angular-car-insurance $ ng serve
The development server will be available from the
Understanding your Project Anatomy
Before you start adding any code to your project, let's first understand the project's anatomy. These are the files and folders contained in the project:
/e2e/: This folder contains end-to-end (simulating user behavior) tests of the website.
/node_modules/: All 3rd party libraries are installed to this folder using
/src/: It contains the source code of the application. Most work will be done here.
/app/: It contains modules and components.
/assets/: It contains static assets like images, icons and styles etc.
/environments/: It contains environment (production and development) specific configuration files.
browserslist: Needed by autoprefixer for CSS support.
favicon.ico: The favicon.
index.html: The main HTML file.
karma.conf.js: The configuration file for Karma (a testing tool)
main.ts: The main starting file from where the AppModule is bootstrapped.
polyfills.ts: Polyfills needed by Angular.
styles.css: The global stylesheet file for the project.
test.ts: This is a configuration file for Karma
tsconfig.*.json: The configuration files for TypeScript.
angular.json: It contains the configurations for CLI
package.json: It contains basic information of the project (name, description and dependencies etc.)
README.md: A Markdown file that contains a description of the project.
tsconfig.json: The configuration file for TypeScript.
tslint.json: The configuration file for TSlint (a static analysis tool)
You can configure many aspects of your project from the
angular.json file. And most of the work you will do will be in the
src/app folder that contains the actual code of your application.
You can also define any environment variables inside the
Creating Angular 7 Modules
The project deals with many domain entities like:
- Login, registration and user management,
- Vehicle and car management,
- Insurance policy, payment and coverage management,
- Employees management,
- And clients management.
You can divide the project into multiple modules for better organization and maintenance. These are the modules that you can create according to the functionalities that you need to handle in your application:
authmodule for encapsulating authentication functionality,
vehiclesmodule for encapsulating the code for creating, displaying, updating and deleting vehicles and cars,
insurancemodule for encapsulating the code for working with policies, payments and coverage,
employeesmodule for encapsulating the code for working with employees,
clientsmodule for encapsulating the code for working with clients.
Let's now create the modules. Head back to your terminal and run the following commands to create the modules with the Angular CLI:
$ ng g module auth $ ng g module vehicles $ ng g module insurance $ ng g module employees $ ng g module clients
That's it. After creating the modules, you will next create the components for your project.
Creating Angular 7 Components
A component is a TypeScript class decorated with the
@Component decorator. It controls a part of application screen. You can read more information about components from this tutorial.
In this example, you need to create many components in each module. Let's generate the first component:
$ ng generate component insurance/policy-list
policy-listis the name we've given to the component that displays the list of policies. You can, also just use g instead of generate.
We are prefixing the name of the component with the module name, i.e
insurance/policy-listso the CLI will add the component to the
insurancemodule instead of the main module.
You also need to generate the other components of the application, such as:
$ ng g component insurance/policy-create $ ng g component insurance/policy-update $ ng g component insurance/payment-create $ ng g component insurance/coverage-create $ ng g component vehicles/vehicle-list $ ng g component vehicles/vehicle-create $ ng g component vehicles/vehicle-update $ ng g component employees/employee-list $ ng g component employees/employee-create $ ng g component employees/employee-update $ ng g component clients/client-list $ ng g component clients/client-create $ ng g component clients/client-update $ ng g component auth/login $ ng g component auth/register
These are all the components that we need in our application. Each component is added to its own module.
In this tutorial, we've learned to use Angular CLI 7 to create an example vehicle insurance project with modules and components.
- Django 2 Ajax CRUD with Python 3.7 and jQuery
- PHP 7 Tutorial with MySQL: CRUD REST API & JWT
- Django 2 CRUD Tutorial: Generic Class-Based Views
- Angular 6|7 Tutorial — CRUD & Python REST API
- Python 3.7 Matplotlib — Data Visualization Tutorial
- Python 3.7 Data Classes — Tutorial by Example
- Ember 3 Tutorial: Building your First Application
- Django Authentication — Login, Logout and Password Change/Reset
- Ubuntu 18.04: Install Python 3.7 | 3.6, pip and venv
- Vertical Center in Bootstrap 4
- Angular 6|7 ngIf by Example
- Angular 6|7 ngFor Example
- JWT Auth with Vue, Vuex and Vue Router — Axios & Guards
- Node Express JWT Authentication — jsonwebtoken and bcryptjs
- Python Django JWT — djangorestframework-jwt Example
- Adonis Tutorial — CRUD REST API and JWT Authentication
- Adonis Tutorial — JWT Authentication
- Installing PostgreSQL on Ubuntu 18.04
- PostgreSQL & PostGIS Tutorial — Creating a Spatial Database
- Installing GDAL 2+ on Windows 7 & Windows 10
- Swift Vapor Tutorial — Creating a REST API
- es6 template strings or literals
- Django Form Example—Bootstrap 4 UI via django-crispy-forms
- Django TemplateView GET|POST Example — URLs, as_view and get_context_data
- CSS Grid Layout Tutorial—Styling a Django Template
- Vuex Tutorial
- Redux Tutorial
- Angular 7|6 with PHP and MySQL Example & Tutorial
- Ethereum Dapps with Truffle,Ganache, Metamask, OppenZippelin and React
- Angular 7|6 In-Memory Web API Tutorial | CRUD Example
- Using Vue.js in WordPress
- Learn Sails.js Tutorial 
- Using Vue.js in PHP Tutorial
- Angular 7|6 Material Data-Table Tutorial & Example