Angular 2 Essential Training

Typescript
Components
NgModules
Data Binding
Directives
Pipes
Inputs / Outputs
Observables
Routing
and more…
What you’ll Learn

ES5
Dart
CoffeeScript
ES2015 or ES7
Typescript
So Many Options!

SPA (single-page app)
o index.html
Dynamic, Rich, & Fast
Browser-Loaded
Cleaner Code
o if conditions, loops, vars
o data-binding {{ bindMe }}
What is Angular?

Loading Content
Server
Application
Server
+
SQL
Dataset
Template
Browser
Final HTML page
Browser
Application
Server
+
SQL
Dataset
Template
Browser
Final HTML page

Fast Friendly Modern
Angular 2 Features

Fast
Angular 2 Features
 Initial Loads
 Change Detection
 Rendering

Friendly
Angular 2 Features
 Simplified API
 Better Patterns

Modern
Angular 2 Features
 Components
 Responsive

ES2015
Javascript Advances
 Classes
 Modules
 Decorators

Typescript
 ES2015
 ES7
 Strong Typing

White
ECMAScript 5
ECMAScript 2015
TypeScript
Typescript = All the JavaScript

Creates Strong Typing
var myVar: string = “Happy”;
Strings, Booleans, Arrays
Type Annotations

Function Function ParameterProperty
export class AppComponent {
pageTitle: string = “Welcome";
}
function isFalse: boolean {
return false;
}
function sayHello(input: string): string{
return “Hello " + input;
}
Type Examples
Function void
function isFalse: void {
console.log(‘my message’);
}

Syntax Checking = Fewer Bugs
IDE Support
o code completion, highlighting, error checking
Strong Typing Benefits

Enhanced JavaScript
Strong Typing
IDE Support
TypeScript Benefits

Developer Environment
• editors and plugins
Get going!
• angular.io Quickstart
Setup Revisited
• file explanation
Setup

Install Node.js
Text Editor
Install Plugins
Developer Environment

Create Container
Closed System
Import / Export
Modules

@NgModule
Load Components
Bootstrapping
NgModule

NgModule
“Used in order to help us
organize our application into
cohesive blocks of functionality”

NgModule
app.module.ts
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from
‘@angular/platform-browser’;
import { AppComponent } from ‘./app.component’;
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { } Class
Metadata
Import

NgModule
app.module.ts
import { BrowserModule } from
‘@angular/platform-browser’;
@NgModule({
})
export class AppModule { }
@NgModule()
@NgModule({
// compose Metadata
})

Bootstrapping
main.ts
import { platformBrowserDynamic } from
‘@angular/platform-browser-dynamic’;
import { AppModule } from ‘./app.module’;
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
bootstrap
const
Import

Root Component
app.component.ts
import { Component } from ‘@angular/core’;
@Component({
selector: ‘my-app’,
template: `<h1>My First Angular App</h1>`
})
export class AppComponent {}

Composition
Decorators & Classes
Directives
Styles & Templates
Components

Bootstrapper
main.ts
App Component
Sidebar
Component
Posts
Component
Nav
Component
Component Structure
Widgets
Component
Calendar
Component

Building Components
Component
Template Class Metadata
• View Layout
• HTML Code
• Supports View
• Contains Properties
and Methods
• Used inside @Decorator
• Extra instructions for
Angular

Component
app.component.ts
@Component({
selector: ‘bs-app’,
template: `
<h1>{{ pageTitle }}</h1>
<div>App Component Test</div>`
})
pageTitle: string = “Dev Book Store”;
showBook(): void {
// method logic here
}
}
Class
Metadata
Import

Component
app.component.ts
@Component({
template: `
<div>App Component Test</div>`
})
pageTitle: string = “Dev Book Store”;
showBook(): void {
// method logic here
}
}
@Component()
@Component({
// compose Metadata
})

Data Binding
Template
Methods
Properties
Class
{{pageTitle}}

1-way Binding
• {{pageTitle}}
2-way Binding
• [(ngModel)]=“searchFilter”
Event Binding
• (click)=“hideImage()”
Types of Data Binding

1-way Binding
Interpolation
Template
pageTitle: string =
“Dev Book Store”;
}
Class

Property Binding
Template
<img [src]=“bookImageUrl”>
Element
Property
Class
Property
export class BookListComponent {
bookImageUrl: string = “app/images/656.jpg”
}
Class
1-way Binding

2-way Binding
Template
searchBox: string = “”;
}
Class
<input [(ngModel)]=“searchBox”>
[()]
Banana in a Box

2-way Binding
import { FormsModule } from ‘@angular/forms’;
@NgModule({
imports: [
BrowserModule,
FormsModule
]
})
AppModule

Event Binding
“Used to respond to user
actions like button clicks.”

Respond to User Actions
• Button clicks
Event Binding

Template
(click)=“hideImage()” export class AppComponent {
hideImage(): void {
this.showImage = !this.showImage;
}
}
Class
Event Binding
https://developer.mozilla.org/en-US/docs/Web/Events

Directives
“An HTML element or attribute
that is used to enhance and
extend our HTML”

Component
• <bs-app></bs-app>
Structural
• NgIf, NgFor, NgStyle
Attribute
• <p highlight></p>
Types of Directives

Types of Directives
Custom Structural
welcome.component.ts
@Component({
selector: ‘bs-welcome’
})
app.component.ts
@Component({
template: <bs-welcome></bs-welcome>
})
*ngIf=“showImage”
*ngFor=“let book of books”
Add, Remove or Update view elements
<tr *ngFor=“let book of books”>
<td>{{ book.title }}</td>
<td>{{ book.author }}</td>
<td>{{ book.price }}</td>
</tr>

NgIf
books-list.component.html
<img *ngIf=“showImage”>
Add, Remove or Update view elements
- with Booleans
- with Conditionals

NgFor
- Instantiates a template
once per item from an
iterable.
- Can be array or object.
- Repeats over list creating
new templates.

NgFor
*ngFor=“let book of books”
<tr *ngFor=“let book of books”>
<td>{{ book.title }}</td>
<td>{{ book.author }}</td>
</tr>
books: any[] = [
{ title: “Moby Dick”, author: “Herman Melville”},
{ title: “War and Peace”, author: “Leo Tolstoy”},
{ title: “Ulysses”, author: “James Joyce”}
]

NgClass
<div [ngClass]=“{‘redClass’: showImage, ‘yellowClass’: !showImage}”>
Adds and removes CSS classes on an
HTML element
- used with Object to form Expressions
- with Arrays or Strings [ngClass]=“redClass”

Pipes
“Allow us to transform
or format our data”

 Built-In = | uppercase
 Custom = | myPipeName
Pipes

Using Pipes
Template
export class BooksListComponent {
books: any[] = [{
inStock: ‘yes’
}]
}
books-list.component.ts
<h1>{{ books.inStock | uppercase }}</h1>
YES

 Uppercase
 Lowercase
 Decimal
 Currency
 Date
 Json
Built-in Pipes

1. Create File
2. Import into AppModule
3. Use in Template
Custom Pipes

Custom Pipes
Template
import { PipeTransform, Pipe } from '@angular/core';
@Pipe({
name: ‘limitChar'
})
export class TruncatePipe implements PipeTransform {
transform(input: string, args: string[]) {
// Perform transformation here
return…
}
}
truncate.pipe.ts
<h1>{{ books.results | limitChar }}</h1>
import { TruncatePipe } from ‘./truncate.pipe.ts’;
@NgModule({
declarations: [ AppComponent
TruncatePipe ],
})
app.module.ts

Interface
“Used in Typescript to
define data types for
properties and methods”

1. Definition
2. Examples
3. Use in App
Interface

Interface
export interface IBook {
id: string;
name: string;
releaseDate: Date;
description: string;
author: string;
price: number;
imageUrl: string;
damaged(reason: string): void;
}
Method
Properties
Export

export interface IBook {
id: string;
name: string;
releaseDate: Date;
description: string;
author: string;
price: number;
imageUrl: string;
damaged(reason: string): void;
}
Interface

Strong Typing
Better Tooling
Development Time
Why Interfaces?

1. Definition
2. Most Used Hooks
3. Examples
Lifecycle Hooks

Lifecycle Hooks
Component
Child
Components
Removes &
Watches

OnInit
• Perform component initialization
OnChanges
• Perform action when values change
OnDestroy
• Perform clean-up
Lifecycle Hooks

Using Lifecycle Hooks
import { Component, OnInit } from '@angular/core';
@Component({
selector: ‘bs-books-list'
})
export class BooksListComponent implements OnInit {
ngOnInit() : void {
console.log(‘Inside OnInit’);
}
}
books-list.component.ts

1.Nested Components
2.@Input / @Output
3.Custom Events
Inputs and Outputs

Bootstrapper
main.ts
App Component
Sidebar
Component
Posts
Component
Nav
Component
Sample Component Hierarchy
Widgets
Component
Calendar
Component
Child
Components
Send
Receive

@Input
“Allows data to flow
from parent component
to child component”

Inputs
Container Component
Nested Component
@Input() reviews: number;Input

child_component.ts
export class ParentComponent {
books: any[] = [{
bookReviews: 15
}]
}
Input
parent_component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: ‘child'
})
export class ChildComponent {
Input() reviews: number;
}
parent_component.html
<div><h1>Parent Title</h1>
<p>body text…</p>
<child [reviews]=“book.bookReviews”>
</child>
</div>
child_component.html
<div>
<p>{{ reviews }}</p>
</div>

