Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular2 workshop

3,597 views

Published on

Slides for the angular2 workshop (angularCamp event). includes link to source code.

Published in: Technology

Angular2 workshop

  1. 1. THE ANGULAR2 WORKSHOP Nir Kaufman Build Your First Angular2 Application
  2. 2. Nir Kaufman - Wrote a book about Angular2 - Play the Bass - Eat vegan food Head of AngularJS Development @ 500Tech
  3. 3. AGENDA
  4. 4. GET A FEEL OF ANGULAR2 Understand Angular2 concepts Get your hands on Get a project that you can keep learning with
  5. 5. https://github.com/nirkaufman/ angular2-workshop.git
  6. 6. LET’S BUILD AN APP
  7. 7. TABLES DASHBOARD
  8. 8. ORDER EDITOR
  9. 9. ORDER HISTORY
  10. 10. PART 1 COMPONENTS
  11. 11. git checkout master
  12. 12. AN ANGULAR2 APPLICATION UI IS A COMPOSITION OF COMPONENTS (reusable UI building blocks)
  13. 13. THINKING IN COMPONENTS
  14. 14. APP CONTENT TABLES TOP-NAVBAR THIMKING IN COMPONENTS TABLE-VIEW
  15. 15. THIMKING IN COMPONENTS APP TOP-NAVBAR CONTENT TABLES TABLE-VIEWTABLE-VIEWTABLE-VIEW wrapper component
  16. 16. 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>
  17. 17. 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.
  18. 18. git checkout 01_components
  19. 19. 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
  20. 20. 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’
  21. 21. git checkout 02_composition
  22. 22. EXTENDING OUR COMPONENTS TREE
  23. 23. EXTENDING OUR COMPONENTS TREE
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. git checkout 04_all_components
  28. 28. PART 2 COMPONENT ROUTER
  29. 29. IN ANGULAR2 WE GOT A BRAND NEW COMPONENT ROUTER
  30. 30. 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
  31. 31. 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
  32. 32. ROUTER LINKS <ul class="nav navbar-nav">
 <li><a [routerLink]="['/Tables']">tables</a></li>
 <li><a [routerLink]="['/OrderHistory']">tables</a></li>
 </ul>
  33. 33. 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
  34. 34. git checkout 05_routing
  35. 35. WE NEED TO PASS THE TABLE ID AS A PARAMETER WHEN NAVIGATING TO THE ORDER-FORM
  36. 36. 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
  37. 37. 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.
  38. 38. git checkout 06_route_params
  39. 39. PART 3 BUSINESS LOGIC
  40. 40. 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’
  41. 41. 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()
 }
 }

  42. 42. 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
  43. 43. git checkout 07_business_logic
  44. 44. 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
  45. 45. 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.
  46. 46. git checkout 08_wiring
  47. 47. 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);
 }
 }

  48. 48. 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.
  49. 49. git checkout 09_pipe
  50. 50. COLLECTION USER DATA
  51. 51. 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
  52. 52. git checkout 10_collecting_user_data
  53. 53. 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.
  54. 54. git checkout 11_item_list
  55. 55. 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.
  56. 56. git checkout 12_server
  57. 57. 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.
  58. 58. git checkout 13_basic_http

×