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