Introdução ao Angular 2

1. NGULAR
2
2º GDG Live Session

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

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

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

5. ✓https://angular.io
✓Uso de padrões web e Web Component
✓Ainda em versão RC (Release Candidate)
NGULAR2

6. ✓Typescript https://www.typescriptlang.org
✓Javascript
✓Dart
NGULAR2

7. NGULAR2
Typescript é 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.

8. NGULAR2
O código em Typescript é “transpilado" para Javascript Puro,
isso permite que ele rode em qualquer navegador web
compatível com Javascript.

9. NGULAR2
T
Typescript
ECMAScript 6
ECMAScript 5
Junho 2015
Novembro 2009
(ECMAScript 2015)
script.ts
Transpiler
script.js
ES5

10. NGULAR2
Componentes Diretivas Roteamento Serviços
Templates Metadata Data Binding
Injeção de
Dependencia

11. NGULAR2

12. NGULAR2
{ } Header Component
{ } Content Component
{}SidebarComponent

13. NGULAR2
{ } Component
Java
NodeJS
.Net
PHP
Ruby
Python
Service

14. NGULAR2
https://nodejs.org
https://www.npmjs.com
https://www.typescriptlang.org
Ambiente de desenvolvimento

15. NGULAR2
Editores
https://code.visualstudio.com
https://atom.io
https://www.sublimetext.com
https://www.jetbrains.com/webstorm

16. NGULAR2 Instalando
$ npm install -g typescript $ sudo npm install -g typescript
Mac ou Linux

17. NGULAR2 Angular CLI
$ npm install -g angular-cli $ sudo npm install -g angular-cli
Mac ou Linux

18. NGULAR2 Angular CLI
$ ng new <nome do projeto>
$ cd <nome do projeto>
$ ng serve

19. NGULAR2 Hello World
$ ng new helloworld
$ cd helloworld
$ ng serve
app.component.ts
http://localhost:4200/

20. 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

21. NGULAR2 Hello World
index.html app.component.ts
main.ts

22. NGULAR2 Hello World
Inicia a aplicação carregando o
AppComponent
main.ts
Importa o nosso component
AppComponent

23. NGULAR2 Hello World 2
Usando um template externo
app.component.ts

24. NGULAR2 Hello World 2
Data binding: expressão para exibir a
variável name definida no componente
app.component.html
Two-way data binding

25. 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

26. NGULAR2
Pra 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/

27. 2º GDG Live Session
NGULAR2
Leonardo Marcelino
leonardo.marcelino@gmail.com
twitter.com/leonardom
plus.google.com/+LeonardoMarcelino
GDG São João da Boa Vista
www.gdgsaojoao.org
contato@gdgsaojoao.org