angular 2 - a new hope
TRANSCRIPT
![Page 1: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/1.jpg)
![Page 2: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/2.jpg)
![Page 3: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/3.jpg)
Angular 2Sami Suo-Heikki19.5.2016
![Page 4: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/4.jpg)
What is Angular 2?
![Page 5: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/5.jpg)
What is Angular 2?JavaScript Framework
Cross platform
Fully component based
Built from the ground up with TypeScript
Native ES6 modules
Supports server-side prerendering
![Page 6: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/6.jpg)
One framework.Mobile and Desktop.
![Page 7: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/7.jpg)
![Page 8: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/8.jpg)
Agenda for today
Architecture of Angular 2 app
Build your application with Angular CLI
Comparison to other JS frameworks
Useful tools
![Page 9: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/9.jpg)
Architecture of Angular 2 app
Component
Binding
Service
Router
Directive
![Page 10: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/10.jpg)
ComponentEncapsulate the template, data and the behaviour of a view.
![Page 11: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/11.jpg)
Component
import { Component } from '@angular/core';
@Component({ selector: 'hello-world', template: 'Hello {{name}}!'})export class HelloWorldComponent { constructor() { this.name = 'World!'; }}
![Page 12: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/12.jpg)
Component
import { Component } from '@angular/core';
@Component({ selector: 'hello-world', template: 'Hello {{name}}!'})export class HelloWorldComponent { constructor() { this.name = 'World!'; }}
![Page 13: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/13.jpg)
Component
import { Component } from '@angular/core';
@Component({ selector: 'hello-world', template: 'Hello {{name}}!'})export class HelloWorldComponent { constructor() { this.name = 'World!'; }}
![Page 14: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/14.jpg)
Component
import { Component } from '@angular/core';
@Component({ selector: 'hello-world', template: 'Hello {{name}}!'})export class HelloWorldComponent { constructor() { this.name = 'World!'; }}
![Page 15: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/15.jpg)
Component
Component Dom
![Page 16: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/16.jpg)
Binding
Component Dom
name = “World” <h1> {{name}} </h1>
![Page 17: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/17.jpg)
Binding
Component Dom
onClick() { ...}
<input (click)=”onClick()”>
![Page 18: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/18.jpg)
Two-way data binding
<input [(value)]="todo.text">
![Page 19: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/19.jpg)
ServiceReusable data service in your application.
![Page 20: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/20.jpg)
ServiceData AccessLoggingBusiness LogicConfiguration
![Page 21: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/21.jpg)
RouterResponsible for navigation.
![Page 22: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/22.jpg)
Router
@Routes([ {path: '/my-route', component: MyRouteComponent}, {path: '/my-other-route', component: MyOtherComponent},])
![Page 23: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/23.jpg)
Router
@Routes([ {path: '/my-route', component: MyRouteComponent}, {path: '/my-other-route', component: MyOtherComponent},])
![Page 24: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/24.jpg)
Router
@Routes([ {path: '/my-route', component: MyRouteComponent}, {path: '/my-other-route', component: MyOtherComponent},])
![Page 25: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/25.jpg)
DirectiveModify DOM elements and/or extend their behaviour.
![Page 26: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/26.jpg)
@Component({ selector: 'my-app', template: ` <vaadin-pie-chart> … </vaadin-pie-chart> `})
![Page 27: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/27.jpg)
@Component({ selector: 'my-app', template: ` <vaadin-pie-chart> … </vaadin-pie-chart> `, directives: [VaadinCharts,DataSeries]})
![Page 28: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/28.jpg)
@Component({ selector: 'my-app', template: ` <vaadin-pie-chart> … </vaadin-pie-chart> `, directives: [VaadinCharts,DataSeries]})
![Page 29: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/29.jpg)
Build your app with Angular CLIcli.angular.io
![Page 30: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/30.jpg)
Angular CLI
1. npm install -g angular-cli2. ng new PROJECT_NAME3. ng serve4. ng generate route my-hero5. ng build
![Page 31: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/31.jpg)
(Demo with Angular CLI)
![Page 32: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/32.jpg)
Comparison to other frameworks
![Page 33: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/33.jpg)
vs
![Page 34: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/34.jpg)
Simplicity
![Page 35: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/35.jpg)
Simplicity
![Page 36: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/36.jpg)
Simplicity
![Page 37: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/37.jpg)
Simplicity
Functionality
![Page 38: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/38.jpg)
Simplicity
Functionality
![Page 39: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/39.jpg)
Simplicity
Functionality
![Page 40: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/40.jpg)
Simplicity
Functionality
Convenience
![Page 41: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/41.jpg)
Simplicity
Functionality
Convenience
![Page 42: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/42.jpg)
Simplicity
Functionality
Convenience
![Page 43: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/43.jpg)
vs
![Page 44: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/44.jpg)
Simplicity
Functionality
Convenience
![Page 45: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/45.jpg)
Simplicity
Functionality
Convenience
![Page 46: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/46.jpg)
Simplicity
Functionality
Convenience
![Page 47: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/47.jpg)
Simplicity
Functionality
Convenience
![Page 48: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/48.jpg)
Useful tools
![Page 49: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/49.jpg)
augury.angular.io
![Page 50: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/50.jpg)
angular.io/styleguide
![Page 51: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/51.jpg)
cli.angular.io
![Page 52: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/52.jpg)
mobile.angular.io
![Page 53: Angular 2 - a New Hope](https://reader035.vdocuments.site/reader035/viewer/2022070520/58f21a831a28ab172b8b45a3/html5/thumbnails/53.jpg)
May the be with you