ui-router子路由
Angularjs ui-router - 组件
stateProvider：管理状态定义、当前状态和状态转换。包含触发状态转换的事件和回调函数，异步解决目标状态的任何依赖项，更新
urlRouterProvider生成一个路由规则来执行转换的状态。
ui-view指示器：渲染状态中定义的视图，是状态中定义的视图的一个占位符。
urlRouterProvider：管理了一套路由规则列表来处理当
location，并在处理完成时候返回true。支持正则表达式规则和通过$urlMatcherFactory编译的UrlMatcher对象的 url 占位符规则。
路由嵌套(子路由): 在一个模版当中可以嵌套另一个模板,即一个模版中可以继续进行路由跳转.
- 1.添加模版, 修改路由配置
homt_tpl.html
<h1>首页</h1>
<a ui-sref="home.login">登录</a>
<a ui-sref="home.regist">注册</a>
<div ui-view>注册信息/登录信息
</div>
- 2.配置路由
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
//代码中路由切换不是监听锚点, 监听state
$stateProvider.state('home', {
//接收路由参数
url:'/home', //url显示地址
//template:'<h1>首页-{{name}}</h1>',
templateUrl:'home_tpl.html',
controller:'skController'
}).state('home.login', {
url:'/login',
template:'<h1>登录信息</h1>',
//注意:子路由不需要设置控制器
//controller:'skController'
}).state('home.regist', {
url:'/regist',
template:'<h1>注册信息</h1>',
//controller:'skController'
}).state('my', {
url:'/my',
template:'<h1>关于我们</h1>',
controller:'skController'
}).state('contact', {
url:'/contact',
template:'<h1>联系我们</h1>',
controller:'skController'
});
//设置默认url
$urlRouterProvider.otherwise('home');
}]);
- 3.设置默认跳转子路由
app.controller('skController', ['$scope' , '$state',function ($scope, $state) {
$scope.name = '修改内容';
//设置默认自路由
$state.go('home.login');
}]);
