HEADING TEXT
Subheading Text
Date
INF 354:
Advanced
Programming
LP 06:
Angular II
Outline
 Angular Architecture
 Install & Configuration
 Angular CLI
 Angular Material
 Components & Templates
 Angular Services
 Routing & Navigation with Pages
 Additional Mentions
 In-Class Practice
Angular Architecture
Angular Architecture
Angular Architecture continued…
Install & Configuration
Install & Configuration









Node.js (website)
npm install -g typescript
npm install -g @angular/cli
ng add @angular/material
npm install
ng build
npm start
ng serve –o
ng new myapp
Angular CLI
Angular CLI
 https://angular.io/cli
 ng new testapp





ng generate something [options]
ng g component favourite-component
ng g c favourites/favourite-component --flat
ng g c favourite-component --flat -it -is --skip-Tests
ng g [interface or module or service] etc…
Angular CLI continued…
 Demo
Angular Material
Angular Material
 https://material.angular.io/
 Components & CDK (Components Dev Kit)
 Angular Material offers a wide variety of UI components based on the
Material Design specification
Angular Material continued…
Angular Material continued…
 Demo
Components & Templates
Components & Templates [Component]
 ng g c heroes/hero-details --skip-Tests
Components & Templates [Template]
Components & Templates continued…
 Demo
Angular Services
Angular Services
 ng g s services/hero --skip-Tests --flat
 Provides functionality that can be shared across multiple components,
directives, or other services within an application.
Angular Services continued…
 Demo
Routing & Navigation
with Pages
Routing & Navigation with Pages
 app-routing.module.ts  where you setup/configure your application
routing.
Routing & Navigation with Pages continued…
Routing & Navigation with Pages continued…
Routing & Navigation with Pages
 Demo
Additional Mentions
In-Class Practice