Angular-ui-route
发布时间:2020-12-17 10:06:04 所属栏目:安全 来源:网络整理
导读:ng-route ng-route是官方的原来就实现的路由器 范例如下: angular.module( 'myApp' ,[]) .config( 'myAppCtrl' ,[ '$routeProvider' , function ( $routeProvider ) { $routeProvider .when( '/' ,{ templateUrl: 'views/page-a.html' ,controller: 'pageACt
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-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-router更深层次的用法,可以查看其官方文档 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |