Post on 16-Apr-2017
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
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