5-7 Angular ui-router子路由

ui-router子路由

Angularjs ui-router - 组件

• stateProvider：管理状态定义、当前状态和状态转换。包含触发状态转换的事件和回调函数，异步解决目标状态的任何依赖项，更新urlRouterProvider生成一个路由规则来执行转换的状态。

• ui-view指示器：渲染状态中定义的视图，是状态中定义的视图的一个占位符。

• urlRouterProvider：管理了一套路由规则列表来处理当location，并在处理完成时候返回true。支持正则表达式规则和通过$urlMatcherFactory编译的UrlMatcher对象的 url 占位符规则。

• 路由嵌套(子路由): 在一个模版当中可以嵌套另一个模板,即一个模版中可以继续进行路由跳转.

---

• 1.添加模版, 修改路由配置

homt_tpl.html

首页
登录
注册

注册信息/登录信息

• 2.配置路由

app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        //代码中路由切换不是监听锚点, 监听state
    $stateProvider.state('home', {
            //接收路由参数
            url:'/home', //url显示地址
            //template:'
首页-{{name}}
',
            templateUrl:'home_tpl.html',
            controller:'skController'

    }).state('home.login', {
            url:'/login',
            template:'
登录信息
',
            //注意:子路由不需要设置控制器
            //controller:'skController'

    }).state('home.regist', {
            url:'/regist',
            template:'
注册信息
',
            //controller:'skController'

    }).state('my', {
            url:'/my',
            template:'
关于我们
',
            controller:'skController'

    }).state('contact', {
            url:'/contact',
            template:'
联系我们
',
            controller:'skController'

    });
    //设置默认url
    $urlRouterProvider.otherwise('home');
}]);

• 3.设置默认跳转子路由

app.controller('skController', ['$scope' , '$state',function ($scope, $state) {
        $scope.name = '修改内容';
        //设置默认自路由
        $state.go('home.login');
    }]);