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

AGENDA

GET A FEEL OF ANGULAR2Understand Angular2 concepts

Get your hands on

Get a project that you can keep learning with

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

LET’S BUILD AN APP

TABLES DASHBOARD

ORDER EDITOR

ORDER HISTORY

PART 1 COMPONENTS

git checkout master

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

THINKING IN COMPONENTS

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.

git checkout 01_components

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’

git checkout 02_composition

EXTENDING OUR COMPONENTS TREE

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

HANDS ON - ON YOUR OWN!code the missing components, test them by putting

them inside the content component

git checkout 04_all_components

PART 2 COMPONENT ROUTER

IN ANGULAR2 WE GOT A BRAND NEW COMPONENT ROUTER

BASIC ROUTING IN 4 STEPSset 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

HANDS ON - ALL TOGETHER!Define basic routes to our application to navigate

through the tables and the history view

git checkout 05_routing

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

HANDS ON - ALL TOGETHER!Route to the order-view component with an id

param and pull this param on the view-order

component.

git checkout 06_route_params

PART 3 BUSINESS LOGIC

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 MANAGEROur 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 101In 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

HANDS ON - ALL TOGETHER!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

HANDS ON - ON YOUR OWN!Bind the order object to the table-view

component.

git checkout 08_wiring

PIPESNow, 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

HANDS ON - ALL TOGETHER!Let’s create a pipe for filtering the tables showing

only the orders that that opened.

git checkout 09_pipe

COLLECTION USER DATA

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

HANDS ON - ALL TOGETHER!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

HANDS ON - ON YOUR OWN!Make the items list to work! show items and

remove items. bonus: add comments.

git checkout 11_item_list

TALKING WITH SERVERSThe 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.

git checkout 12_server

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

HANDS ON - ALL TOGETHER!Let’s bring orders data from the server.

git checkout 13_basic_http

Angular2 workshop

Technology

Transcript of Angular2 workshop