Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular: Um framework. Mobile & desktop.

Ciro Nunes
October 22, 2016

Angular: Um framework. Mobile & desktop.

Ciro Nunes

October 22, 2016
Tweet

More Decks by Ciro Nunes

Other Decks in Programming

Transcript

  1. 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?
  2. 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?
  3. 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
  4. FILTERS (PIPES) sem perder as features que nós conhecemos e

    amamos DATA BINDING DEPENDENCY INJECTION COMPONENTS DIRECTIVES ROUTING & NAVIGATION MODULES TESTING
  5. 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
  6. 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
  7. ~ $ npm i -g angular-cli ~ $ ng new

    my-project ~ $ ng serve ~ $ ng test ~ $ ng build --prod
  8. export class AppComponent { title = 'app works!'; } import

    { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<h1>{{title}}</h1>`, styleUrls: ['./app.component.css'] })
  9. export class AppComponent { title = 'app works!'; } import

    { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<h1>{{title}}</h1>`, styleUrls: ['./app.component.css'] })
  10. export class AppComponent { title = 'app works!'; } @Component({

    selector: 'app-root', template: `<h1>{{title}}</h1>`, styleUrls: ['./app.component.css'] }) import { Component } from '@angular/core';
  11. @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
  12. @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); } }
  13. @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); } }
  14. @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); } }
  15. @Directive({ selector: '[myHighlight]' }) export class HighlightDirective { constructor(el: ElementRef,

    renderer: Renderer) { renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow'); } }
  16. @Directive({ selector: '[myHighlight]' }) export class HighlightDirective { constructor(el: ElementRef,

    renderer: Renderer) { renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow'); } }
  17. @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 }
  18. 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 { }
  19. 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 { }