Angular2 workshop

THE ANGULAR2
WORKSHOP
Nir Kaufman
Build Your First Angular2 Application

Nir Kaufman
- Wrote a book about Angular2
- Play the Bass
- Eat vegan food
Head of AngularJS Development @ 500Tech

GET A FEEL OF ANGULAR2
Understand Angular2 concepts
Get your hands on
Get a project that you can keep learning with

https://github.com/nirkaufman/
angular2-workshop.git

AN ANGULAR2 APPLICATION UI
IS A COMPOSITION OF COMPONENTS
(reusable UI building blocks)

APP
CONTENT
TABLES
TOP-NAVBAR
THIMKING IN COMPONENTS
TABLE-VIEW

THIMKING IN COMPONENTS
APP
TOP-NAVBAR CONTENT
TABLES
TABLE-VIEWTABLE-VIEWTABLE-VIEW
wrapper component

MOST BASIC COMPONENT
import { Component } from 'angular2/core';
@Component({ 
selector: 'App', 
template: ‘<h1>Hello Component!</h1>’ 
}) 
 
class App {}
In JavaScript
Use in HTML
<body> 
 
<App></App> 
 
</body>

INSTRUCTIONS
copy the images folder from ‘_template’ to ‘ src/assets’
copy and paste custom css to ‘src/assets/css/app.css’
locate the ‘tables.html’ template inside the ‘_templates’ folder
create basic components, one per file, with a selector that
mach the component name and the corresponding template
HANDS ON - ON YOUR OWN!
Build our top level component tree for
our restaurant application.

COMPONENT COMPOSITION
import {Component} from 'angular2/core'; 
import {TopNavBar} from './top-navbar'; 
import {Content} from './content'; 
 
@Component({ 
selector: 'app', 
directives: [Content, TopNavBar], 
template: ` 
<top-navbar></top-navbar> 
<content></content> 
` 
}) 
 
export class App {}
import {Component} from "angular2/core"; 
 
@Component({ 
selector:'content', 
template:`<div class="container"></div>` 
}) 
 
export class Content {}
content.ts
app.ts

INSTRUCTIONS
separate the angular bootstrap to it’s own file
compose the components starting from the top app
component
review our application
HANDS ON - ALL TOGETHER!
Compose our component tree to build
our first ‘screen’

ORDER-VIEW-
FORM
NEW-ITEM-FORM ITEM-LIST ITEM-COMMENTS ITEM-BUTTONS
On a real application, we will
probably break this form to much
more smaller components

APP
TOP-NAVBAR CONTENT
TABLES
TABLE-
VIEW
TABLE-
VIEW
TABLE-
VIEW
wrapper component
ORDER-VIEW-
FORM
NEW-ITEM-FORM ITEM-LIST ITEM-COMMENTS ITEM-BUTTONS
ORDER-HISTORY
EXTENDING OUR COMPONENTS TREE

INSTRUCTIONS
checkout the 03_adding_components branch
find the templates on ‘_template’ folder (already extracted)
like before, keep each component on it’s on file
you can group components sub-trees in folders
code the missing components, test them by putting
them inside the content component

git checkout 04_all_components

IN ANGULAR2 WE GOT A BRAND
NEW COMPONENT ROUTER

BASIC ROUTING IN 4 STEPS
set the <base href=“/"> tag
use the RouterConfig on the root component
use the RouterOutlet component as placeholder
use the RouterLink directive for links

THE ROUTER CONFIG
 
