Building and Deploying with CLI

Angular CLI & Routing: Essentials for Build and Navigation

Learning Outcome

5

Identify when to use each routing type

4

Understand server vs browser routing

3

Use important CLI commands

2

Learn build & deployment process

1

Understand Angular CLI and its importance

Why Angular CLI

Modern web applications demand:

  • Faster development

  • Structured and scalable code

  • Smooth and seamless navigation

Without Angular CLI:

  • Developers need to manually configure project setup

  • No standard folder structure

  • Repetitive tasks consume time

Why Angular CLI

Angular CLI automates project setup and development tasks

Angular CLI provides ready-to-use structure and tools

What is Angular CLI (Deep)

Angular CLI is a command-line tool to manage Angular apps.

Features:

  • Create project

  • Generate components/services

  • Build application

  • Run development server

npm install -g @angular/cli

Install CLI

ng new my-app
cd my-app
ng serve

Create project

Key CLI Commands (Development)

Generate Service

ng generate service user
ng g s user

Generate Directive

ng g directive highlight
ng g d highlight

Generate Components

ng generate component home
ng g c home

Generate Module

ng generate module admin
ng g m admin

Generate Pipe

ng g pipe filter
ng g p filter

Key CLI Commands (Development)

Generate Guard

ng g guard auth

Benefits

Faster development

Consistent & standard project structure

Reduces manual coding effort

Improves scalability

Server vs Browser Routing (Comparison)

Server RoutingBrowser Routing
Page reloadNo reload
Server handles logicAngular handles logic
SlowerFaster

Angular uses:

  • Client-side routing (SPA)

Summary

5

Angular uses client-side routing (SPA)

4

Routing enables smooth navigation

3

Build process optimizes app

2

Key commands help in fast project setup

1

Angular CLI simplifies development and deployment

6

Improves user experience and performance

Quiz

Which command creates a component?

A. ng build

B. ng serve

C. ng g c

D. ng start

Quiz-answer

Which command creates a component?

A. ng build

B. ng serve

C. ng g c

D. ng start

Angular: Building & Deploying with CLI - Angular CLI & Routing: Essentials for Build and Navigation

By Content ITV

Angular: Building & Deploying with CLI - Angular CLI & Routing: Essentials for Build and Navigation

  • 16

More from Content ITV