Successfully reported this slideshow.
Your SlideShare is downloading. ×

Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 87 Ad

Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2

Download to read offline

Slides do mini-curso de Angular2 aplicado durante a II Semana Acadêmica de Computação da UFES, em Alegre no Espírito Santo. Construiu-se um aplicativo de gerenciamento de usuários durante o curso, repassando sobre os conceitos mais importantes do Angular2.

Slides do mini-curso de Angular2 aplicado durante a II Semana Acadêmica de Computação da UFES, em Alegre no Espírito Santo. Construiu-se um aplicativo de gerenciamento de usuários durante o curso, repassando sobre os conceitos mais importantes do Angular2.

Advertisement
Advertisement

More Related Content

Slideshows for you (15)

Similar to Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2 (20)

Advertisement

Recently uploaded (20)

Advertisement

Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2

  1. 1. Conhecendo os fundamentos e desenvolvendo uma aplicação básica com Angular 2 Hugo Magalhães Fundador do meuingresso.com hugo@meuingresso.com
  2. 2. O QUE É O ANGULAR? Plataforma de desenvolvimento frontend para criação de aplicações mobile e desktop
  3. 3. POR QUE UMA NOVA VERSÃO? Web components, mobile e padrões
  4. 4. POR QUE UMA NOVA VERSÃO? Re-escrita do angular 1, levando em conta tudo que foi aprendido nos últimos 5 anos
  5. 5. TypeScript
  6. 6. TypeScript ECMAScript 6 ECMAScript 5 Junho 2015 Dezembro 2009 my-script.ts TypeScript transpiler my-script.js ECMA5
  7. 7. Vantagens do TypeScript Tipos explicitamente documentados: fácil compreensão.
  8. 8. Vantagens do TypeScript Uso de decorators: poder à injeção de dependências.
  9. 9. Estrutura básica de uma aplicação Angular
  10. 10. Template <…> Component {…} Directive {…} Injector Service A Service B Property binding Event bindingMetadata
  11. 11. TALK LESS. CODE MORE.
  12. 12. Mini-curso Criando um cadastro de usuários simples utilizando Angular 2
  13. 13. 01. CONFIGURANDO O AMBIENTE E ARQUIVOS DE CONFIGURAÇÃO
  14. 14. 01. Agenda 1. Instalar Node.js e npm 2. Criar e configurar o projeto 3. Criar a aplicação 4. Criar um componente e adicionar à aplicação 5. Iniciar a aplicação 6. Definir a página inicial 7. Criar folha de estilos 8. Compilar a rodar a aplicação 9. Fazer alterações em tempo real
  15. 15. 01. 1. Instalar Node.js e npm node v5.x.x ou superior npm 3.x.x ou superior npm -v node -v
  16. 16. 01. 2. Criar e configurar o projeto mkdir angular2-secomp-users cd angular2-secomp-users Baixar o projeto com os arquivos base: package.json, tsconfig.json, typings.json, systemjs.config.js https://github.com/hugomn/angular2-secomp-users/ releases/tag/base
  17. 17. 01. 2. Criar e configurar o projeto Instalar pacote do Node.js listados no package.json: npm install
  18. 18. 01. 3. Criar a aplicação mkdir app
  19. 19. 01. 4. Criar um componente
  20. 20. 01. Editamos nosso módulo para incluir nosso componente:
  21. 21. 01. 5. Iniciar a aplicação
  22. 22. 01. 6. Definir a página inicial
  23. 23. 01. 7. Criar folha de estilos
  24. 24. 01. 8. Compilar e rodar a aplicação npm start
  25. 25. 01. 8. Alterações em tempo real Altere o arquivo app.component.ts e verifique se o browser recarregará.
  26. 26. 02. CRIANDO O EDITOR DE USUÁRIOS
  27. 27. 02. Agenda 1. Exibindo um usuários 2. Criando classe de usuários 3. Alterando o html 4. Editando nosso usuário 5. Two-way binding
  28. 28. 02. 1. Exibindo um usuário
  29. 29. 02. 2. Criando classe de alunos
  30. 30. 02. 3. Alterando o html
  31. 31. 02. 4. Editando nosso aluno
  32. 32. 02. 5. Importar FormsModule e usar ngModel para two-way binding
  33. 33. 03. EXIBINDO UMA LISTA DE USUÁRIOS
  34. 34. 03. Agenda 1. Definindo nossos usuários 2. Exibindo os usuários 3. Alterando o estilo 4. Selecionando os usuários 5. Destacando o usuário selecionado
  35. 35. 03. 1. Definindo os usuários
  36. 36. 03. 2. Exibindo os usuários
  37. 37. 03. 2. Exibindo os usuários
  38. 38. 03. 3. Alterando o estilo (css)
  39. 39. 03. 4. Selecionando os usuários
  40. 40. 03. 5. Destacando usuário selecionado
  41. 41. 04. CRIANDO COMPONENTES REUTILIZÁVEIS
  42. 42. 04. Agenda 1. Criando componente para exibir detalhes do usuário 2. Dizendo ao componente o que exibir 3. Importando o novo componente
  43. 43. 04. 1. Criando componente de detalhe do usuário touch app/user-detail.component.ts
  44. 44. 04. 1. Criando componente de detalhe do usuário
  45. 45. 04. 1. Criando componente de detalhe do usuário Criamos a classe User isolada para reutilizá-la: touch app/user.ts
  46. 46. 04. 1. Criando componente de detalhe do usuário Importando a classe User:
  47. 47. 04. 2. Dizendo ao componente o que exibir
  48. 48. 04. 3. Importando o novo componente
  49. 49. 05. CRIANDO SERVICES
  50. 50. 05. Agenda 1. Criando Service que fornece os dados dos usuários 2. Criando mock de usuários 3. Recuperando os usuários do mock 4. Usando o service de usuários 5. Usando o hook ngOnInit para carregar os usuários 6. Usando promises
  51. 51. 05. 1. Criando Service que fornece os dados dos usuários touch app/user.service.ts
  52. 52. 05. 2. Criando mock de usuários touch app/mock-user.ts
  53. 53. 05. 3. Recuperando os usuários do mock
  54. 54. 05. 4. Usando o service de usuários
  55. 55. 05. 4. Usando o service de usuários
  56. 56. 05. 5. Usando o hook ngOnInit para carregar os usuários
  57. 57. 05. 6. Usando Promises
  58. 58. 06. UTILIZANDO ROTAS
  59. 59. 06. Agenda 1. Quebrando o AppComponent 2. Adicionando rotas 3. Disponibilizando rotas 4. Criando um dashboard 5. Redirecionando para o dashboard 6. Adicionando a navegação 7. Separando htmls e css 8. Nova rota para exibir detalhes 9. Adicionando botão voltar 10. Link para a tela de detalhes 11. Adicionando novos estilos
  60. 60. 06. 1. Quebrando nosso AppComponent em UserComponent Nossa lógica de usuário está toda no AppComponent, então renomeamos para UserComponent e criamos outro AppComponent.
  61. 61. 06. 1. Quebrando nosso AppComponent em UserComponent
  62. 62. 06. 2. Adicionando rotas Precisamos adicionar a base tag no index para guiar o Router.
  63. 63. 06. 2. Adicionando rotas
  64. 64. 06. 3. Disponibilizando as rotas
  65. 65. 06. 4. Criando um dashboard touch app/dashboard.component.ts
  66. 66. 06. 5. Redirecionando para o dashboard
  67. 67. 06. 6. Adicionando a navegação
  68. 68. 06. 7. Separando html e css
  69. 69. 06. 7. Separando html e css
  70. 70. 06. 8. Nova rota para exibir detalhes
  71. 71. 06. 8. Nova rota para exibir detalhes
  72. 72. 06. 9. Adicionando o botão voltar
  73. 73. 06. 10. Links para a tela de detalhes
  74. 74. 06. 11. Adicionando novos estilos touch app/user-detail.component.css touch app/dashboard.component.css touch app/app.component.css
  75. 75. 07. UTILIZANDO HTTP
  76. 76. 07. Agenda 1. Utilizando HttpModule 2. Simulando uma API web 3. Salvando os dados do usuário 4. Adicionando um usuário 5. Removendo um usuário
  77. 77. 07. 1. Utilizando HttpModule
  78. 78. 07. 2. Simulando uma API web touch app/in-memory-data.service.ts
  79. 79. 07. rm app/mock-users.ts 2. Simulando uma API web
  80. 80. 07. 2. Simulando uma API web
  81. 81. 07. 3. Salvando dados do usuário
  82. 82. 07. 4. Adicionando um usuário
  83. 83. 07. 4. Removendo um usuário
  84. 84. OBRIGADO! Hugo Magalhães hugo@meuingresso.com

×