Angular 2 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.

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

Angular 2 Básico

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to Angular 2 Básico

Similar to Angular 2 Básico (20)

More from Romualdo Andre

More from Romualdo Andre (18)

Recently uploaded

Recently uploaded (20)

Angular 2 Básico