Criando aplicações Single-Page com AngularJS

2,670 views

Published on

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

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,670
On SlideShare
0
From Embeds
0
Number of Embeds
95
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • Desmotivação
  • Desmotivado
  • Desmotivado
  • Motivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • 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>

    ×