@Output
“Custom events that pass
data from component to the
outside world.”

Output
Container Component
Nested Component
@Output() notify: EventEmitter<string> = new
EventEmitter<string>();Output

EventEmitter
“Listens for something to
happen and emits an event
when triggered”

EventEmitter
notify
Child Component
Publishes to Parent
new EventEmitter
this.notify.emit(‘send message’)
Parent Component
Subscribes to
Output
(notify)=“actionMethod()”

child_component.ts
export class ParentComponent {
onNotifyClicked(message: string): void {
this.showMessage = message;
}
}
Output
parent_component.ts
import { Output, EventEmitter } from '@angular/core';
export class ChildComponent {
Output() notify: EventEmitter<string> =
new EventEmitter<string>();
onClick(): void {
this.notify.emit(‘Message from child’);
}
} parent_component.html
<div><h1>Parent Title</h1>
<p>{{ showMessage }}</p>
<child (notify)=“onNotifyClicked($event)”>
</child>
</div>
child_component.html
<div
(click)=“onClick()”>
<button>Click Me</button> </div>

Generic
“Defines the type of an
instance. Such as a object
or function. Example:
MyObj<string>”

What are Services
• Building
• Registering
• Injecting
Dependency Injection
• Singleton
Constructor
• Initial setup
Services

Service
“Used to encapsulate logic
that can be used across
multiple components”

Data Service Component
Injector

Service
@NgModule({
bootstrap: [ AppComponent ],
providers: [ BookService ]
})
book.service.ts
import { Injectable } from '@angular/core';
import { IBook } from ‘./models/book';
@Injectable()
export class BookService {
getBooks(): IBook[] {
// get all books
}
}
import { BookService } from ‘./book.service.ts';
export class BookComponent {
constructor(_bookService: BookService) { }
getAllBooks() {
this._bookService.getBooks()
}
}
app.module.ts book.component.ts

Constructor
import { BookService } from ‘./book.service.ts';
export class BookComponent {
constructor(private _bookService: BookService) { }
getAllBooks() {
this._bookService.getBooks()
}
}
book.component.ts

Special Method
Initial Setup
No Return Value
Constructor

HTTP
Request
Response
- http
- Observable

Observables
• compare to promises
Http Request
• GET
• process as Observable
Subscribe
• display data
HTTP & Observables

Observable
“An asynchronous stream of
data we can subscribe to”

price 3
price 2
price 1
Observables

Single value
Not cancellable
Observable
Multiple values
Cancellable
Map, filter, reduce
Promisevs

Using Http
import { HttpModule } from ‘@angular/http';
@NgModule({
imports: [ BrowserModule
HttpModule ],
bootstrap: [ AppComponent ],
providers: [ BookService ]
})
book.service.ts
import { Injectable } from '@angular/core';
import { Http } from ‘@angular/http';
@Injectable()
export class BookService {
constructor(private _http: Http) { }
getBooks(): IBook[] {
return this._http
.get(‘api/books.json’)
.map((response: Response) => response.json())
}
}
app.module.ts

Simple Routing
• <router-outlet>
routerLink
• menu, buttons
Pass Parameters
• book-details
Routing

1.<base href=“/”>
2.import RouterModule
3.Add path’s
4.<router-outlet>
Routing

Routing
import { RouterModule } from ‘@angular/router';
@NgModule({
RouterModule.forRoot([
{ path: “books”, component: BooksListComponent },
{ path: “”, redirectTo: “books”, pathMatch: “full” },
{ path: “**”, redirectTo: “books”, pathMatch: “full” }
]),
})
index.html
<html>
<head>
<base href=“/”>
<router-outlet></router-outlet>

app.module.ts app.component.html
http://localhost:3000/books

RouterLink
<a [routerLink]=“[‘/books’]”>All Books</a>
{ path: ‘books’, component: BooksListComponent }
http://localhost:3000/books

1.new HomeComponent
2.set as default
3.add links to
‘home’ and ‘books’
Routing Challenge

Routing with Parameters
import { RouterModule } from ‘@angular/router';
@NgModule({
RouterModule.forRoot([
{ path: “books”, component: BooksListComponent },
{ path: “book/:id”, component: BookDetailsComponent },
{ path: “”, redirectTo: “books”, pathMatch: “full” },
{ path: “**”, redirectTo: “books”, pathMatch: “full” }
]),
})
app.module.ts

Passing Route Parameters
{ path: “book/:id”, component: BookDetailsComponent }
app.module.ts
<h4>
<a [routerLink]=“[‘/book’, book.id]”>
{{ book.name }}
</a>
</h4>

Angular 2 Essential Training

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Angular 2 Essential Training (20)

Recently uploaded (20)

Angular 2 Essential Training