17. 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>
18. 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.
20. 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
21. 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’
27. 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
31. 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
34. 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
36. WE NEED TO PASS THE TABLE ID AS A
PARAMETER WHEN NAVIGATING TO
THE ORDER-FORM
37. 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
38. 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.
41. 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’
42. 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()
}
}
43. 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
45. 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
46. 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.
48. 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);
}
}
49. 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.
52. 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
54. 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.
56. 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.
58. 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.