使用ngRoute配置app.js,在页面跳转方面没有ui-router方便,在ui-router中我们可以使用 $scope.$state.go('persons');进行页面跳转。‘persons’是state的第一个参数。state的第一个参数并不是匹配规则,而是叫状态名,也就是说这个参数事实上可以是任意的,它用来给当前状态增加一个名字,触发路由规则还是看url的内容。
下面给出用ngRoute写的app.js代码
'use strict';
/* App Module */
var personApp = angular.module('personApp', [ 'ngRoute',
'personControllers',
'personServices']);
personApp.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/persons', {
templateUrl : 'home.html',
controller : 'personListCtrl'
}).when('/addPerson', {
templateUrl : 'addPerson.html',
controller : 'addPersonCtrl'
}).when('/editPerson/:personId', {
templateUrl : 'editPerson.html',
controller : 'editPersonCtrl'
}).when('/deletePerson/:personId', {
redirectTo : '/persons',
templateUrl : 'home.html',
controller : 'deletePersonCtrl'
}).when('/persons/:personId', {
templateUrl : 'personInfo.html',
controller : 'personInfoCtrl'
}).otherwise({
redirectTo : '/persons'
});
} ]);
使用ui-router写的app.js
'use strict';
/* App Module */
var personApp = angular.module('personApp', [ 'ui.router',
'personControllers',
'personServices']);
personApp.run(function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
});
personApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/persons');
$stateProvider.state('persons',{
url : '/persons',
templateUrl : 'home.html',
controller : 'personListCtrl'
}).state('addPerson',{
url : '/addPerson',
templateUrl : 'addPerson.html',
controller : 'addPersonCtrl'
}).state('editPerson',{
url : '/editPerson/:personId',
templateUrl : 'editPerson.html',
controller : 'editPersonCtrl'
}).state('deletePerson',{
url : '/deletePerson/:personId',
templateUrl : 'index.html',
controller : 'deletePersonCtrl'
}).state('personInfo',{
url : '/persons/:personId',
templateUrl : 'personInfo.html',
controller : 'personInfoCtrl'
});
});
在controller中可以就可以通过$scope.$state.go(‘需要跳转的状态名’)实现页面跳转