@RouteConfig([ 
{path: '/', name: 'root', redirectTo: ['Tables']}, 
{path:'/tables', name: 'Tables', component: Tables}, 
{path:’/order/:id',name: 'OrderView', component: OrderView}, 
{path:'/history', name: 'OrderHistory', component: OrderHistory} 
]) 
 
@Component({ 
template: ` 
<top-navbar></top-navbar> 
 
<div class="container"> 
<router-outlet></router-outlet> 
</div> 
` 
}) 
app.ts

ROUTER LINKS
<ul class="nav navbar-nav"> 
<li><a [routerLink]="['/Tables']">tables</a></li> 
<li><a [routerLink]="['/OrderHistory']">tables</a></li> 
</ul>

INSTRUCTIONS
inject the ROUTER_PROVIDERS on application boot
config the routs on the top-level app component and replace
the content component with router-layout
add router links to the top-navbar component
Define basic routes to our application to navigate
through the tables and the history view

WE NEED TO PASS THE TABLE ID AS A
PARAMETER WHEN NAVIGATING TO
THE ORDER-FORM

WORKING WITH PARAMS
export class TableView { 
 
constructor(private router:Router) {} 
 
editOrder(){ 
this.router.navigate( ['OrderView', { id: 5 }] ); 
} 
}
table-view.ts
export class OrderView { 
 
constructor(private routeParams:RouteParams) {} 
 
ngOnInit() { 
let tableId = this.routeParams.get('id'); 
} 
}
table-view.ts

INSTRUCTIONS
implement an ‘editOrder’ method on table-view component
that uses the Router to navigate to the order-view with an id.
extract the id param in the order-view component on the init
phase and log it to the console
Route to the order-view component with an id
param and pull this param on the view-order
component.

DATA MODELS
import {Item} from './item' 
 
export class Order { 
 
private orderId: string; 
public created: Date; 
public diners: number; 
public items: Item[]; 
private comments: string; 
private total: number; 
public paid: boolean; 
private closed: Date; 
 
public constructor(diners: number = 1) { 
this.orderId = Order.nextId(); 
this.created = new Date(); 
this.diners = diners; 
this.paid = false; 
this.total = 0; 
} 
Let’s build the order and the item interfaces in a folder named ‘types’

THE RESTAURANT MANAGER
Our restaurant logic needs a home. create a ‘services’ folder for it.
import {Order} from "./order"; 
import {Injectable} from "angular2/core"; 
import {Router} from "angular2/router"; 
 
export class Restaurant { 
 
private _orders; 
 
public constructor(private router:Router) { 
this._orders = mockOrders; 
} 
 
public get orders(){ 
return this._orders; 
} 
 
public newOrder() { 
let _order = new Order(1); 
this._orders.push(_order); 
this.router.navigate( ['OrderView', { id: _order.id }] ); 
} 
 
public getOrderById(orderId) { 
return this._orders.filter( order => order.id === orderId)[0]; 
} 
 
public checkout(orderId){ 
this._orders.find(order => order.id === orderId).checkout() 
} 
}

DEPENDENCY INJECTION 101
In angular2 each component get it’s own Injector. The location of injection is important.
APP
TOP-NAVBAR CONTENT
TABLES
TABLE-VIEWTABLE-VIEWTABLE-VIEW
Service
Service

git checkout 07_business_logic

INSTRUCTIONS
make the business logic classes injectable extract the id
Inject the restaurant class to the app component (application
toot)
use some core directives for binding data to our components
cleanups and refactoring
Wire up our business logic to our components
and use some core directives

INSTRUCTIONS
use the familiar angular curly braces syntax
use the data pipe for formatting the date
implement the ‘checkout’ method on order view. remove it
from table-view
Bind the order object to the table-view
component.

PIPES
Now, we like to filter our orders, and display just the ‘open’ tables on the dashboard.
In angular2 we got Pipes. A class that implement a transform method,
decorated with the @Pipe decorator.
import {Order} from "../services/order"; 
import {Pipe} from 'angular2/core'; 
 
@Pipe({ 
name: 'orderPipe' 
}) 
 
export class OrderPipe { 
 
transform(orders) { 
return orders.filter( order => order.paid == false); 
} 
}

INSTRUCTIONS
create a ‘pipes’ directory
create a file named ‘orderPipe’
implement the transform method to return only the orders
that makes as open (paid = false)
decorate with a @Pipe and declare it on the tables component
Let’s create a pipe for filtering the tables showing
only the orders that that opened.

INSTRUCTIONS
bind the order id and diners count to the order view
build a select box using ngFor
get a reference to the ngForm and implement ngSubmit
use ng-control to bind the selected value to the order
Let’s bind data and make our order form to work by
using some core directives and Form directives

git checkout
10_collecting_user_data

INSTRUCTIONS
pass the order to the item-list
use the data pipe for formatting the date
implement the ‘checkout’ method on order view. remove it
from table-view
add comments to order
Make the items list to work! show items and
remove items. bonus: add comments.

TALKING WITH SERVERS
The Http module was re-written in angular2. while it’s favourite reactive
programming b by depending on Rxjs, we can use it anyway we like.

INSTRUCTIONS
use HTTP PROVIDERS
implement a get method to pull orders data
implement a post method to save orders to the database
bonus: create a dedicated service for http calls
Let’s bring orders data from the server.

Angular2 workshop

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Angular2 workshop

Similar to Angular2 workshop (20)

More from Nir Kaufman

More from Nir Kaufman (16)

Recently uploaded

Recently uploaded (20)

Angular2 workshop