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

1、使用ng-route：

app.js中的写法：

[javascript]  view plain  copy

 

1. var app=angular.module('birthdayApp',['ngRoute']);  
2.   app.config(function($routeProvider){  
3.       $routeProvider  
4.       .when('/', {  
5.         templateUrl: 'views/login.html',  
6.         controller: 'loginCtr',  
7.         controllerAs: 'login'  
8.       })  
9.       .when('/regist', {  
10.         templateUrl: 'views/regist.html',  
11.         controller: 'registCtr',  
12.         controllerAs: 'regist'  
13.       })  
14.       .otherwise({  
15.         redirectTo: '/'  
16.       });  
17.         
18.   });  

需要导入angular-route.js：

[html]  view plain  copy

 

1. <script src='./angular-1.4.0-rc.2/angular-route.js'></script>  

html中的写法：

[html]  view plain  copy

 

1. <div ng-view></div>  

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

[javascript]  view plain  copy

 

1. var app=angular.module('birthdayApp',['ui.router']);  
2. app.config(function($stateProvider,$urlRouterProvider){  
3.     $urlRouterProvider.otherwise('/login');  
4.     $stateProvider  
5.     .state('login', {  
6.     url: "/login",  
7.     views: {  
8.        'view': {  
9.         templateUrl: 'views/login.html',  
10.         controller: 'loginCtr'  
11.        }  
12.     }  
13.    });  
14.    $stateProvider  
15.     .state('regist', {  
16.     url: "/regist",  
17.     views: {  
18.        'view': {  
19.         templateUrl: 'views/regist.html',  
20.         controller: 'registCtr'  
21.        }  
22.     }  
23.    });  
24. });  

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

[html]  view plain  copy

 

1. <script src='./angular-1.4.0-rc.2/angular-ui-router.js'></script>  

html中的写法：

[html]  view plain  copy

 

1. <div ui-view="view"></div>  

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/31364689/viewspace-2120690/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/31364689/viewspace-2120690/