Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Criando aplicações Single-Page com AngularJS

Aprenda a criar aplicações Single-Page com AngularJS

Related Books

Free with a 30 day trial from Scribd

See all
  • Login to see the comments

Criando aplicações Single-Page com AngularJS

  1. 1. Single-Page Application com AngularJS Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
  2. 2. Rodrigo Branas rodrigo.branas@agilecode.com.br http://www.agilecode.com.br • Desenvolvendo Software na Gennera • Criando treinamentos na Agile Code • Escrevendo na Java Magazine e PacktPub • Palestrando sobre desenvolvimento de software em eventos, universidades e empresas
  3. 3. Certificações Formação Acadêmica Ciências da Computação – UFSC Gerenciamento de Projetos - FGV SCJA, SCJP, SCJD, SCWCD, SCBCD, PMP, MCP e CSM Experiência Há mais de 12 anos desenvolvendo software na plataforma Java com as empresas: EDS, HP, NET, Citibank, GM, Dígitro, Softplan, OnCast, Senai, VALE, RBS, Unimed, Globalcode, V.Office, Suntech, WPlex e Gennera.
  4. 4. • Há mais de 5 anos liderando pessoas. • Mais de 2000 horas em sala de aula. • Mais de 100 apresentações em eventos. • 6 artigos escritos para revistas. • 1 livro. • Mais de 500 profissionais treinados. • Criação de 22 palestras. • Criação de 10 treinamentos. • Criação de mais de 3.000 slides. O que realmente me motiva?
  5. 5. Single-Page Application?
  6. 6. Configurando o módulo
  7. 7. 1. var app = angular.module("listaTelefonica", []);
  8. 8. 1. var app = angular.module("listaTelefonica", []); 2. 3. app.config(function () { 4. });
  9. 9. $routeProvider Com o serviço $routeProvider, podemos traçar rotas para cada funcionalidade, unindo a View e o Controller. • when (path, route) • otherwise (path) Requer a utilização do módulo ngRoute
  10. 10. 1. var app = angular.module("listaTelefonica", []); 2. 3. app.config(function () { 4. });
  11. 11. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function () { 4. });
  12. 12. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function () { 4. });
  13. 13. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. });
  14. 14. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. });
  15. 15. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. 5. });
  16. 16. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider. 5. });
  17. 17. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when(); 5. });
  18. 18. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when(); 5. });
  19. 19. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica'); 5. });
  20. 20. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {}); 5. });
  21. 21. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html'}); 5. });
  22. 22. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. });
  23. 23. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. });
  24. 24. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.otherwise({redirectTo: '/listaTelefonica'}); 6. });
  25. 25. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.otherwise({redirectTo: '/listaTelefonica'}); 6. });
  26. 26. ngView
  27. 27. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th> 6. <th>Nome</th> 7. <th>Telefone</th> 8. </tr> 9. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 10. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 11. <td>{{contato.nome}}</td> 12. <td>{{contato.telefone}}<td/> 13. </tr> 14. </table> 15. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 17. <button ng-click="adicionarContato(contato)">Adicionar</button> 18. </body>
  28. 28. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th> 6. <th>Nome</th> 7. <th>Telefone</th> 8. </tr> 9. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 10. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 11. <td>{{contato.nome}}</td> 12. <td>{{contato.telefone}}<td/> 13. </tr> 14. </table> 15. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 17. <button ng-click="adicionarContato(contato)">Adicionar</button> 18. </body>
  29. 29. 1. <body ng-controller="listaTelefonicaCtrl"> 2. </body>
  30. 30. 1. <body ng-controller="listaTelefonicaCtrl"> 2. </body>
  31. 31. 1. <body> 2. </body>
  32. 32. 1. <body> 2. <div ng-view></div> 3. </body>
  33. 33. 1. <body> 2. <div ng-view></div> 3. </body>

×