ng-route
ng-route是官方的原来就实现的路由器
范例如下:
angular.module('myApp',[])
.config('myAppCtrl',['$routeProvider',function ( $routeProvider ) {
$routeProvider
.when('/',{
templateUrl: 'views/page-a.html',controller: 'pageACtrl'
})
.when('/next',{
templateUrl: 'views/page-b.html',controller: 'pageBCtrl'
})
/* 对其他不合法的路由进行处理 */
$routeProvider.otherwise('/404');
}])
貌似已经足够我们使用了,但是问题是我们会遇到以下的情况
如果说我们有一个网页，左边是菜单栏，右边是各个菜单所对应的视图。那么，如果按照这样的定义，点击每个菜单项，岂不得刷新整个网页？
而且人肉眼会明显的感觉到不平滑感所以我们需要使用ui-route
ui-route
ui-route是一种嵌套路由,简单的说,就是一个被路由出来的页面,再可以一个路由
- 第一层路由
/* 使用ui-router来进行路由定义，需要注入ui.router模块 */
var myApp = angular.module('myApp',['ui.router']);
/* 注入$stateProvider，$urlRouterProvider */
myApp.config(['$stateProvider','$urlRouterProvider',function ( $stateProvider,$urlRouterProvider ) {
/* 使用when来对一些不合法的路由进行重定向 */
$urlRouterProvider.when('','/main');
/* 通过$stateProvider的state()函数来进行路由定义 */
$stateProvider.state('main',{
url: '/main',templateUrl: 'views/main.html',controller: 'MainCtrl'
}).state('detail',{
url: '/main/detail/store',templateUrl: 'views/detail.html',controller: 'DetailCtrl'
})
$stateProvider.state('404',{
url: '/404',templateUrl: '404.html'
})
}]);
在此处好像没有看出跟ng-route的区别,那请看第二层的路由,就明白了
- 第二层路由
<!-- main.html -->;
<div>这是侧边栏的菜单条目</div>
<div ui-view></div>
/* router.js */
var myApp = angular.module('myApp',['ui.router']);
myApp
.config(['$stateProvider',function($stateProvider,$urlRouterProvider){
$stateProvider
//为主菜单声明abstract属性和template属性
//那么视图就会自动加载到ui-view里
.state('main',{
abstract: true,url: '/main',template: '<ui-view />'
})
//通过"."的方式声明子视图
//这样，就能实现嵌套路由了
.state('main.page_a',{
url: '/page_a',templateUrl: 'views/template-a.html',controller: 'pageACtrl'
})
.state('main.page_b',{
url: '/page_b',templateUrl: 'views/template-b.html',controller: 'pageBCtrl'
})
}]);
ui-view替代ng-view
abstract来说明是上一级路由的名字
