Angular - FEMUG AM 4 - Jaime Neves

Transcript

1. Angular 4º FEMUG - AM Jaime Neves @dejaneves
2. Jaime Neves @dejaneves Hi, I’m a Front-end Develop passionate about web and everything related to it. I’m currently working building products with JavaScript at Apassos. jaimeneves.com.br
3. Empregos Manaus CheckForce.js FieldDrop.js PROJETOS Grupos Front End Manaus FEMUG - AM IONIC Brazil LookBack.io
4. Agenda Angular CLI Metadata Module Components/Directives Templates Data Binding Services Dependency Injection
5. One framework Mobile & desktop
6. Angular em toda parte
7. Cross-Platform Development Electron Ionic Native Script React Native Windows (UWP)
8. Angular-CLI
9. Angular CLI Example
10. Metadata Informa para o Angular como processar uma Class
11. Metadata - src/app/hero-list.component.ts (class) export class HeroListComponent implements OnInit { heroes: Hero[]; selectedHero: Hero; constructor(private service: HeroService) { } ngOnInit() { this.heroes = this.service.getHeroes(); } selectHero(hero: Hero) { this.selectedHero = hero; } } Metadata
12. Metadata - src/app/hero-list.component.ts (metadata) @Component({ selector: 'hero-list', templateUrl: './hero-list.component.html', providers: [ HeroService ] }) export class HeroListComponent implements OnInit { /* . . . */ } Decorator @Component
13. MODULE App Angular é modular; Root Module (AppModule); Feature Modules
14. Module
15. Module - src/app/app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [ BrowserModule ], providers: [ Logger ], declarations: [ AppComponent ], exports: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
16. Module - src/app/app.module.ts imports: Other Modules, providers: Services, declarations: View Class [Components, Directives and Pipes], exports: [The subset of declarations], bootstrap: [ The main application view ]
17. Module - src/app/app.module.ts import { Component } from '@angular/core'; @Component({ selector:'my-app', template:` <h1>{{title}}</h1> <nav> <a routerLink="/dashboard" >Dashboard</a> <a routerLink="/heroes" >Heroes</a> </nav> <router-outlet></router-outlet> `, styleUrls:['./app.component.css'] }) export class AppComponent { title = 'Tour of Heroes'; }
18. Module - src/main.ts import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; platformBrowserDynamic().bootstrapModule(AppModule); Inicie o “root module” https://angular.io/generated/live-examples/ngmodule/minimal.0.eplnkr.html
19. Module Example
20. Components/Directives
21. Componentes Componente controle parte de um código HTML In Angular, “everything is a component.”
22. Componentes - src/app/hero-list.component.ts (class) @Component({selector: 'greet', template: 'Hello {{name}}!'}) class Greet { name: string = 'World'; } A component has a lifecycle managed by Angular.
23. Templates Gerencia o que o usuário ver e pode fazer
24. Templates - src/app/hero-list.component.html <h2>Hero List</h2> <p><i>Pick a hero from the list</i></p> <ul> <li *ngFor="let hero of heroes" (click)="selectHero(hero)"> {{hero.name}} </li> </ul> <hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>
25. Templates
26. Data Binding
27. Data Binding Data Binding sem Framework Lógica de push/pull à mão Experiência com jQuery
28. Data Binding - src/app/hero-list.component.html (binding) <li>{{hero.name}}</li> <hero-detail [hero]="selectedHero"></hero-detail> <li (click)="selectHero(hero)"></li> Interpolation property binding event binding
29. Data Binding - src/app/hero-detail.component.html (ngModel) <input [(ngModel)]="hero.name"> vinculação de propriedades e eventos
30. Data Binding (ngModel) Example
31. Services
32. Services Categoria Ampla Quase Tudo Pode ser um Serviço Sem Definição no Angular Componentes Limpos Decorator @Injectable() Arquivo “.service.ts”
33. Services import { Injectable } from '@angular/core'; @Injectable() export class HeroService { /* . . . */ }
34. Services Example
35. Dependency injection
36. Dependency injection
37. Dependency injection constructor(private service: HeroService) { }
38. Dependency injection src/app/app.module.ts (module providers) Registered a provider providers: [ BackendService, HeroService, Logger ],
39. Dependency injection src/app/hero-list.component.ts (component providers) Registered a provider @Component({ selector: 'hero-list', templateUrl: './hero-list.component.html', providers: [ HeroService ] })
40. Obrigado !!! Jaime Neves @dejaneves