Criando aplicações Single-Page com AngularJS

  • 781 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
781
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 1. Single-Page Application com AngularJS Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
  • 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. 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. • 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. Single-Page Application?
  • 6. Configurando o módulo
  • 7. 1. var app = angular.module("listaTelefonica", []);
  • 8. 1. var app = angular.module("listaTelefonica", []); 2. 3. app.config(function () { 4. });
  • 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. 1. var app = angular.module("listaTelefonica", []); 2. 3. app.config(function () { 4. });
  • 11. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function () { 4. });
  • 12. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function () { 4. });
  • 13. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. });
  • 14. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. });
  • 15. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. 5. });
  • 16. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider. 5. });
  • 17. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when(); 5. });
  • 18. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when(); 5. });
  • 19. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica'); 5. });
  • 20. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {}); 5. });
  • 21. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html'}); 5. });
  • 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. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. });
  • 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. 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. ngView
  • 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. 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. 1. <body ng-controller="listaTelefonicaCtrl"> 2. </body>
  • 30. 1. <body ng-controller="listaTelefonicaCtrl"> 2. </body>
  • 31. 1. <body> 2. </body>
  • 32. 1. <body> 2. <div ng-view></div> 3. </body>
  • 33. 1. <body> 2. <div ng-view></div> 3. </body>