Angular: Um framework. Mobile & desktop.

Transcript

1. Um framework. Mobile & desktop.
2. Ciro Nunes @cironunesdev
5. Um framework. Mobile & desktop.
6. 2. Como distribuir para múltiplas plataformas 3. Arquitetura e um pouco de código 1. O que faz o Angular 2 ser tão bom?
7. 2. Como distribuir para múltiplas plataformas 3. Arquitetura e um pouco de código 1. O que faz o Angular 2 ser tão bom?
8. Múltiplas plataformas
9. Performance
10. Change Detection t AoT Compiler Algumas coisas que deixam o Angular 2 rápido t Optimized JS code for VM + Three shaking t Three shaking Unidirectional data flow Route Lazy loading t Smarter change detection
11. Experiência do desenvolvedor
12. Simplicidade
13. FILTERS (PIPES) sem perder as features que nós conhecemos e amamos DATA BINDING DEPENDENCY INJECTION COMPONENTS DIRECTIVES ROUTING & NAVIGATION MODULES TESTING
15. Ferramentas http://slides.com/gerardsans/imworld-ng2-revolution#/4/4
17. TS ES7 ES2016 ES6 ES2015 ES5
18. Extensões
23. http://fiber.google.com/
24. http://builtwithangular2.com/
25. 1. O que faz o Angular 2 ser tão bom? 2. Como distribuir para múltiplas plataformas 3. Arquitetura e um pouco de código
26. Desktop
27. Responsive Web Apps
28. Native
29. Mobile
30. Native (NativeScript)
31. Progressive Web Apps
32. Hybrid
33. 1. O que faz o Angular 2 ser tão bom? 2. Como distribuir para múltiplas plataformas 3. Arquitetura e um pouco de código
35. ~ $ npm i -g angular-cli ~ $ ng new my-project ~ $ ng serve ~ $ ng test ~ $ ng build --prod
36. Components
37. ~ $ ng generate component app
38. export class AppComponent { title = 'app works!'; } import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<h1>{{title}}</h1>`, styleUrls: ['./app.component.css'] })
39. export class AppComponent { title = 'app works!'; } import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<h1>{{title}}</h1>`, styleUrls: ['./app.component.css'] })
40. export class AppComponent { title = 'app works!'; } @Component({ selector: 'app-root', template: `<h1>{{title}}</h1>`, styleUrls: ['./app.component.css'] }) import { Component } from '@angular/core';
41. Data binding
42. http://jsbin.com/hayiyuyeve/edit?html,js,output
43. @Component({ selector: 'my-greeting', template: ` <input type="text" [(ngModel)]="hero.name"> <h2>Hello, {{hero.name}}</h2> `, }) export class Greeting { constructor() { this.hero = { name: 'Ciro' } } } http://plnkr.co/edit/MGnF3Ta5IOPYYAyXjFpl?p=preview
44. Binding Example Properties <fy-rating [rating]="feedback.rating"> Events <fy-rating (onRate)="feedback.update($event)"> Two-way <input type="text" [(ngModel)]="user.name">
45. Services
46. ~ $ ng generate service feedback
47. @Injectable() export class FeedbackService { constructor() { } }
48. @Injectable() export class FeedbackService { private feedbacksUrl = 'http://localhost:4222/feedbacks'; constructor(private http: Http) { } getFeedbacks(): Observable<Feedback[]> { return this.http.get(this.feedbacksUrl) .map(this.extractData); } }
49. Dependency Injection
50. @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [FeedbackService] }) export class AppComponent implements OnInit { feedbacks: Feedback[]; constructor(private feedbackService: FeedbackService) {} ngOnInit() { this.feedbackService.getFeedbacks() .subscribe(feedbacks => this.feedbacks = feedbacks); } }
51. @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [FeedbackService] }) export class AppComponent implements OnInit { feedbacks: Feedback[]; constructor(private feedbackService: FeedbackService) {} ngOnInit() { this.feedbackService.getFeedbacks() .subscribe(feedbacks => this.feedbacks = feedbacks); } }
52. Directives
53. ~ $ ng generate directive highlight
54. @Directive({ selector: '[myHighlight]' }) export class HighlightDirective { constructor(el: ElementRef, renderer: Renderer) { renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow'); } }
55. @Directive({ selector: '[myHighlight]' }) export class HighlightDirective { constructor(el: ElementRef, renderer: Renderer) { renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow'); } }
56. Pipes
57. @Component({ selector: 'hero-birthday', template: `<p>The hero's birthday is {{ birthday | date }}</p>` }) export class HeroBirthdayComponent { birthday = new Date(1988, 3, 15); // April 15, 1988 }
58. Modules
59. import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
60. import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
61. http://github.com/cironunes/feedbacky
62. @cironunesdev
63. Obrigado!