angular.md

Angular

Introduction to Angular

What is Angular?

• Platform for building client applications with web technology
  • HTML, JavaScript/TypeScript, CSS/SASS
• Angular covers (read more details):
  • Modules
  • Components (=application logic)
  • Templates (=view)
  • Data Binding (Components to Templates)
  • Services
  • Dependency Injection

Getting Started

• Angular CLI

npm install -g @angular/cli
ng help
ng new my-first-project
cd my-first-project
ng serve

Getting Started

• StackBlitz
• Online Visual Studio Code IDE for Angular (and React)
• Read details...

Project Structure

Project Structure

Project Structure

Template & Data Binding

Syntax	Description
{{title}}	One-way binding from data source to view (interpolation)
{{1 + 1}}	One-way binding with template expression
[hidden]="!isValid()"	One-way data binding to property (property binding)

• Avoid side-effects!

Template & Data Binding

Syntax	Description
(click)="onSave()"	One-way event binding from element to component (event binding)
<input [(ngModel)]="firstName">	Two-way binding (ngModel)

Forms Module

For two-way binding you need the FormsModule

...
import { FormsModule } from '@angular/forms'
...
@NgModule({
  ...
  imports: [
    ..., FormsModule, ...
  ], ...
})
export class AppModule { }

Template & Data Binding

• Define HTML layout and structure
• Prefixed with *

Syntax	Description
*ngFor="let i of items"	Repeater directive (ngForOf)
*ngIf="len > 3"	Conditional display (ngIf)
ngSwitch/*ngSwitchCase	Conditional display (example)

Template & Data Binding

Syntax	Description
[class]="errorClass"	Replacement class binding
[class.error]="hasError()"	Toggling class binding
[style.color]="hasError() ? 'red' : 'green'"	Style binding

Template & Data Binding

Syntax	Description
{{ birthday | date:'longDate'}}	Pipe operator

• Built-in pipes
• Advanced topic: Building custom pipes

Advanced Template & Data Binding

• HTML attributes vs. DOM properties
• Template reference variables
• Input and Output properties

Consuming Web APIs

• Use module HttpClientModule
• Read more in Angular docs...

...
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [ ..., HttpClientModule, ... ],
  declarations: ...,
  bootstrap: ...
})
export class AppModule {}

Consuming Web APIs

Get instance of HttpClient in constructor (Dependency Injection)

...
import { HttpClient } from '@angular/common/http';

@Component(...)
export class MyComponent {
  constructor(private http: HttpClient) { ... }
  ...
}

Consuming Web APIs

<!--#include file="angular/0020-http-client/app.component.ts" -->

Consuming Web APIs

<!--#include file="angular/0020-http-client/app.component.html" -->

Consuming Web APIs

Method	Docs link
get	Read more...
post	Read more...
patch	Read more...
put	Read more...
delete	Read more...

Routing

• Angular supports navigating between client-side views using the URL
• Support passing parameters in the URL
  • Path
  • Query
• base element defines the base URL for all relative URLs
• Uses HTML5's push state functionality in the background
  • Can be changed to hash URLs for older browsers if necessary
  • See also LocationStrategy
• Generate new Angular app including router with --routing switch in CLI
  • Example: ng new <your app name> --routing

Setup Routing Module

<!--#include file="angular/0040-routing/src/app/app-routing.module.ts" -->

Add Routing Module to Main Module

<!--#include file="angular/0040-routing/src/app/app.module.ts" -->

Router Links

<!--#include file="angular/0040-routing/src/app/welcome.component.ts" -->

Processing Route Parameters

<!--#include file="angular/0040-routing/src/app/customer-details.component.ts" -->

Recap: SVG

• Scalable Vector Graphics
  • SVG Guide
• Vector graphics in browsers
• Great tool support (e.g. Inkscape)
• Great community resources
  • CC0 images (use e.g. Google image search to find them on the internet)
  • Libraries (e.g. d3, SnapSVG)
• CSS styling and animations (samples)
• Works well with Angular
  • Can be used nearly exactly like HTML elements
  • Data binding for SVG attributes: Use Angular's attribute bindings
• SVG element reference on MDN...

Flex Layout

• Create simple grid layouts for web apps with ease
• Based on Flexbox CSS
• Angular module available (@angular/flex-layout)
  • Video of AngularConnect talk
• See interactive demo (source code) to learn functionality

Flex Layout

<!--#include file="angular/0050-ng-flex/src/app/simple-layouts/simple-layouts.component.html" -->

Flex Layout

<!--#include file="angular/0050-ng-flex/src/app/ordering/ordering.component.html" -->

Progressive Web Apps

• Web apps get important features of desktop apps
• Examples:
  • Runs offline, too
  • Push notifications
  • Homescreen icon
  • Work on different screen sizes (response design)
• Learn more:
  • Google's Progressive Web Apps Training
  • Video about Progressive Web Apps from Google I/O 2017
  • Service Worker Tutorial

Angular Service Worker

• Started in version Angular 5 and Angular CLI 1.6
• Supported by Angular CLI
  • --service-worker switch for ng new command
  • Generates "serviceWorker": true option in .angular-cli.json
  • Adds the @angular/service-worker NPM package
  • Calls ServiceWorkerModule.register in app.module.ts
  • Creates the ngsw-config.json configuration file
• Only active for production build
  • --prod switch in ng build command
  • For results, see dist folder
  • Use http-server NPM package or Chrome Development Webserver to test

Angular Service Worker Configuration

{
  "index": "/index.html",
  "assetGroups": [...],
  "assetGroups": [...],
  "dataGroups": [...]
}

• Documentation
• assetGroups: For resources that are part of the app version
• dataGroups: For data that is not part of the app (e.g. API results)
• Service worker demo application

Further Readings and Exercises

• Want to know more? Read/watch...
  • Angular Documentation
  • Angular Tutorial
  • Angular Cheat Sheet
  • Angular and RxJS
  • ReactiveX Library
• Exercises
  • Introduction in RxJS