Angular 2 Básico
•Télécharger en tant que PPTX, PDF•
1 j'aime•551 vues
Guia do GDG Codelab Angular 2 Básico. Código fonte pode ser encontrado no github: https://github.com/gdgfsa/shopping-list
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à Angular 2 Básico
Similaire à Angular 2 Básico (20)
Plus de Romualdo Andre
Plus de Romualdo Andre (18)
Dernier
Dernier (20)
Angular 2 Básico
- 1. Curso Básico
- 2. Introdução HTML, CSS, TypeScript Totalmente diferente do Angular 1 https://angular.io Open Source Web components, Shadow DOM, etc.
- 3. Ambiente de desenvolvimento Node: https://nodejs.org/ TypeScript: npm install -g typescript Visual Studio Code (ou outro que suporte TypeScript) Angular-cli: npm install -g angular-cli
- 4. Etapa 1 - preparação ng new shopping-list cd shopping-list ng serve baixar purecss, colocar na pasta de src/assets e link no index.html
- 6. Módulos Agrupamento de componentes. Lógico, domínio, processos, workflow,... ng g module nome-do-modulo
- 7. Módulos 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 { }
- 8. Componente Aplicações são feitas de componentes. HTML + Componente class. Decorator: @Component
- 9. import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'Angular'; }
- 10. Template <!doctype html> <html> <head> </head> <body> <my-app>Loading...</my-app> </body> </html>
- 11. my-app-component.ts: import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: 'my-app.html' }) export class AppComponent { name = 'Angular'; } my-app-component.html: <h1>Hello {{name}}</h1>
- 12. Etapa 2 - layout pure-g pure-u pure-form pure-form-stacked pure-table pure-button
- 13. Etapa 3 - ng generate component shopping-list ng generate class ShoppingItem ng generate service ShoppingListData ngModel component logic
- 14. Service Lógica de negócio Comunicação com API REST Configurações etc.
- 15. Data binding
- 16. Directives Adicionam funcionalidades no template. Estrutural: <tr *ngFor="let item of items"> Atributos: <input [(ngModel)]="hero.name">