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

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>