O documento apresenta informações sobre Angular 2 e TypeScript, incluindo como instalar as ferramentas necessárias, criar componentes, usar diretivas, serviços, módulos e roteamento. Também fornece links para cursos e projetos open-source da autora sobre Angular 2.

1. Angular 2
Loiane Groner
github.com/loiane
loiane.com
loiane.training
@loiane

2. • 10+ XP TI
• Java, JavaScript, Sencha, Angular
Phonegap/Ionic
• Blog: http://loiane.com
• Cursos: http://loiane.training

3. • Meus livros:

4. !==

8. TYPESCRIPT
TypeScript
ECMAScript 6
ECMAScript 5
ES 2015
Novembro 2009
meu-script.ts
transpiler
meu-script.js
ES5
Classes e Módulos
ECMAScript 7
ES 2016
Decorators e Async
Tipagem de dados, interfaces

10. O QUE PRECISAMOS INSTALAR
https://nodejs.org

11. TYPESCRIPT
https://www.typescriptlang.org/

12. > npm install -g angular-cli
> ng new meu-projeto
> cd meu-projeto
> ng serve

13. ANGULAR CLI: CRIANDO COMPONENTS
> cd NomeProjeto
> ng generate component meu-primeiro
> ng g component meu-primeiro

14. ANGULAR CLI: CRIANDO COMPONENTS

15. Editores/ IDEs

16. COMPONENTES DIRETIVAS
ROTEAMENTOSERVIÇOS
TEMPLATE
DATA BINDINGINJEÇÃO
DEPENDÊNCIA
MÓDULOS
Blocos Principais

17. COMPONENTE
{…}
TEMPLATE
<..>
DIRETIVAS
{..}
SERVIÇOS
SERVIÇO A
SERVIÇO B MÓDULO X
MÓDULO A
MÓDULO B
Binding de
Propriedades
Binding de
Eventos

18. Módulos

19. Imports das classes

20. Declaração dos
Components, Directives, Pipes que
queremos usar no projeto
Import dos Módulos que
serão usados por esse módulo
Componente principal
da aplicação

21. Também podemos ter
módulo de funcionalidade
pra ajudar a organizar o
projeto
Fornecedores de serviços

22. Admin
Usuários
Permissões
Shared/Common
Validações
Pipes
Produtos
ProdutosPainel
ProdutoLista
ProdutoDetalhe
ProdutoForm
Clientes
ClientesPainel
ClienteLista
ClienteDetalhe
ClienteForm
Vendas
VendasPainel
VendaLista
VendaDetalhe
VendaForm
VendaProdutosForm
Relatórios
RelatorioPrincipal
RelatorioClientes
RelatorioBuscaClientes
RelatorioProdutos
RelatorioBuscaProdutos
RelatorioVendas
RelatorioBuscaVendas
ExportarExcel
ExportarPDF
Raiz
AppComponent
NavBar
Menu

23. Componentes

24. Passo 1: Criar e Declarar Componente

25. Passo 1: Criar e Declarar Componente

26. Passo 1: Criar e Declarar Componente
Nome da tag a ser
utilizada

27. Passo 2: Importar e Declarar no módulo (e exportar caso queira
expor a outros módulos

28. Passo 3: Usar a tag do Componente criado

30. Templates

31. Template contém o HTML que será renderizado

32. Pode ser declarado inline (no próprio componente)

33. Ou num arquivo separado

34. Data
Binding

35. DATA BINDING
<TEMPLATE>
{COMPONENT}
{{ valor }}
[propriedade]="valor"
(evento)="handler"
[(ngModel)]="propriedade"

36. #1: Interpolação

37. #2: Binding de propriedades (property binding)
Todas as imagens tem o
mesmo resultado

38. #5: Event binding (binding de evento)
Evento a ser
"escutado"
Método/Função a
ser executada

39. Property binding +
event binding
Como manter o template e o
componente atualizados?

40. #6: Binding de Model (two-way data-binding)
Two-way
data binding com
NgModel

41. Diretivas

42. TEXT
TIPOS DE DIRETIVAS
DIRETIVAS ESTRUTURAIS
Interagem com a view e
modificam a estrutura do DOM
e/ou código HTML
*ngFor
*ngIf
DIRETIVAS DE ATRIBUTOS
Interagem com o elemento em
que foram aplicadas
ng-class
ng-style

43. Condicional If: JavaScript

44. Diretiva *ngIf

45. Loop for: JavaScript

46. Diretiva *ngFor

47. E como os componentes se comunicam?
Componente parente <-> filho?

48. Comunicação parente -> Filho através de @Input()
Usamos a anotação @Input nos atributos que
queremos expor

49. Comunicação parente -> filho através de @Input()

50. Comunicação filho -> parente através de @Output()
Emitimos o evento
"clicked"

51. Com @Output podemos escutar eventos customizados

52. Serviços

53. Passo 1: Criar uma classe com métodos!

54. Passo 1: Criar uma classe com métodos!

55. Injeção de
Dependência

56. Passo 2: Decorar a classe
Importar

57. Passo 3: Importar e registrar como
fornecedor de dados no módulo
Importar

58. Passo 4: Importar e passar o serviço para o construtor da classe
Importar

60. Passo 1: Importar e Injetar na classe (serviço)
Importar

61. Não esquecer de ter o módulo Http importado no módulo
também
Importar o
módulo

62. Só usar os métodos get, post, put e delete!

63. Exemplo CRUD com REST

65. Coisa linda!
fluxos:
.do
.map
.filter
.when
.add
Programação reativa!

66. No componente é só se inscrever no Observador (Observable)

67. Roteamento

68. Passo 1: app.routing.ts

69. Passo 1: app.routing.ts

70. Passo 1: app.routing.ts

71. Passo 1: app.routing.ts

72. Passo 2: importar arquivo no app.module e declarar nos imports
Importar as rotas

73. Passo 3: Adicionar o router-outlet no seu componente principal

74. Passo 4: Adicionar os links de roteamento na aplicação

75. •https://github.com/loiane/curso-angular2
•https://github.com/loiane/angular2-pokedex
•https://github.com/loiane/angular2-crud-rest
•https://github.com/loiane/angular2-crud-auth-routing

76. Quer aprender mais sobre Angular 2?
/loianegroner

77. http://loiane.training
Curso Gratuito!

79. http://loiane.com
facebook.com/loianegroner
twitter.com/loiane
https://github.com/loiane
youtube.com/loianegroner
http://loiane.training