Angular 2

142.475 visualizações

Publicada em

Site: http://loiane.training
Blog: http://loiane.com
Facebook: https://www.facebook.com/loianegroner
Github: https://github.com/loiane
Twitter: https://twitter.com/loiane

Publicada em: Tecnologia
3 comentários
110 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
142.475
No SlideShare
0
A partir de incorporações
0
Número de incorporações
137.824
Ações
Compartilhamentos
0
Downloads
0
Comentários
3
Gostaram
110
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Angular 2

  1. 1. Angular 2 Loiane Groner github.com/loiane loiane.com loiane.training
  2. 2. • 10+ XP TI • Java, JavaScript, Sencha, Phonegap/Ionic • Blog: http://loiane.com • Cursos: http://loiane.training
  3. 3. • Meus livros:
  4. 4. Introdução Angular 201
  5. 5. ▸ Introdução AGENDA
  6. 6. ▸ Introdução ▸ Componentes e Templates AGENDA
  7. 7. ▸ Introdução ▸ Componentes e Templates ▸ Data binding AGENDA
  8. 8. ▸ Introdução ▸ Componentes e Templates ▸ Data binding ▸ Diretivas AGENDA
  9. 9. ▸ Introdução ▸ Componentes e Templates ▸ Data binding ▸ Diretivas ▸ Serviços AGENDA
  10. 10. ▸ Introdução ▸ Componentes e Templates ▸ Data binding ▸ Diretivas ▸ Serviços ▸ Formulários AGENDA
  11. 11. ▸ Introdução ▸ Componentes e Templates ▸ Data binding ▸ Diretivas ▸ Serviços ▸ Formulários ▸ Roteamento AGENDA
  12. 12. ▸ Introdução ▸ Componentes e Templates ▸ Data binding ▸ Diretivas ▸ Serviços ▸ Formulários ▸ Roteamento ▸ Integração com servidor AGENDA
  13. 13. ▸ Introdução ▸ Componentes e Templates ▸ Data binding ▸ Diretivas ▸ Serviços ▸ Formulários ▸ Roteamento ▸ Integração com servidor ▸ CRUD Mestre-Detalhe AGENDA
  14. 14. ▸ HTML / CSS/ JavaScript REQUISITOS
  15. 15. ▸ HTML / CSS/ JavaScript ▸ NÃO precisa saber AngularJS 1.x REQUISITOS
  16. 16. ANGULAR 2 ▸ https://angular.io
  17. 17. ANGULAR 2 ▸ https://angular.io ▸ Parceria Google + Microsoft
  18. 18. ANGULAR 2 ▸ https://angular.io ▸ Parceria Google + Microsoft ▸ Open Source (código no Github)
  19. 19. ANGULAR 2 ▸ https://angular.io ▸ Parceria Google + Microsoft ▸ Open Source (código no Github) ▸ Atualmente na versão RC (Release Candidate)
  20. 20. ANGULAR 2 ▸ https://angular.io ▸ Parceria Google + Microsoft ▸ Open Source (código no Github) ▸ Atualmente na versão RC (Release Candidate) ▸ Não é continuação da versão 1
  21. 21. ANGULAR 2 ▸ https://angular.io ▸ Parceria Google + Microsoft ▸ Open Source (código no Github) ▸ Atualmente na versão RC (Release Candidate) ▸ Não é continuação da versão 1 ▸ Foi reescrito
  22. 22. ANGULAR 2 ▸ https://angular.io ▸ Parceria Google + Microsoft ▸ Open Source (código no Github) ▸ Atualmente na versão RC (Release Candidate) ▸ Não é continuação da versão 1 ▸ Foi reescrito ▸ Uso de padrões web e Web Components
  23. 23. BLOCOS PRINCIPAIS COMPONENTES DIRETIVAS ROTEAMENTO SERVIÇOS TEMPLATE DATA BINDING INJEÇÃO DEPENDÊNCIA METADATA
  24. 24. BLOCOS PRINCIPAIS {} Componente Encapsula: •Template •Metadata: processamento das classes •Dado a ser mostrado na tela (Data Binding) •Comportamento da VIEW
  25. 25. COMPONENTE {} Componente Raiz (Root) {} {} {}{} {}
  26. 26. COMPONENTE {} Cabeçalho (Barra de navegação) {} Barra Lateral {} Posts
  27. 27. COMPONENTE {} Cabeçalho (Barra de navegação) {} Barra Lateral {} Post {} Post {} Post {} Post
  28. 28. COMPONENTE {} Cabeçalho (Barra de navegação) {} Barra Lateral {} Post {} Post {} Post Star Widget
  29. 29. COMPONENTE { } Componente Backend
  30. 30. COMPONENTE { } BACKEND Componente Node.JS Java .NET Ruby Python Backend
  31. 31. SERVIÇO { } BACKEND Componente Node.JS Java .NET Ruby Python Serviço (Service) Backend
  32. 32. SERVIÇO { } BACKEND Componente Node.JS Java .NET Ruby Python Serviço (Service) Backend Pode ser injetado em outras classes
  33. 33. ROTEAMENTO Router Responsável pela navegação
  34. 34. DIRETIVA D Diretiva Responsável por modificar elementos DOM e/ou seu comportamento
  35. 35. DIRETIVA <input type=”text” autoGrow> pesquisar…
  36. 36. DIRETIVA <input type=”text” autoGrow> Angular
  37. 37. BLOCOS PRINCIPAIS COMPONENTES DIRETIVAS ROTEAMENTO SERVIÇOS TEMPLATE DATA BINDING INJEÇÃO DEPENDÊNCIA METADATA
  38. 38. BLOCOS PRINCIPAIS
  39. 39. BLOCOS PRINCIPAIS COMPONENTES DIRETIVAS ROTEAMENTO SERVIÇOS TEMPLATE DATA BINDING INJEÇÃO DEPENDÊNCIA METADATA
  40. 40. Ambiente de Desenvolvimento Angular 202
  41. 41. ▸ Node.JS O QUE PRECISAMOS INSTALAR
  42. 42. ▸ Node.JS ▸ NPM O QUE PRECISAMOS INSTALAR
  43. 43. ▸ Node.JS ▸ NPM ▸ TypeScript O QUE PRECISAMOS INSTALAR
  44. 44. NODE.JS https://nodejs.org
  45. 45. TYPESCRIPT https://www.typescriptlang.org/
  46. 46. TYPESCRIPT $ npm install -g typescript
  47. 47. TYPESCRIPT $ npm install -g typescript $ sudo npm install -g typescript SOMENTE MAC OU LINUX
  48. 48. TYPESCRIPT TypeScript ECMAScript 6 ECMAScript 5 Junho 2015 Novembro 2009 meu-script.ts transpiler meu-script.js ES5
  49. 49. ▸ TypeScript LINGUAGEM
  50. 50. ▸ TypeScript ▸ Dart LINGUAGEM
  51. 51. ▸ TypeScript ▸ Dart ▸ ES 6 (ES 2015) LINGUAGEM
  52. 52. ▸ TypeScript ▸ Dart ▸ ES 6 (ES 2015) ▸ ES 5 LINGUAGEM
  53. 53. TYPINGS $ npm install typings --global https://github.com/typings/typings
  54. 54. EDITOR DE TEXTO
  55. 55. EDITOR DE TEXTO JÁ SUPORTA TS JÁ SUPORTA TS HTTPS://ATOM.IO/PACKAGES/ATOM-TYPESCRIPT HTTPS://GITHUB.COM/MICROSOFT/TYPESCRIPT-SUBLIME-PLUGIN
  56. 56. Primeira app Hello, World! Angular 203
  57. 57. ANGULAR CLI $ npm install -g angular-cli https://github.com/angular/angular-cli Requer node >= 4
  58. 58. ANGULAR CLI ng new PROJECT_NAME cd PROJECT_NAME ng serve
  59. 59. ANGULAR SEED - SITE ANGULAR.IO https://angular.io/docs/ts/latest/quickstart.html
  60. 60. SEED QUE VAMOS USAR PARA OS EXEMPLOS $ git clone https://github.com/loiane/angular-2-boilerplate.git
  61. 61. PARA EXECUTAR $ npm install
  62. 62. PARA EXECUTAR $ npm start $ npm install
  63. 63. Entendendo o projeto Hello, World! Angular 204
  64. 64. ESTRUTURA DO PROJETO - NOSSO EXEMPLO
  65. 65. ESTRUTURA DO PROJETO - NOSSO EXEMPLO Código fonte TS + javascript gerado
  66. 66. ESTRUTURA DO PROJETO - NOSSO EXEMPLO Código fonte TS + javascript gerado Arquivos CSS e assets do projeto
  67. 67. ESTRUTURA DO PROJETO - NOSSO EXEMPLO Código fonte TS + javascript gerado Arquivos CSS e assets do projeto Pacotes Node, instalados conforme package.json pacotes npm Angular 2 + dependências + extras
  68. 68. ESTRUTURA DO PROJETO - NOSSO EXEMPLO Código fonte TS + javascript gerado Arquivos CSS e assets do projeto index.html Pacotes Node, instalados conforme package.json pacotes npm Angular 2 + dependências + extras
  69. 69. ESTRUTURA DO PROJETO - NOSSO EXEMPLO Código fonte TS + javascript gerado Arquivos CSS e assets do projeto index.html configurações System.JS (módulos) Pacotes Node, instalados conforme package.json pacotes npm Angular 2 + dependências + extras
  70. 70. ESTRUTURA DO PROJETO - NOSSO EXEMPLO Código fonte TS + javascript gerado Arquivos CSS e assets do projeto index.html Configurações TypeScript configurações System.JS (módulos) Pacotes Node, instalados conforme package.json pacotes npm Angular 2 + dependências + extras
  71. 71. ESTRUTURA DO PROJETO - NOSSO EXEMPLO Código fonte TS + javascript gerado Arquivos CSS e assets do projeto index.html Configurações TypeScript Configurações Typings configurações System.JS (módulos) Pacotes Node, instalados conforme package.json pacotes npm Angular 2 + dependências + extras
  72. 72. INDEX.HTML <title>Angular 2 QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap --> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> <!-- CSS --> <link rel="stylesheet" href="assets/css/app.css"> <!-- 1. Load libraries --> <!-- Polyfill(s) for older browsers --> <script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script>
  73. 73. INDEX.HTML <!-- 2. Configure SystemJS --> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script>
  74. 74. INDEX.HTML <!-- 3. Renderizando a aplicação --> <body> <my-app>Loading...</my-app> </body>
  75. 75. INDEX.HTML <!-- 2. Renderizando a aplicação --> <body> <my-app>Loading...</my-app> </body> Usamos a tag no HTML para indicar qual componente será renderizado
  76. 76. APP.COMPONENT.TS import {Component} from ‘@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { }
  77. 77. APP.COMPONENT.TS import {Component} from ‘@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { } Classe TypeScript
  78. 78. APP.COMPONENT.TS import {Component} from ‘@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { } Classe TypeScript exporta classe para que outras classes possam importá-la
  79. 79. APP.COMPONENT.TS import {Component} from ‘@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { } Decorator que informa que essa classe é um Componente
  80. 80. APP.COMPONENT.TS import {Component} from ‘@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { } E para usar esse decorator precisamos importar a classe Component do pacote do Angular
  81. 81. APP.COMPONENT.TS import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { } Metadata: Nome da tag que será criada
  82. 82. APP.COMPONENT.TS import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { } Metadata: Nome da tag (diretiva) que será criada Metadata: template HTML
  83. 83. MAIN.TS import {bootstrap} from '@angular/platform-browser-dynamic' import {AppComponent} from './app.component' bootstrap(AppComponent);
  84. 84. MAIN.TS import {bootstrap} from '@angular/platform-browser-dynamic' import {AppComponent} from './app.component' bootstrap(AppComponent); inicializa a app instanciando o AppComponent
  85. 85. MAIN.TS import {bootstrap} from '@angular/platform-browser-dynamic' import {AppComponent} from './app.component' bootstrap(AppComponent); inicializa a app instanciando o AppComponent Como exportamos a classe, podemos importar aqui
  86. 86. MAIN.TS import {bootstrap} from '@angular/platform-browser-dynamic' import {AppComponent} from './app.component' bootstrap(AppComponent); inicializa a app instanciando o AppComponent Como exportamos a classe, podemos importar aqui não precisa do .ts
  87. 87. DEPENDÊNCIAS - SYSTEMJS.CONFIG // map tells the System loader where to look for things var map = { 'app': 'app', // 'dist', 'rxjs': 'node_modules/rxjs', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', '@angular': 'node_modules/@angular' }; // packages tells the System loader how to load when no filename and/or no extension var packages = { 'app': { main: 'main.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { defaultExtension: 'js' } };
  88. 88. DEPENDÊNCIAS - SYSTEMJS.CONFIG // map tells the System loader where to look for things var map = { 'app': 'app', // 'dist', 'rxjs': 'node_modules/rxjs', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', '@angular': 'node_modules/@angular' }; // packages tells the System loader how to load when no filename and/or no extension var packages = { 'app': { main: 'main.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { defaultExtension: 'js' } }; Os arquivos .js compilados do TypeScript que estão no diretório app que serão executados no browser
  89. 89. DEPENDÊNCIAS - SYSTEMJS.CONFIG // map tells the System loader where to look for things var map = { 'app': 'app', // 'dist', 'rxjs': 'node_modules/rxjs', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', '@angular': 'node_modules/@angular' }; // packages tells the System loader how to load when no filename and/or no extension var packages = { 'app': { main: 'main.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { defaultExtension: 'js' } }; Os arquivos .js compilados do TypeScript que estão no diretório app que serão executados no browser app/main.js é responsável por inicializar a app
  90. 90. DEPENDÊNCIAS - SYSTEMJS.CONFIG var packageNames = [ '@angular/common', '@angular/compiler', '@angular/core', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router-deprecated', '@angular/testing', '@angular/upgrade', ]; // add package entries for angular packages in the form '@angular/common' ackageNames.forEach(function(pkgName) { packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; }); var config = { map: map, packages: packages }; // filterSystemConfig - index.html's chance to modify config before we register it. if (global.filterSystemConfig) { global.filterSystemConfig(config); } System.config(config);
  91. 91. DEPENDÊNCIAS - SYSTEMJS.CONFIG var packageNames = [ '@angular/common', '@angular/compiler', '@angular/core', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router-deprecated', '@angular/testing', '@angular/upgrade', ]; // add package entries for angular packages in the form '@angular/common' ackageNames.forEach(function(pkgName) { packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; }); var config = { map: map, packages: packages }; // filterSystemConfig - index.html's chance to modify config before we register it. if (global.filterSystemConfig) { global.filterSystemConfig(config); } System.config(config); Carrega os arquivos do Angular 2
  92. 92. Ainda não existe um padrão, pode usar qualquer um: SISTEMA DE MÓDULOS
  93. 93. Ainda não existe um padrão, pode usar qualquer um: ▸ System.JS SISTEMA DE MÓDULOS
  94. 94. Ainda não existe um padrão, pode usar qualquer um: ▸ System.JS ▸ Webpack SISTEMA DE MÓDULOS
  95. 95. Ainda não existe um padrão, pode usar qualquer um: ▸ System.JS ▸ Webpack ▸ Browserify SISTEMA DE MÓDULOS
  96. 96. Ainda não existe um padrão, pode usar qualquer um: ▸ System.JS ▸ Webpack ▸ Browserify ▸ JSPM SISTEMA DE MÓDULOS
  97. 97. PARA EXECUTAR $ npm install
  98. 98. PARA EXECUTAR $ npm start $ npm install
  99. 99. Criando um Componente Angular 205
  100. 100. MEU-PRIMEIRO.COMPONENT.TS Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
  101. 101. MEU-PRIMEIRO.COMPONENT.TS Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts meu-primeiro.component.ts Palavras separadas por “-“ Ponto “component" -> para indicar que é um componente Ponto ts -> extensão typescript
  102. 102. MEU-PRIMEIRO.COMPONENT.TS export class MeuPrimeiroComponent {} Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
  103. 103. MEU-PRIMEIRO.COMPONENT.TS export class MeuPrimeiroComponent {} Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts meu-primeiro.component.ts
  104. 104. MEU-PRIMEIRO.COMPONENT.TS import {Component} from ‘@angular/core'; export class MeuPrimeiroComponent {} Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
  105. 105. MEU-PRIMEIRO.COMPONENT.TS import {Component} from ‘@angular/core'; @Component({ }) export class MeuPrimeiroComponent {} Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
  106. 106. MEU-PRIMEIRO.COMPONENT.TS import {Component} from ‘@angular/core'; @Component({ selector: 'meu-primeiro-component', }) export class MeuPrimeiroComponent {} Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
  107. 107. MEU-PRIMEIRO.COMPONENT.TS import {Component} from ‘@angular/core'; @Component({ selector: 'meu-primeiro-component', }) export class MeuPrimeiroComponent {} Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts nome da DIV a ser criada
  108. 108. MEU-PRIMEIRO.COMPONENT.TS import {Component} from ‘@angular/core'; @Component({ selector: 'meu-primeiro-component', template: '<h2>Meu primeiro componente Angular 2!</h2>' }) export class MeuPrimeiroComponent {} Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
  109. 109. APP.COMPONENT.TS - USANDO O COMPONENTE import {Component} from ‘@angular/core'; @Component({ selector: 'my-app', template: ` <h1>Angular 2 Boilerplate</h1> <p>Hello World!</p> <meu-primeiro-component></meu-primeiro-component> ` }) export class AppComponent { }
  110. 110. APP.COMPONENT.TS - USANDO O COMPONENTE
  111. 111. APP.COMPONENT.TS - USANDO O COMPONENTE Cadê o componente????
  112. 112. APP.COMPONENT.TS - USANDO O COMPONENTE import {Component} from ‘@angular/core'; @Component({ selector: 'my-app', template: ` <h1>Angular 2 Boilerplate</h1> <p>Hello World!</p> <meu-primeiro-component></meu-primeiro-component> `, directives: [MeuPrimeiroComponent] }) export class AppComponent { }
  113. 113. APP.COMPONENT.TS - USANDO O COMPONENTE
  114. 114. TEXT AO CRIAR UM COMPONENTE NO ANGULAR - CIDAR DICA ▸ Class (Criar a classe) ▸ Import ▸ Decorate (Decorar a classe) ▸ Alterar ▸ Repetir
  115. 115. Templates Angular 206
  116. 116. TEMPLATES - USANDO INTERPOLATION import {Component} from ‘@angular/core'; @Component({ selector: ‘cursos', template: ` <p>Olá, meu nome é {{ nome }}<p> ` }) export class CursosComponent { nome = 'Loiane'; }
  117. 117. TEMPLATES - USANDO INTERPOLATION import {Component} from ‘@angular/core'; @Component({ selector: ‘cursos', template: ` <p>Olá, meu nome é {{ nome }}<p> ` }) export class CursosComponent { nome = 'Loiane'; } Interpolation
  118. 118. TEMPLATES - USANDO INTERPOLATION import {Component} from ‘@angular/core'; @Component({ selector: ‘cursos', template: ` <p>Olá, meu nome é {{ nome }}<p> ` }) export class CursosComponent { nome = 'Loiane'; } Interpolation
  119. 119. TEMPLATES - USANDO INTERPOLATION
  120. 120. TEMPLATES - DIRETIVAS import {Component} from '@angular/core'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos = ['Java', 'Angular 2', 'Estrutura de Dados']; }
  121. 121. TEMPLATES - DIRETIVAS import {Component} from '@angular/core'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos = ['Java', 'Angular 2', 'Estrutura de Dados']; }
  122. 122. TEMPLATES - DIRETIVAS import {Component} from '@angular/core'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos = ['Java', 'Angular 2', 'Estrutura de Dados']; } Diretiva ngFor Itera uma coleção/array
  123. 123. TEMPLATES - DIRETIVAS import {Component} from '@angular/core'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos = ['Java', 'Angular 2', 'Estrutura de Dados']; } Diretiva ngFor Itera uma coleção/array Variável local curso criada
  124. 124. TEMPLATES - DIRETIVAS import {Component} from '@angular/core'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos = ['Java', 'Angular 2', 'Estrutura de Dados']; } Diretiva ngFor Itera uma coleção/array Variável local curso criada Interpolation da variável local curso
  125. 125. TEMPLATES - DIRETIVAS
  126. 126. TEMPLATES - DIRETIVAS @Component({ selector: 'cursos-list', /*template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> `,*/ templateUrl: 'cursos.component.html', providers: [CursosService] }) export class CursosComponent { }
  127. 127. TEMPLATES EM ARQUIVO SEPARADO Guia Angular 2 https://angular.io/styleguide
  128. 128. Serviços (Services) e Injeção de dependência (DI) Angular 207
  129. 129. SEPARANDO A LÓGICA DE NEGÓCIO DA VIEW import {Component} from '@angular/core'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos = ['Java', 'Angular 2', 'Estrutura de Dados']; }
  130. 130. SEPARANDO A LÓGICA DE NEGÓCIO DA VIEW import {Component} from '@angular/core'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos = ['Java', 'Angular 2', 'Estrutura de Dados']; } Suponha que vamos obter esses valores de um servidor. Melhor prática seria separar a lógica de negócio da VIEW
  131. 131. ARQUITETURA { } BACKEND Componente Node.JS Java .NET Ruby Python Serviço (Service) Backend
  132. 132. CRIANDO UM SERVIÇO (SERVICE) import { Injectable } from '@angular/core'; @Injectable() export class CursosService { getCursos() : string[] { return ['Java', 'Angular 2', 'Estrutura de Dados']; } } Crie um arquivo dentro de app/cursos chamado cursos.service.ts Repare na convenção de nomes
  133. 133. CRIANDO UM SERVIÇO (SERVICE) import { Injectable } from '@angular/core'; @Injectable() export class CursosService { getCursos() : string[] { return ['Java', 'Angular 2', 'Estrutura de Dados']; } } Crie um arquivo dentro de app/cursos chamado cursos.service.ts Repare na convenção de nomes
  134. 134. USANDO INJEÇÃO DE DEPENDÊNCIA import {Component} from '@angular/core'; import {CursosService} from './cursos.service'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos; constructor(cursosService: CursosService){ this.cursos = cursosService.getCursos(); } }
  135. 135. USANDO INJEÇÃO DE DEPENDÊNCIA import {Component} from '@angular/core'; import {CursosService} from './cursos.service'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos; constructor(cursosService: CursosService){ this.cursos = cursosService.getCursos(); } } import do serviço
  136. 136. USANDO INJEÇÃO DE DEPENDÊNCIA import {Component} from '@angular/core'; import {CursosService} from './cursos.service'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos; constructor(cursosService: CursosService){ this.cursos = cursosService.getCursos(); } } import do serviço atributo local a ser populado
  137. 137. USANDO INJEÇÃO DE DEPENDÊNCIA import {Component} from '@angular/core'; import {CursosService} from './cursos.service'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos; constructor(cursosService: CursosService){ this.cursos = cursosService.getCursos(); } } import do serviço atributo local a ser populado Injeção de Dependência
  138. 138. USANDO INJEÇÃO DE DEPENDÊNCIA import {Component} from '@angular/core'; import {CursosService} from './cursos.service'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos; constructor(cursosService: CursosService){ this.cursos = cursosService.getCursos(); } } import do serviço atributo local a ser populado Injeção de Dependência Chamada do método do serviço
  139. 139. INJEÇÃO DE DEPENDÊNCIA Oops!
  140. 140. INJEÇÃO DE DEPENDÊNCIA Oops!
  141. 141. USANDO INJEÇÃO DE DEPENDÊNCIA import {Component} from '@angular/core'; import {CursosService} from './cursos.service'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> `, providers: [CursosService] }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos; constructor(cursosService: CursosService){ this.cursos = cursosService.getCursos(); } }
  142. 142. USANDO INJEÇÃO DE DEPENDÊNCIA import {Component} from '@angular/core'; import {CursosService} from './cursos.service'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> `, providers: [CursosService] }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos; constructor(cursosService: CursosService){ this.cursos = cursosService.getCursos(); } } Precisamos informar ao Angular que queremos que injete a classe CursosService nesse componente
  143. 143. USANDO INJEÇÃO DE DEPENDÊNCIA import {Component} from '@angular/core'; import {CursosService} from './cursos.service'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> `, providers: [CursosService] }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos; constructor(cursosService: CursosService){ this.cursos = cursosService.getCursos(); } } Precisamos informar ao Angular que queremos que injete a classe CursosService nesse componente O provider cria/provém (fornece) uma instância da classe
  144. 144. INJEÇÃO DE DEPENDÊNCIA
  145. 145. Dica Produtividade: Code Snippets Angular 208
  146. 146. TEXT SNIPPETS PARA CRIAÇÃO DO ESQUELETO DA CLASSE ANGULAR2 DICA ▸ VS Code: https://github.com/johnpapa/vscode-angular2- snippets ▸ Atom: https://atom.io/packages/angular-2-typeScript- snippets
  147. 147. Property Binding (Binding de propriedades) + Interpolation Angular 209
  148. 148. DATA BINDING <TEMPLATE> {COMPONENT}
  149. 149. DATA BINDING <TEMPLATE> {COMPONENT} {{ valor }}
  150. 150. DATA BINDING <TEMPLATE> {COMPONENT} {{ valor }} [propriedade]="valor"
  151. 151. DATA BINDING <TEMPLATE> {COMPONENT} {{ valor }} [propriedade]="valor" (evento)="handler"
  152. 152. DATA BINDING <TEMPLATE> {COMPONENT} {{ valor }} [propriedade]="valor" (evento)="handler" [(ngModel)]="propriedade"
  153. 153. INTERPOLATION
  154. 154. INTERPOLATION
  155. 155. INTERPOLATION
  156. 156. ▸ Valor do Component para o Template INTERPOLATION
  157. 157. ▸ Valor do Component para o Template ▸ É uma forma de property binding INTERPOLATION
  158. 158. ▸ Valor do Component para o Template ▸ É uma forma de property binding ▸ <h3>{{ url }}</h3> INTERPOLATION
  159. 159. ▸ Valor do Component para o Template ▸ É uma forma de property binding ▸ <h3>{{ url }}</h3> ▸ Permite uso de algumas expressões, como: INTERPOLATION
  160. 160. ▸ Valor do Component para o Template ▸ É uma forma de property binding ▸ <h3>{{ url }}</h3> ▸ Permite uso de algumas expressões, como: ▸ {{ 1 + 1}} INTERPOLATION
  161. 161. ▸ Valor do Component para o Template ▸ É uma forma de property binding ▸ <h3>{{ url }}</h3> ▸ Permite uso de algumas expressões, como: ▸ {{ 1 + 1}} ▸ {{ getValor() }} INTERPOLATION
  162. 162. ▸ Valor do Component para o Template ▸ É uma forma de property binding ▸ <h3>{{ url }}</h3> ▸ Permite uso de algumas expressões, como: ▸ {{ 1 + 1}} ▸ {{ getValor() }} ▸ {{ minhaVar && minhaVar2 }} INTERPOLATION
  163. 163. INTERPOLATION <h3 [textContent]="url"></h3> <h3>{{ url }}</h3> ==
  164. 164. ▸ Valor do Component para o Template PROPERTY BINDING
  165. 165. ▸ Valor do Component para o Template ▸ Usa-se colchetes <img [src]="urlImg"/> PROPERTY BINDING
  166. 166. ▸ Valor do Component para o Template ▸ Usa-se colchetes <img [src]="urlImg"/> ▸ Formato padrão é através de bind- nomePropriedade <img bind-src="urlImg"/> PROPERTY BINDING
  167. 167. ▸ Valor do Component para o Template ▸ Usa-se colchetes <img [src]="urlImg"/> ▸ Formato padrão é através de bind- nomePropriedade <img bind-src="urlImg"/> ▸ Quando não existe uma propriedade no elemento, usa-se [attr.colspan] PROPERTY BINDING
  168. 168. PROPERTY BINDING
  169. 169. PROPERTY BINDING Todas as imagens tem o mesmo resultado
  170. 170. Class e Style Binding (Binding de classes e estilos) Angular 210
  171. 171. CLASS E STYLE BINDING - EXEMPLO 01
  172. 172. CLASS E STYLE BINDING - EXEMPLO 01 Variável local chamada class
  173. 173. CLASS E STYLE BINDING - EXEMPLO 01 Variável local chamada class Property binding
  174. 174. CLASS E STYLE BINDING - EXEMPLO 02
  175. 175. CLASS E STYLE BINDING - EXEMPLO 02
  176. 176. CLASS E STYLE BINDING - EXEMPLO 02 Só recebe a class caso a expressão seja verdadeira
  177. 177. CLASS E STYLE BINDING - EXEMPLO 03
  178. 178. CLASS E STYLE BINDING - EXEMPLO 03 Mostra o estilo ou não?
  179. 179. CLASS E STYLE BINDING - EXEMPLO 03 Mostra o estilo ou não? Expressão com o valor da variável
  180. 180. Event Binding (Binding de eventos) Angular 211
  181. 181. DATA BINDING <TEMPLATE> {COMPONENT} {{ valor }} [propriedade]="valor" (evento)="handler"
  182. 182. ▸ Valor do Template para o Componente EVENT BINDING
  183. 183. ▸ Valor do Template para o Componente ▸ Usa-se parênteses <button (click)=“onClick()”/> EVENT BINDING
  184. 184. ▸ Valor do Template para o Componente ▸ Usa-se parênteses <button (click)=“onClick()”/> ▸ Método “handler" declarado no Componente EVENT BINDING
  185. 185. ▸ Valor do Template para o Componente ▸ Usa-se parênteses <button (click)=“onClick()”/> ▸ Método “handler" declarado no Componente ▸ Forma canônica <button on-click=“onClick()”/> EVENT BINDING
  186. 186. EVENT BINDING - EXEMPLO 01
  187. 187. EVENT BINDING - EXEMPLO 01 Evento a ser "escutado"
  188. 188. EVENT BINDING - EXEMPLO 01 Evento a ser "escutado" Método/Função a ser executada
  189. 189. EVENT BINDING - EXEMPLO 01 Evento a ser "escutado" Método/Função a ser executada
  190. 190. EVENT BINDING - EXEMPLO 01 Evento a ser "escutado" Método/Função a ser executada
  191. 191. EVENT BINDING - EXEMPLO 02
  192. 192. EVENT BINDING - EXEMPLO 02 $event é do tipo evento DOM
  193. 193. EVENT BINDING - EXEMPLO 02 $event é do tipo evento DOM acesso a variável local declarada acesso a variável local declarada
  194. 194. EVENT BINDING - EXEMPLO 02
  195. 195. EVENT BINDING - EXEMPLO 02 $event tem propriedades como event.target e event.target.value
  196. 196. EVENT BINDING - EXEMPLO 03
  197. 197. EVENT BINDING - EXEMPLO 03
  198. 198. EVENT BINDING - EXEMPLO 03 Plugin ATOM para mostrar cor: https://atom.io/packages/pigments
  199. 199. DICA: USANDO CSS NO COMPONENTE
  200. 200. DICA: USANDO CSS NO COMPONENTE Note a convenção de nomenclatura
  201. 201. TEXT QUAIS EVENTOS POSSO USAR? DICA ▸ Lista com todos os eventos ▸ https://developer.mozilla.org/en-US/docs/Web/Events
  202. 202. Two-way data binding Angular 212
  203. 203. DATA BINDING <TEMPLATE> {COMPONENT} {{ valor }} [propriedade]="valor" (evento)="handler"
  204. 204. DATA BINDING <TEMPLATE> {COMPONENT} {{ valor }} [propriedade]="valor" (evento)="handler" [(ngModel)]="propriedade"
  205. 205. ▸ Valor do Template para o Componente e vice-versa TWO-WAY DATA BINDING
  206. 206. ▸ Valor do Template para o Componente e vice-versa ▸ Usa-se binding de eventos + propriedades TWO-WAY DATA BINDING
  207. 207. TWO-WAY DATA BINDING Como manter o template e o componente atualizados?
  208. 208. TWO-WAY DATA BINDING Como manter o template e o componente atualizados?
  209. 209. TWO-WAY DATA BINDING Como manter o template e o componente atualizados?
  210. 210. TWO-WAY DATA BINDING Como manter o template e o componente atualizados?
  211. 211. TWO-WAY DATA BINDING Property binding + event binding Como manter o template e o componente atualizados?
  212. 212. TWO-WAY DATA BINDING COM NGMODEL Aplicando o ngModel
  213. 213. ▸ Valor do Template para o Componente e vice-versa ▸ Usa-se binding de eventos + propriedades ▸ Forma mais simples é fazer o binding no ngModel TWO-WAY DATA BINDING
  214. 214. ▸ Valor do Template para o Componente e vice-versa ▸ Usa-se binding de eventos + propriedades ▸ Forma mais simples é fazer o binding no ngModel ▸ Usa-se sintaxe de binding de eventos + propriedade: TWO-WAY DATA BINDING
  215. 215. ▸ Valor do Template para o Componente e vice-versa ▸ Usa-se binding de eventos + propriedades ▸ Forma mais simples é fazer o binding no ngModel ▸ Usa-se sintaxe de binding de eventos + propriedade: ▸ <input type="text" [(ngModel)]="nome" /> TWO-WAY DATA BINDING
  216. 216. ▸ Valor do Template para o Componente e vice-versa ▸ Usa-se binding de eventos + propriedades ▸ Forma mais simples é fazer o binding no ngModel ▸ Usa-se sintaxe de binding de eventos + propriedade: ▸ <input type="text" [(ngModel)]="nome" /> ▸ Forma canônica é TWO-WAY DATA BINDING
  217. 217. ▸ Valor do Template para o Componente e vice-versa ▸ Usa-se binding de eventos + propriedades ▸ Forma mais simples é fazer o binding no ngModel ▸ Usa-se sintaxe de binding de eventos + propriedade: ▸ <input type="text" [(ngModel)]="nome" /> ▸ Forma canônica é ▸ <input type="text" bindon-ngModel="nome" /> TWO-WAY DATA BINDING
  218. 218. TWO-WAY DATA BINDING
  219. 219. TWO-WAY DATA BINDING
  220. 220. TWO-WAY DATA BINDING Two-way data binding com NgModel
  221. 221. TWO-WAY DATA BINDING Two-way data binding com NgModel Forma canônica
  222. 222. SINTAXE BANANA IN A BOX SINTAXE “BANANA NA CAIXA" [()]
  223. 223. TWO-WAY DATA BINDING
  224. 224. TWO-WAY DATA BINDING Two-way data binding com objetos
  225. 225. Reusando Componentes Input properties Angular 213
  226. 226. CRIANDO COMPONENTES REUTILIZÁVEIS
  227. 227. CRIANDO COMPONENTES REUTILIZÁVEIS Objetivo: criar um componente onde podemos criar propriedades customizadas para que outros componentes possam usar o mesmo
  228. 228. CRIANDO COMPONENTES REUTILIZÁVEIS 1 - Criamos o componente normalmente
  229. 229. INPUT PROPERTIES
  230. 230. INPUT PROPERTIES 2 - Usamos a anotação @Input nos atributos que queremos expor
  231. 231. INPUT PROPERTIES
  232. 232. INPUT PROPERTIES 3 - Caso queira expor o atributo/propriedade com nome diferente, podemos passar como parâmetro para o @input
  233. 233. INPUT PROPERTIES 4 - Caso não queria usar o @Input(), pode declarar como meta-dado no @Component também
  234. 234. QUAL USAR? METADADO OU ANOTAÇÃO? Gosto pessoal. Porém, o @Input é mais notável Gosto pessoal. Porém, o @Input é mais notável visualmente!
  235. 235. Reusando Componentes Output properties Angular 214
  236. 236. CRIANDO COMPONENTES REUTILIZÁVEIS
  237. 237. CRIANDO COMPONENTES REUTILIZÁVEIS Componente customizado. Objetivo: disparar um evento “mudou” toda vez que o usuário clicar nos botões de + ou -. Evento recebe novo valor do input.
  238. 238. CRIANDO COMPONENTES REUTILIZÁVEIS
  239. 239. CRIANDO COMPONENTES REUTILIZÁVEIS Objetivo: poder escutar eventos customizados, ou seja, criados por nós
  240. 240. CRIANDO COMPONENTES REUTILIZÁVEIS 1 - Criamos o componente normalmente
  241. 241. CRIANDO COMPONENTES REUTILIZÁVEIS 1 - Criamos o componente normalmente
  242. 242. CRIANDO COMPONENTES REUTILIZÁVEIS 2 - Criamos um atributo do tipo EventEmitter (que irá emitir o evento “mudou”. Anotamos com o @Output para mostrar que o atributo será exposto como valor de saída do Component
  243. 243. CRIANDO COMPONENTES REUTILIZÁVEIS 3 - Emitimos o evento com o valor que desejamos expor
  244. 244. CRIANDO COMPONENTES REUTILIZÁVEIS 4 - Também podemos expor o evento com um nome diferente do que utilizado internamente.
  245. 245. CRIANDO COMPONENTES REUTILIZÁVEIS 5 - O Output também pode ser usado em forma de metadado
  246. 246. Ciclo de vida do Componente Angular 215
  247. 247. LIFE CYCLE HOOKS # EVENTO (HOOKS) QUANDO? ngOnChanges1 antes #2 e quando valor property-binding é atualizado
  248. 248. LIFE CYCLE HOOKS # EVENTO (HOOKS) QUANDO? ngOnChanges1 antes #2 e quando valor property-binding é atualizado ngOnInit2 quando Component é inicializado
  249. 249. LIFE CYCLE HOOKS # EVENTO (HOOKS) QUANDO? ngOnChanges1 antes #2 e quando valor property-binding é atualizado ngOnInit2 quando Component é inicializado ngDoCheck3 a cada ciclo de verificação de mudanças
  250. 250. LIFE CYCLE HOOKS # EVENTO (HOOKS) QUANDO? ngOnChanges1 antes #2 e quando valor property-binding é atualizado ngOnInit2 quando Component é inicializado ngDoCheck3 a cada ciclo de verificação de mudanças ngAfterContentInit4 depois de inserir conteúdo externo na view
  251. 251. LIFE CYCLE HOOKS # EVENTO (HOOKS) QUANDO? ngOnChanges1 antes #2 e quando valor property-binding é atualizado ngOnInit2 quando Component é inicializado ngDoCheck3 a cada ciclo de verificação de mudanças ngAfterContentInit4 depois de inserir conteúdo externo na view ngAfterContentChecked5 a cada verificação de conteúdo inserido
  252. 252. LIFE CYCLE HOOKS # EVENTO (HOOKS) QUANDO? ngOnChanges1 antes #2 e quando valor property-binding é atualizado ngOnInit2 quando Component é inicializado ngDoCheck3 a cada ciclo de verificação de mudanças ngAfterContentInit4 depois de inserir conteúdo externo na view ngAfterContentChecked5 a cada verificação de conteúdo inserido ngAfterViewChecked6 a cada verificação de conteúdo / conteúdo filho
  253. 253. LIFE CYCLE HOOKS # EVENTO (HOOKS) QUANDO? ngOnChanges1 antes #2 e quando valor property-binding é atualizado ngOnInit2 quando Component é inicializado ngDoCheck3 a cada ciclo de verificação de mudanças ngAfterContentInit4 depois de inserir conteúdo externo na view ngAfterContentChecked5 a cada verificação de conteúdo inserido ngAfterViewChecked6 a cada verificação de conteúdo / conteúdo filho ngOnDestroy7 antes da diretiva/component ser destruído
  254. 254. LIFE CYCLE HOOKS
  255. 255. LIFE CYCLE HOOKS Note o nome da interface e o nome do método a ser implementado: ng + NomeInterface
  256. 256. Acesso de variáveis locais do Template com ViewChild Angular 216
  257. 257. VIEW CHILD
  258. 258. Mudanças Angular RC 5 ngModule Angular 2xx
  259. 259. TEXT O QUE MUDOU NO RC5? ▸ Introdução do conceito de ngModule ▸ Breaking change a partir do RC 6 / Release ▸ Forma de organizar a aplicação em módulos ▸ Toda a app precisa de um módulo raiz (root) ▸ É possível também criar módulos de features
  260. 260. TEXT COMO ATUALIZAR O PROJETO PARA O RC 5? ▸ 1 - Atualizar a dependencies conforme https://github.com/ angular/quickstart/blob/master/package.json ▸ 2 - Substituir o app.component.spec.ts (https:// github.com/angular/quickstart/blob/master/app/ app.component.spec.ts) ▸ 3 - Substituir o main.ts (https://github.com/angular/ quickstart/blob/master/app/main.ts) ▸ 4 - Criar arquivo app.module.ts (https://github.com/ angular/quickstart/blob/master/app/app.module.ts) ▸ 5 - Refatorar!
  261. 261. TEXT COMO ATUALIZAR O PROJETO PARA O RC 5? > npm outdated > npm update
  262. 262. TEXT COMO ATUALIZAR O PROJETO PARA O RC 5? > npm install -g npm-check-updates > npm-check-updates -u > npm update
  263. 263. TEXT COMO ATUALIZAR O PROJETO PARA O RC 5? > npm install -g npm-check-updates > npm-check-updates -u > npm update atualiza o package.json também
  264. 264. APP.MODULE.TS (NOVO ARQUIV0)
  265. 265. APP.MODULE.TS (NOVO ARQUIV0) Import do decorator e módulo obrigatório para a app
  266. 266. APP.MODULE.TS (NOVO ARQUIV0) Import do decorator e módulo obrigatório para a app Import do componente principal
  267. 267. APP.MODULE.TS (NOVO ARQUIV0) Import do decorator e módulo obrigatório para a app Import do componente principal Import das classes
  268. 268. APP.MODULE.TS (NOVO ARQUIV0)
  269. 269. APP.MODULE.TS (NOVO ARQUIV0) imports: módulos a serem importados
  270. 270. APP.MODULE.TS (NOVO ARQUIV0) imports: módulos a serem importados declarations: directives
  271. 271. APP.MODULE.TS (NOVO ARQUIV0) imports: módulos a serem importados declarations: directives providers (serviços)
  272. 272. APP.MODULE.TS (NOVO ARQUIV0) imports: módulos a serem importados declarations: directives providers (serviços) Componente principal da app
  273. 273. MUDOU O CONTEÚDO DO MAIN.TS
  274. 274. MUDOU O CONTEÚDO DO MAIN.TS não faz mais boot pela classe, e sim módulo principal
  275. 275. NOS COMPONENTES
  276. 276. NOS COMPONENTES não precisa mais do import e nem do meta-dado directives pra usar a tag cursos não precisa mais do import e nem do meta-dado directives pra usar a tag cursos
  277. 277. É POSSÍVEL CRIAR MÓDULO DE FEATURE
  278. 278. É POSSÍVEL CRIAR MÓDULO DE FEATURE usa-se o CommonModule e não BrowserModule
  279. 279. É POSSÍVEL CRIAR MÓDULO DE FEATURE usa-se o CommonModule e não BrowserModule classes a serem expostas em outros módulos
  280. 280. É POSSÍVEL CRIAR MÓDULO DE FEATURE
  281. 281. É POSSÍVEL CRIAR MÓDULO DE FEATURE precisa importar pois está sendo usada/declarada no construtor precisa importar pois está sendo usada/declarada no construtor
  282. 282. É POSSÍVEL CRIAR MÓDULO DE FEATURE precisa importar pois está sendo usada/declarada no construtor precisa importar pois está sendo usada/declarada no construtor não precisa mais do meta- dado provider
  283. 283. REFATORANDO
  284. 284. REFATORANDO podemos importar o módulo cursos e usá-lo!
  285. 285. PROJETO DATA-BINDING
  286. 286. PROJETO DATA-BINDING two-way data-binding ([ngModel]) precisa do import
  287. 287. Angular CLI: Instalação e criação de projetos: ng new, ng init e ng serve Angular 217
  288. 288. ANGULAR CLI $ npm install -g angular-cli https://github.com/angular/angular-cli Requer node >= 4
  289. 289. ANGULAR CLI: CRIANDO PROJETO > ng new NomeProjeto > cd NomeProjeto > ng serve
  290. 290. ANGULAR CLI: CRIANDO PROJETO > ng new NomeProjeto > cd NomeProjeto > ng serve Cria um projeto angular 2 e executa npm install
  291. 291. ANGULAR CLI: CRIANDO PROJETO > ng new NomeProjeto > cd NomeProjeto > ng serve Cria um projeto angular 2 e executa npm install “serve" o projeto ao browser. Similar ao npm start que estávamos executando
  292. 292. ANGULAR CLI: CRIANDO PROJETO EM DIRETORIO EXISTENTE > mkdir NomeProjeto > cd NomeProjeto > ng init > ng serve
  293. 293. ANGULAR CLI: CRIANDO PROJETO EM DIRETORIO EXISTENTE > mkdir NomeProjeto > cd NomeProjeto > ng init > ng serve Cria um diretório
  294. 294. ANGULAR CLI: CRIANDO PROJETO EM DIRETORIO EXISTENTE > mkdir NomeProjeto > cd NomeProjeto > ng init > ng serve Cria um diretório Cria um projeto angular 2 no diretório existente
  295. 295. Angular CLI: Criando components, services: ng generate Angular 218
  296. 296. ANGULAR CLI: CRIANDO COMPONENTS > cd NomeProjeto > ng generate component meu-primeiro > ng g component meu-primeiro
  297. 297. ANGULAR CLI: CRIANDO COMPONENTS > cd NomeProjeto > ng generate component meu-primeiro > ng g component meu-primeiro
  298. 298. ANGULAR CLI: CRIANDO COMPONENTS
  299. 299. ANGULAR CLI: CRIANDO SERVIÇOS > cd NomeProjeto > ng generate service meu-primeiro/ meu-primeiro
  300. 300. ANGULAR CLI: CRIANDO SERVIÇOS > cd NomeProjeto > ng generate service meu-primeiro/ meu-primeiro Cria um serviço no módulo meu-primeiro
  301. 301. ANGULAR CLI: CRIANDO SERVIÇOS
  302. 302. ANGULAR CLI: CRIANDO SERVIÇOS Cria um serviço no módulo meu-primeiro Arquivo spec.ts é para testes unitários
  303. 303. TEXT ANGULAR 2 STYLE GUIDE
  304. 304. TEXT ANGULAR 2 STYLE GUIDE
  305. 305. TEXT ANGULAR 2 STYLE GUIDE
  306. 306. TEXT ANGULAR 2 STYLE GUIDE Arquivos são gerados usando o padrão de nomenclatura e boas práticas segundo o style guide
  307. 307. ANGULAR CLI: CRIANDO ARQUIVOS Tipo Arquivo Comando Component ng g component meu-component Service ng g service meu-servico Directive ng g directive minha-diretiva Pipe ng g pipe meu-pipe Class ng g class minha-classe Interface ng g interface minha-interface Enum ng g enum meu-enum
  308. 308. Atualizando o angular-cli para RC5 e webpack Angular 2xx
  309. 309. ANGULAR CLI: UPDATE RC5 ▸ Situação atual (agosto/2016): ▸ upgrade do build para o webpack (estava usando o broccoli) ▸ Versão ainda em beta (1.0.0-beta.11-webpack.2) ▸ é a versão que usa RC5 ▸ Atualize o Node e o NPM ▸ Node 6 ▸ NPM 3
  310. 310. ANGULAR CLI: UPDATE RC5 > npm uninstall -g angular-cli > npm cache clean > npm install -g angular-cli@webpack
  311. 311. ANGULAR CLI: UPDATE RC5 > ng new meu-projeto > cd meu-projeto > rm -rf node_modules dist tmp typings > npm install --save-dev angular-cli@webpack > ng init
  312. 312. ANGULAR CLI: UPDATE RC5 ▸ Depois da atualização, os seguintes arquivos podem ser removidos: ▸ ./config/karma-test-shim.js ▸ ./config/environment.js ▸ ./src/system-config.ts ▸ ./angular-cli-build.js ▸ ./typings.json ▸ ./.clang-format (se existir)
  313. 313. Angular CLI: Usando Sass, Less ou Stylus Angular 219
  314. 314. ESCOLHENDO O PRÉ-PROCESSADOR > ng new meu-projeto --style=sass > ng new meu-projeto --style=less > ng new meu-projeto --style=stylus AO GERAR UM NOVO PROJETO
  315. 315. ESCOLHENDO O PRÉ-PROCESSADOR > ng set defaults.styleExt scss > ng set defaults.styleExt less > ng set defaults.styleExt styl EM UM PROJETO EXISTENTE
  316. 316. AO CRIAR UM NOVO COMPONENTE
  317. 317. Angular CLI: ng lint, ng test, ng e2e Angular 220
  318. 318. TEXT NG LINT
  319. 319. TEXT NG LINT
  320. 320. TEXT NG TEST
  321. 321. Angular CLI: Estrutura do projeto Angular 221
  322. 322. TEXT PRA QUE SERVE O ANGULAR CLI? ▸ Cria toda a estrutura do projeto ▸ Gera página HTML inicial, arquivos Typescript iniciais, arquivos CSS e arquivos de testes unitários ▸ Cria arquivo package.json com todas as dependências do Angular 2 ▸ Instala todas as dependências do node (npm install) ▸ Configura o Karma para executar os testes unitários com Jasmine ▸ Configura Protractor para executar os testes end-to-end (E2E) ▸ Inicializa um repositório git no projeto e faz o commit inicial ▸ Cria todos os arquivos necessários para fazer o build da aplicação para produção
  323. 323. TEXT ESTRUTURA DIRETÓRIOS DO PROJETO ▸ config – diretório que contém configuração para deploy/build e teste. ▸ dist – diretório onde é gerado o build da aplicação. Ignorado pelo git ▸ e2e – diretório que contém os scripts para testes end- to-end ▸ node_modules – diretório que contém os pacotes npm da app (package.json). Também ignorado pelo git ▸ public – diretório genérico que contém um arquivo .npmignore ▸ src – diretório do código fonte da aplicação. Contém código typescript/javascript, CSS, imagens e templates HTML.
  324. 324. TEXT ESTRUTURA CÓDIGO FONTE (SCR) ▸ index.html - página HTML principal da aplicação, que faz o startup. ▸ main.ts é o código que carrega a aplicação. Somente deve ser editado caso seja necessário adicionar mais módulos na app. ▸ system-config.ts configura as dependências da app. Bibliotecas e extensões angular 2 devem ser adicionadas aqui para que sejam carregadas na app. ▸ tsconfig.json contém as configurações do compilador do typescript ▸ typings.d.ts é usado para declarações de tipos que a app usa ▸ index.ts contém o export de todos os arquivos do módulo
  325. 325. TEXT A DOCUMENTAÇÃO É A SUA MELHOR AMIGA! DESENVOLVA O HÁBITO DE LER OS DOCS! LEMBRE-SE SEMPRE DE CONSULTAR A DOCUMENTAÇÃO! ▸ https://angular.io/docs
  326. 326. TEXT DEPENDENCIES X DEVDEPENDENCIES ESTRUTURA PACKAGE.JSON ▸ dependencies: dependências necessárias para executar a aplicação. ▸ devDependencies: dependências necessárias para desenvolver a aplicação (não necessárias após o build de produção).
  327. 327. TEXT ESTRUTURA PACKAGE.JSON: DEPENDENCIES
  328. 328. TEXT ESTRUTURA PACKAGE.JSON: DEPENDENCIES ▸ @angular/core - pacote principal do framework Angular 2. Contém decorators e metadados, Component, Directive, injeção de dependência e os hooks de ciclo de vida do Component. ▸ @angular/common - Serviços, pipes e diretivas comuns fornecidas pelo time de dev do Angular. ▸ @angular/compiler - Template de compilação do angular. Entende o código dos templates e converte em código que faz a app ser executada e renderizada. Desenvolvedores não interagem com esse pacote diretamente (apenas usamos seu código). ▸ @angular/forms - contém todo o código para construção de formulários no angular 2. ▸ @angular/platform-browser - contém todo o código relacionado ao DOM e ao browser, especialmente as parte que ajudam a renderizar o DOM. Esse pacote também contém o método para fazer o bootstrap da aplicação para builds de produção que pré-compila os templates. ▸ @angular/platform-browser-dynamic - Contém os Providers e o método para iniciar as aplicações que compilam templates no lado cliente. Não usa compilação offline. Usada para fazer bootstrap durante desenvolvimento e exemplos plunker. ▸ @angular/http - fornece o cliente HTTP. ▸ @angular/router - classes de roteamento.
  329. 329. TEXT ESTRUTURA PACKAGE.JSON: DEPENDENCIES: POLYFILLS ▸ es6-shim - biblioteca que permite compatibilidade de engines JS antigas com a especificação do ES 2015, ou seja, emula as funcionalidades do ES 2015 em browsers que suportam somente ES5. ▸ reflect-metadata - dependência compartilhada entre o Angular e o compilador TypeScript. Permite o uso de decorators no código (annotations). Isso permite ao desenvolvedores fazer upgrade no TypeScript sem precisar de fazer upgrade no Angular. Esse é o motivo desta ser uma dependência da aplicação e não do angular. ▸ rxjs - extensão para a especificação dos Observables (programação assíncrona). Reactive extensions for JavaScript. ▸ system.js - módulo para carregamento dinâmico compatível com a especificação de módulos do ES 2015. Como alternativa também podemos usar o Webpack. O SystemJS é o módulo utilizando oficialmente na documentação do Angular 2. ▸ zone.js - extensão (plugins) útil para tarefas assíncronas (chamadas de Zones).
  330. 330. TEXT ESTRUTURA PACKAGE.JSON: DEVDEPENDENCIES
  331. 331. TEXT ESTRUTURA PACKAGE.JSON: DEPENDENCIES: POLYFILLS ▸ angular-cli: ferramenta de linha de comando para gerenciar projetos angular 2. ▸ codelyzer: lint (análise de código) para angular 2 ▸ ember-cli-inject-live-reload: ferramenta de live reload ▸ jasmine-core: arquivos principais jasmine para node.js ▸ jasmine-spec-reporter: relatório em tempo real para BDD com Jasmine ▸ karma: ferramenta de testes que cria um web server e executa código de teste em cada um dos browsers conectados ▸ karma-chrome-launcher: launcher do karma para o chrome ▸ karma-jasmine: adaptador para o jasmine ▸ protractor: framework de teste end to end (integração) para angular ▸ ts-node: módulo typescript para node.js ▸ tslint: lint (análise de código) para typescript ▸ typescript: compilador typescript ▸ typings: gerenciador de arquivos de definição para typescript
  332. 332. Angular CLI: Gerando o build de produção Angular 222
  333. 333. GERANDO O BUILD DE DESENVOLVIMENTO > cd NomeProjeto > ng build --target=development --environment=dev > ng build --dev --e=dev > ng build --dev > ng build
  334. 334. TEXT BUILD DE DEV ▸ Útil para integrar o código do Angular 2 com o projeto de backend (PHP, Java, .NET, Python, Ruby etc) ▸ Código que dá pra debugar ▸ Apenas copia o código de desenvolvimento para o diretório dist (apenas código .js)
  335. 335. GERANDO O BUILD DE PRODUÇÃO > cd NomeProjeto > ng build --target=production --environment=prod > ng build --prod --env=prod > ng build --prod
  336. 336. TEXT BUILD DE PROD ▸ Obfusca e minifica o código JS da aplicação ▸ Arquivos CSS e templates HTML não são minificados ▸ diretório vendor contém todo o código Angular 2 + dependências
  337. 337. TEXT CRIAR ARQUIVO .EMBER-CLI NO PROJETO MUDAR O DIRETÓRIO DE OUTPUT
  338. 338. TEXT CRIAR ARQUIVO .EMBER-CLI NO PROJETO MUDAR O DIRETÓRIO DE OUTPUT TOMAR CUIDADO POIS SE O DIRETÓRIO JÁ EXISTIR, O MESMO SERÁ DELETADO E RECRIADO
  339. 339. TEXT EXEMPLO DE ARQUITETURA DOS PROJETOS
  340. 340. TEXT EXEMPLO DE ARQUITETURA DOS PROJETOS WORKSPACE DO PROJETO ANGULAR2 + JAVA
  341. 341. TEXT EXEMPLO DE ARQUITETURA DOS PROJETOS WORKSPACE DO PROJETO ANGULAR2 + JAVA OUTPUT BUILD PROJETO ANGULAR 2
  342. 342. TEXT EXEMPLO DE ARQUITETURA DOS PROJETOS WORKSPACE DO PROJETO ANGULAR2 + JAVA OUTPUT BUILD PROJETO ANGULAR 2 PROJETO ANGULAR 2
  343. 343. Angular CLI: instalando bibliotecas (bootstrap, jquery, semantic ui, etc) Angular 223
  344. 344. INSTALANDO A DEPENDÊNCIA > cd NomeProjeto > npm install ng2-bootstrap --save > npm install moment --save https://github.com/valor-software/ng2-bootstrap
  345. 345. TEXT PROJETO/SRC/SYSTEM-CONFIG.TS
  346. 346. TEXT INDEX.HTML
  347. 347. Diretivas: Introdução Angular 224
  348. 348. TEXT DIRETIVAS SÃO INSTRUÇÕES O QUE SÃO DIRETIVAS?
  349. 349. TEXT DIRETIVAS SÃO INSTRUÇÕES O QUE SÃO DIRETIVAS? "Itere todos os cursos, e a cada iteração, atribua o valor do elemento atual à uma variável curso. Replique também o elemento <li> com valor da variável curso a cada iteração."
  350. 350. TEXT DIRETIVAS SÃO INSTRUÇÕES O QUE SÃO DIRETIVAS?
  351. 351. TEXT DIRETIVAS SÃO INSTRUÇÕES O QUE SÃO DIRETIVAS? “Crie um componente do Tipo (classe) especificado e renderize a view (template) desse componente nesse lugar“.
  352. 352. TEXT TIPOS DE DIRETIVAS DIRETIVAS ESTRUTURAIS Interagem com a view e modificam a estrutura do DOM e/ou código HTML *ngFor *ngIf
  353. 353. 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
  354. 354. *ngIf Angular 225
  355. 355. TEXT CONDICIONAL IF
  356. 356. TEXT *NGIF
  357. 357. TEXT [DICA] ALTERNATIVA: HIDDEN
  358. 358. TEXT *NGIF X HIDDEN [hidden] *ngIf recomendado para árvore de elementos pequenas recomendado para árvore de elementos grandes
  359. 359. TEXT *NGIF X HIDDEN - EXCEÇÃO [hidden] é menos custoso usar [hidden] caso o custo de criar a árvore de elementos seja grande
  360. 360. ngSwitch e *ngSwitchCase Angular 226
  361. 361. TEXT CONDICIONAL SWITCH-CASE
  362. 362. TEXT NGSWITCH E *NGSWITCHCASE
  363. 363. *ngFor Angular 227
  364. 364. TEXT LOOP FOR
  365. 365. TEXT *NGFOR
  366. 366. Diretivas: o porquê de usar o * e <template> Angular 228
  367. 367. TEXT NGIF
  368. 368. TEXT NGSWITCH E *NGSWITCHCASE
  369. 369. TEXT NGFOR
  370. 370. ngClass Angular 229
  371. 371. TEXT NGCLASS
  372. 372. TEXT NGCLASS
  373. 373. ngStyle Angular 230
  374. 374. TEXT NGSTYLE
  375. 375. TEXT NGSTYLE
  376. 376. Operador elvis Angular 231
  377. 377. TEXT ELVIS OPERATOR ?
  378. 378. ng-content Angular 232
  379. 379. https://github.com/loiane/curso-angular2
  380. 380. http://loiane.training Material apoio + certificado do curso Cadastro em:
  381. 381. http://loiane.com facebook.com/loianegroner twitter.com/loiane https://github.com/loiane youtube.com/loianegroner http://loiane.training

×