GDG Angular 2

NGULAR22º GDG Live Session

AngularJS é um framework Javascript open-source que auxilia na execução de single-page applications (SPA)

Angular é construído sob o padrão model-view-view-model (MVVM) e seu objetivo é permitir a construção de

aplicativos mobile e web.

Angular 2 é uma nova versão do framework totalmente reescrito.

✓https://angular.io

✓Uso de padrões web e Web Component

✓Ainda em versão RC (Release Candidate)

NGULAR2

✓Typescript https://www.typescriptlang.org

✓Javascript

✓Dart

NGULAR2

NGULAR2Typescript é um super conjunto de Javascript, que assim como Java que lhe

permite definir novos tipos e declarar variáveis com tipos em vez de usar tipos genérico.

Isso abre a porta para um novo suporte de ferramentas, que podemos usar para potencializar a produtividade.

NGULAR2

O código em Typescript é “transpilado" para Javascript Puro, isso permite que ele rode em qualquer navegador web

compatível com Javascript.

NGULAR2

T

Typescript

ECMAScript 6

ECMAScript 5

Junho 2015

Novembro 2009

(ECMAScript 2015)

script.ts

Transpiler

script.jsES5

NGULAR2

Componentes Diretivas Roteamento Serviços

Templates Metadata Data Binding Injeção de Dependencia

NGULAR2

NGULAR2{ } Header Component

{ } Content Component

{ } S

ideb

ar C

ompo

nent

NGULAR2

{ } Component

Java NodeJS

.Net PHP Ruby

Python

Service

NGULAR2

https://nodejs.org

https://www.npmjs.com

https://www.typescriptlang.org

Ambiente de desenvolvimento

NGULAR2 Editores

https://code.visualstudio.com

https://atom.io

https://www.sublimetext.com

https://www.jetbrains.com/webstorm

NGULAR2 Instalando

$ npm install -g typescript $ sudo npm install -g typescript

Mac ou Linux

NGULAR2 Angular CLI

$ npm install -g angular-cli $ sudo npm install -g angular-cli

Mac ou Linux

NGULAR2 Angular CLI

$ ng new <nome do projeto>$ cd <nome do projeto>$ ng serve

NGULAR2 Hello World

$ ng new helloworld$ cd helloworld$ ng serve

app.component.ts

http://localhost:4200/

NGULAR2 Hello World

Importa Component do pacote do Angular core

Define que a classe é um componente

Define e exporta uma classe

Metadata: nome da tag que será criada

Metadata: Template HTML

NGULAR2 Hello Worldindex.html app.component.ts

main.ts

NGULAR2 Hello World

Inicia a aplicação carregando o AppComponent

main.ts

Importa o nosso component AppComponent

NGULAR2 Hello World 2

Usando um template externo

app.component.ts

NGULAR2 Hello World 2

Data binding: expressão para exibir a variável name definida no componente

app.component.html

Two-way data binding

NGULAR2 Códigos Fontes

https://github.com/leonardom/gdg-angular2-helloworld

https://github.com/leonardom/gdg-angular2-backend

https://github.com/leonardom/gdg-angular2-beers

NGULAR2Pra saber mais sobre o Angular 2

https://angular.io/docs/ts/latest/

https://angular.io/docs/ts/latest/quickstart.html

https://angular.io/docs/ts/latest/tutorial/

https://angular.io/docs/ts/latest/api/

2º GDG Live Session

NGULAR2Leonardo Marcelinoleonardo.marcelino@gmail.comtwitter.com/leonardomplus.google.com/+LeonardoMarcelino

GDG São João da Boa Vistawww.gdgsaojoao.orgcontato@gdgsaojoao.org