SPA Jumpstart - Angular - 11 - Roteamento

Roteamento

Web Browser

ASP.NETAngularJS

Class LibraryBusiness

Index.htmlAppModule

RoutesDirectivies

TemplatesViews

ControllerViewModel

ServicesFactories

Repository

BreezeJS$resource$http

WebAPI

ApiController Services

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

Roteamento

URLStat

e

http://pt.stackoverflow.com/questions/29459/como-usar-angular-ui-router-e-quais-as-vantagens




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'

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'); }

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>

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

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:

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

Wesley A.LemosLages/SC - 2014

SPA Jumpstart - Angular - 11 - Roteamento

Software

Transcript of SPA Jumpstart - Angular - 11 - Roteamento