ng-route模塊中的$routeService監(jiān)測(cè)$location.url()的變化，并將它映射到預(yù)先定義的控制器耸彪。也就是在客戶端進(jìn)行URL的路由。var app = angular.module('myApp', ['ngRoute'])? ? .controller('MainController', function($scope) {? ? })? ? .config(function($routeProvider, $locationProvider) {? ? ? $routeProvider? ? ? ? ? .when('/users', {? ? ? ? ? ? ? templateUrl: 'user-list.html',? ? ? ? ? ? ? controller: 'UserListCtrl'? ? ? ? ? })? ? ? ? ? .when('/users/:username', {? ? ? ? ? ? ? templateUrl: 'user.html',? ? ? ? ? ? ? controller: 'UserCtrl'? ? ? ? ? });? ? ? ? // configure html5? ? ? ? $locationProvider.html5Mode(true);? ? });使用 : $location.path 進(jìn)行跳轉(zhuǎn)參數(shù)使用: $routeParams
UI-Router是Angular-UI提供的客戶端路由框架，它解決了原生的ng-route的很多不足：1. 視圖不能嵌套揽碘。這意味著$scope會(huì)發(fā)生不必要的重新載入。這也是我們?cè)贠nboard中引入ui-route的原因。2. 同一URL下不支持多個(gè)視圖雳刺。這一需求也是常見(jiàn)的：我們希望導(dǎo)航欄用一個(gè)視圖（和相應(yīng)的控制器）劫灶、內(nèi)容部分用另一個(gè)視圖（和相應(yīng)的控制器）。UI-Router提出了$state的概念掖桦。一個(gè)$state是一個(gè)當(dāng)前導(dǎo)航和UI的狀態(tài)本昏，每個(gè)$state需要綁定一個(gè)URL Pattern。 在控制器和模板中枪汪，通過(guò)改變$state來(lái)進(jìn)行URL的跳轉(zhuǎn)和路由$stateProvider? ? .state('contacts', {? ? ? ? url: '/contacts',? ? ? ? template: 'contacts.html',? ? ? ? controller: 'ContactCtrl'? ? })? ? .state('contacts.detail', {? ? ? ? url: "/contacts/:contactId",? ? ? ? templateUrl: 'contacts.detail.html',? ? ? ? controller: function ($stateParams) {? ? ? ? ? ? // If we got here from a url of /contacts/42? ? ? ? ? ? $stateParams.contactId === "42";? ? ? ? }? ? });跳轉(zhuǎn):$state.go參數(shù): $stateParams在ui-router中涌穆，一個(gè)$state下可以有多個(gè)視圖，它們有各自的模板和控制器雀久。這一點(diǎn)也是ng-route所沒(méi)有的蒲犬， 給了前端路由極大的靈活性。
$stateProvider? .state('report',{? ? views: {? ? ? 'filters': {? ? ? ? templateUrl: 'report-filters.html',? ? ? ? controller: function($scope){ ... controller stuff just for filters view ... }? ? ? },? ? ? 'tabledata': {? ? ? ? templateUrl: 'report-table.html',? ? ? ? controller: function($scope){ ... controller stuff just for tabledata view ... }? ? ? },? ? ? 'graph': {? ? ? ? templateUrl: 'report-graph.html',? ? ? ? controller: function($scope){ ... controller stuff just for graph view ... }? ? ? }? ? }? })
