1、使用ng-route：

app.js中的写法：

			[javascript] view plaincopy
			
			var app=angular.module('birthdayApp',['ngRoute']);  
		
			  app.config(function($routeProvider){  
		
			      $routeProvider  
		
			      .when('/', {  
		
			        templateUrl: 'views/login.html',  
		
			        controller: 'loginCtr',  
		
			        controllerAs: 'login'  
		
			      })  
		
			      .when('/regist', {  
		
			        templateUrl: 'views/regist.html',  
		
			        controller: 'registCtr',  
		
			        controllerAs: 'regist'  
		
			      })  
		
			      .otherwise({  
		
			        redirectTo: '/'  
		
			      });  
		
			  });

需要导入angular-route.js：

			[html] view plaincopy
			
			<script src='./angular-1.4.0-rc.2/angular-route.js'></script>

html中的写法：

			[html] view plaincopy
			
			<div ng-view></div>

2、使用ui-router:
app.js中的写法：

			[javascript] view plaincopy
			
			var app=angular.module('birthdayApp',['ui.router']);  
		
			app.config(function($stateProvider,$urlRouterProvider){  
		
			    $urlRouterProvider.otherwise('/login');  
		
			    $stateProvider  
		
			    .state('login', {  
		
			    url: "/login",  
		
			    views: {  
		
			       'view': {  
		
			        templateUrl: 'views/login.html',  
		
			        controller: 'loginCtr'  
		
			       }  
		
			    }  
		
			   });  
		
			   $stateProvider  
		
			    .state('regist', {  
		
			    url: "/regist",  
		
			    views: {  
		
			       'view': {  
		
			        templateUrl: 'views/regist.html',  
		
			        controller: 'registCtr'  
		
			       }  
		
			    }  
		
			   });  
		
			});

需要导入angular-ui-router.js(需要下载):

			[html] view plaincopy
			
			<script src='./angular-1.4.0-rc.2/angular-ui-router.js'></script>

html中的写法：

			[html] view plaincopy
			
			<div ui-view="view"></div>

ITPub博客

angularjs中ng-route和ui-router简单用法的代码比较

最新文章