spa jumpstart - angular - 11 - roteamento
DESCRIPTION
Curso ministrado por mim na NDDigital sobre como iniciar uma aplicação AngularJS direcionada ao consumo de WebAPI, baseado neste fluxo: https://www.examtime.com/pt-BR/p/1084807 ::Table of Contents 1 - Introdução http://pt.slideshare.net/anisanwesley/angular-jumpstart-1-introduo-38460785 2 - Arquitetura http://pt.slideshare.net/anisanwesley/angular-jumpstart-2-arquitetura 3 - Controllers http://pt.slideshare.net/anisanwesley/angular-jumpstart-3-controllers 4 - Diretivas nativas http://pt.slideshare.net/anisanwesley/angular-jumpstart-4-diretivas-nativas 5 - Diretivas customizadas http://pt.slideshare.net/anisanwesley/angular-jumpstart-5-diretivas-customizadas 6 - Filters http://pt.slideshare.net/anisanwesley/angular-jumpstart-6-filters 7 - Validação http://pt.slideshare.net/anisanwesley/angular-jumpstart-7-validao 8 - Services http://pt.slideshare.net/anisanwesley/angular-jumpstart-8-services 9 - Modulos http://pt.slideshare.net/anisanwesley/angular-jumpstart-9-modulos 10 - Requests http://pt.slideshare.net/anisanwesley/angular-jumpstart-10-requests 11 - Roteamento http://pt.slideshare.net/anisanwesley/angular-jumpstart-11-roteamentoTRANSCRIPT
![Page 1: SPA Jumpstart - Angular - 11 - Roteamento](https://reader036.vdocuments.us/reader036/viewer/2022083002/558bb1e9d8b42a64048b4577/html5/thumbnails/1.jpg)
Roteamento
![Page 2: SPA Jumpstart - Angular - 11 - Roteamento](https://reader036.vdocuments.us/reader036/viewer/2022083002/558bb1e9d8b42a64048b4577/html5/thumbnails/2.jpg)
Web Browser
ASP.NETAngularJS
Class LibraryBusiness
Index.htmlAppModule
RoutesDirectivies
TemplatesViews
ControllerViewModel
ServicesFactories
Repository
BreezeJS$resource$http
WebAPI
ApiController Services
![Page 3: SPA Jumpstart - Angular - 11 - Roteamento](https://reader036.vdocuments.us/reader036/viewer/2022083002/558bb1e9d8b42a64048b4577/html5/thumbnails/3.jpg)
Roteamento
Definição Navegação entre Views $routeProvider
Melhor Mais recursos
Certamente o recurso mais importante de uma SPA é o roteamento que possibilita navegação entre as áreas do siteAngularJS fornece um servisse para roteamento, o $routeProvider mas...Vamos usar o ui-router por ser significativamente melhor e ter muito mais recursos do que o servisse nativo ofereceO roteamento de páginas não é baseado em URL, mas sim em estados
![Page 4: SPA Jumpstart - Angular - 11 - Roteamento](https://reader036.vdocuments.us/reader036/viewer/2022083002/558bb1e9d8b42a64048b4577/html5/thumbnails/4.jpg)
Roteamento
URLStat
e
http://pt.stackoverflow.com/questions/29459/como-usar-angular-ui-router-e-quais-as-vantagens
![Page 5: SPA Jumpstart - Angular - 11 - Roteamento](https://reader036.vdocuments.us/reader036/viewer/2022083002/558bb1e9d8b42a64048b4577/html5/thumbnails/5.jpg)
Roteamento
Primeiro se deve declarar o módulo no html normalmente
Ter os templates separados no projeto
Então referenciar o ui-router no modulo principal
Implementação
(function() { angular.module('core.module', [ ]); })();
'ui.router'
![Page 6: SPA Jumpstart - Angular - 11 - Roteamento](https://reader036.vdocuments.us/reader036/viewer/2022083002/558bb1e9d8b42a64048b4577/html5/thumbnails/6.jpg)
RoteamentoImplementação
configFunction.$inject = ['$stateProvider', '$urlRouterProvider']; app.config(configFunction); function configFunction(stateProvider, url) { stateProvider.state('home', { url: '/home', templateUrl:'partial-home.html' }) .state('about', { url: '/about', templateUrl: 'partial-about.html' }); url.otherwise('/home'); }
![Page 7: SPA Jumpstart - Angular - 11 - Roteamento](https://reader036.vdocuments.us/reader036/viewer/2022083002/558bb1e9d8b42a64048b4577/html5/thumbnails/7.jpg)
RoteamentoImplementação
<body ng-app="core.module"> Áreas do site: <nav> <li><a ui-sref="home">Home</a></li> <li><a ui-sref="about">About</a></li> </nav> <hr /> <div ui-view></div></body>
![Page 8: SPA Jumpstart - Angular - 11 - Roteamento](https://reader036.vdocuments.us/reader036/viewer/2022083002/558bb1e9d8b42a64048b4577/html5/thumbnails/8.jpg)
RoteamentoRoteamento Intrusivo
.state('home.list', { url: '/list', templateUrl: 'partial-home-list.html', controller: function ($scope) { $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle']; }})
<h1>Home view</h1> <nav> <li><a ui-sref=" <li><a ui-sref=" </nav> <div ui-view></div>
homehome
controller: 'dogsController'controller: 'dogsController as vm'
.list">List</a></li>
.text">Text</a></li>
Printer.event
![Page 9: SPA Jumpstart - Angular - 11 - Roteamento](https://reader036.vdocuments.us/reader036/viewer/2022083002/558bb1e9d8b42a64048b4577/html5/thumbnails/9.jpg)
Roteamento Parametrizado
.state('home.text', { url: '/text/:numero', template: 'Numero vindo do $stateProvider {{vm.numero}}', controller: 'textController as vm' })
textController.$inject = ["$stateParams"]; function textController(paramsUrl) { this.numero = paramsUrl.numero; }
<a ui-sref=".text({numero:numeroInformado})">Text</a>
Roteamento
Config:
Controller:
Home View:
![Page 10: SPA Jumpstart - Angular - 11 - Roteamento](https://reader036.vdocuments.us/reader036/viewer/2022083002/558bb1e9d8b42a64048b4577/html5/thumbnails/10.jpg)
State Interceptor
app.run(function ($rootScope) { $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { $rootScope.previousState = fromState; $rootScope.title = toState.data.displayName; console.log({ Change: "succes: ", fromState: fromState.name, toState: toState.name }); }); });
Roteamento
![Page 11: SPA Jumpstart - Angular - 11 - Roteamento](https://reader036.vdocuments.us/reader036/viewer/2022083002/558bb1e9d8b42a64048b4577/html5/thumbnails/11.jpg)
Wesley A.LemosLages/SC - 2014