angularjs中ngRoute与ui-router的对比

   使用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(‘需要跳转的状态名’)实现页面跳转

你可能感兴趣的:(UI,AngularJS,前端)