angular 2 básico
TRANSCRIPT
![Page 1: Angular 2 Básico](https://reader036.vdocumento.com/reader036/viewer/2022082906/58f218681a28ab637a8b45cb/html5/thumbnails/1.jpg)
Curso Básico
![Page 2: Angular 2 Básico](https://reader036.vdocumento.com/reader036/viewer/2022082906/58f218681a28ab637a8b45cb/html5/thumbnails/2.jpg)
Introdução
HTML, CSS, TypeScript
Totalmente diferente do Angular 1
https://angular.io
Open Source
Web components, Shadow DOM, etc.
![Page 3: Angular 2 Básico](https://reader036.vdocumento.com/reader036/viewer/2022082906/58f218681a28ab637a8b45cb/html5/thumbnails/3.jpg)
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
![Page 4: Angular 2 Básico](https://reader036.vdocumento.com/reader036/viewer/2022082906/58f218681a28ab637a8b45cb/html5/thumbnails/4.jpg)
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
![Page 5: Angular 2 Básico](https://reader036.vdocumento.com/reader036/viewer/2022082906/58f218681a28ab637a8b45cb/html5/thumbnails/5.jpg)
![Page 6: Angular 2 Básico](https://reader036.vdocumento.com/reader036/viewer/2022082906/58f218681a28ab637a8b45cb/html5/thumbnails/6.jpg)
Módulos
Agrupamento de componentes.
Lógico, domínio, processos, workflow,...
ng g module nome-do-modulo
![Page 7: Angular 2 Básico](https://reader036.vdocumento.com/reader036/viewer/2022082906/58f218681a28ab637a8b45cb/html5/thumbnails/7.jpg)
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 { }
![Page 8: Angular 2 Básico](https://reader036.vdocumento.com/reader036/viewer/2022082906/58f218681a28ab637a8b45cb/html5/thumbnails/8.jpg)
Componente
Aplicações são feitas de componentes.
HTML + Componente class.
Decorator: @Component
![Page 9: Angular 2 Básico](https://reader036.vdocumento.com/reader036/viewer/2022082906/58f218681a28ab637a8b45cb/html5/thumbnails/9.jpg)
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }
![Page 10: Angular 2 Básico](https://reader036.vdocumento.com/reader036/viewer/2022082906/58f218681a28ab637a8b45cb/html5/thumbnails/10.jpg)
Template
<!doctype html>
<html>
<head>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
![Page 11: Angular 2 Básico](https://reader036.vdocumento.com/reader036/viewer/2022082906/58f218681a28ab637a8b45cb/html5/thumbnails/11.jpg)
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>
![Page 12: Angular 2 Básico](https://reader036.vdocumento.com/reader036/viewer/2022082906/58f218681a28ab637a8b45cb/html5/thumbnails/12.jpg)
Etapa 2 - layout
pure-g
pure-u
pure-form pure-form-stacked
pure-table
pure-button
![Page 13: Angular 2 Básico](https://reader036.vdocumento.com/reader036/viewer/2022082906/58f218681a28ab637a8b45cb/html5/thumbnails/13.jpg)
Etapa 3 -
ng generate component shopping-list
ng generate class ShoppingItem
ng generate service ShoppingListData
ngModel
component logic
![Page 14: Angular 2 Básico](https://reader036.vdocumento.com/reader036/viewer/2022082906/58f218681a28ab637a8b45cb/html5/thumbnails/14.jpg)
Service
Lógica de negócio
Comunicação com API REST
Configurações
etc.
![Page 15: Angular 2 Básico](https://reader036.vdocumento.com/reader036/viewer/2022082906/58f218681a28ab637a8b45cb/html5/thumbnails/15.jpg)
Data binding
![Page 16: Angular 2 Básico](https://reader036.vdocumento.com/reader036/viewer/2022082906/58f218681a28ab637a8b45cb/html5/thumbnails/16.jpg)
Directives
Adicionam funcionalidades no template.
Estrutural: <tr *ngFor="let item of items">
Atributos: <input [(ngModel)]="hero.name">
![Page 17: Angular 2 Básico](https://reader036.vdocumento.com/reader036/viewer/2022082906/58f218681a28ab637a8b45cb/html5/thumbnails/17.jpg)
Referências
https://www.sitepoint.com/angular-2-tutorial/
https://angular.io/docs/ts/latest/guide/architecture.html