angular ui router - meetbill/butterfly-fe GitHub Wiki

angular ui router （嵌套路由）

1 使用 ui router

1.1 如何引用依赖 angular-ui-router

angular.module('app',["ui.router"])
.config(function($stateProvider){
$stateProvider.state(stateName, stateCofig);
})

2 ui router 模块

2.1 $stateProvider

使用

$stateProvider.state(stateName, stateConfig)

stateName 是 string 类型
stateConfig 是 object 类型

//statConfig 可以为空对象
$stateProvider.state("home",{});
//state 可以有子父级
$stateProvider.state("home",{});
$stateProvider.state("home.child",{})
//state 可以是链式的
$stateProvider.state("home",{}).state("about",{}).state("photos",{});

stateConfig 包含的字段：template, templateUrl, templateProvider, controller, controllerProvider, resolve, url, params, views, abstract, onEnter, onExit, reloadOnSearch, data

Angular——$stateProvider 路由

.state('app', {
    abstract: true,
    url: '/app',
    templateUrl: layout
})
.state('app.dashboard-v1', {
    url: '/xxx',
    templateUrl: 'static/tpl/app_dashboard_v1.html',
    resolve: load(['static/js/controllers/chart.js'])
})
  • 通过 ui-sref 来使每个 a 标签对应到不同的路由
  • 通过 app.dashboard-v1 来标识 /xxx 是 /app 的子页面，即浏览器是访问 /app/xxx
  • 父页面要给子页面留存放子页面容器，也就是 ui-view , 如下就是 app 父页面将顶部导航栏及左侧导航栏设置完毕，然后子页面在 content 部分填充
  • 两种方式跳转到指定页面
    • 浏览器：浏览器访问 /app/xxx ，会返回 static/tpl/app_dashboard_v1.html 的内容
    • state.go/ui-sref: 会返回指定 state 的页面，ui router 会同时将浏览器中的 URL 更新为对应 state 的 url 
!-- navbar -->
<div data-ng-include=" 'static/tpl/blocks/header.html' " class="app-header navbar">
</div>
<!-- / navbar -->

<!-- menu -->
<div data-ng-include=" 'static/tpl/blocks/aside.html' " class="app-aside hidden-xs __app.settings.asideColor__">
</div>
<!-- / menu -->

<!-- content -->
<div class="app-content">
    <div ui-butterbar></div>
        <a href class="off-screen-toggle hide" ui-toggle-class="off-screen" data-target=".app-aside" ></a>
    <div class="app-content-body fade-in-up" ui-view></div>
</div>
<!-- /content -->

<!-- footer -->
<div class="app-footer wrapper b-t bg-light">
    <span class="pull-right">__app.version__ <a href ui-scroll-to="app" class="m-l-sm text-muted"><i class="fa fa-long-arrow-up"></i></a></span>
    Meetbill-Pine &copy; 2019 Copyright.
</div>
<!-- / footer -->

<div data-ng-include=" 'static/tpl/blocks/settings.html' " class="settings panel panel-default">
</div>

抽象 state

如果一个 state, 没有通过链接找到它，那就可以把这个 state 设置为 abstract:true

.state('app', {
    abstract: true,
    url: '/app',
    templateUrl: layout
})

那么，当一个 state 设置为抽象，如果通过 ui-sref 或路由导航到该 state 会出现什么结果呢？

--- 会导航到默认路由上

$urlRouterProvider.otherwise('/app/xxx');

2.2 $urlRouteProvider

$urlRouteProvider.when(whenPath, toPath)
$urlRouterProvider.otherwise(path)
$urlRouteProvider.rule(handler)

2.3 $state.go

$state.go(to, [,toParams],[,options])

形参 to 是 string 类型，必须，使用"^"或"."表示相对路径；
形参 toParams 可空，类型是对象；
形参 options 可空，类型是对象，字段包括：location 为 bool 类型默认 true,inherit 为 bool 类型默认 true, relative 为对象默认 $state.$current,notify 为 bool 类型默认为 true, reload 为 bool 类型默认为 false

$state.go('photos.detail')
$state.go('^') 到上一级，比如从 photo.detail 到 photo
$state.go('^.list') 到相邻 state, 比如从 photo.detail 到 photo.list
$state.go('^.detail.comment') 到孙子级 state，比如从 photo.detail 到 photo.detial.comment

2.4 ui-sref 指令

ui-sref='stateName'
ui-sref='stateName({param:value, param:value})'

2.5 ui-sref-active 指令

指令 ui-serf-active 解决导航的选中状态的切换

<li ui-sref-active="active">
    <a ui-sref="app.ui.tree">
        <span>树控件</span></a>
</li>

active

static/tpl/blocks/aside.html 中使用了 static/js/directives/ui-nav.js 自定义指令

PS: 使用驼峰法来命名一个指令， uiNav, 但在使用它时需要以 - 分割，ui-nav

2.6 ui-view 指令

当作模板的容器，用来放置子模板

3 惰性加载

$ocLazyLoad

3.1 将 ocLazyLoad module 添加到你的应用中

static/js/app.js

angular.module('myApp',['oc.lazyLoad']);

3.2 配置 ocLazyLoad

static/js/config.lazyload.js

.config(['$ocLazyLoadProvider', function($ocLazyLoadProvider){
    $ocLazyLoadProvider.config({
        debug: true,
        events: true,
        modules: [
            {
                name: 'TestModule',
                files: ['test.js']
            }
        ]
    })
}])
  • debug: 用来开启 debug 模式。布尔值，默认是 false。当开启 debug 模式时，$ocLazyLoad 会打印出所有的错误到 console 控制台上。
  • events：当你动态加载了 module 的时候，$ocLazyLoad 会广播相应的事件。布尔值，默认为 false。
  • modules：用于定义你需要动态加载的模块。定义每个模块的名字需要唯一。
    • modules 必须要用数组的形式，其中 files 也必须以数组的形式存在，哪怕只需要加载一个文件

3.3 使用 ocLazyLoad

// 添加已经定义好的 module (上面配置的)
$ocLazyLoad.load('TestModule')
or
// 比如要惰性加载的是自定义的 controller
$ocLazyLoad.load("xxxxxxx/main.js");

备注：此处集成在 "config.router.js"

4 ui.router 传参

4.1 ui-sref、$state.go 的区别

ui-sref

ui-sref 一般使用在 <a>...</a>；
<a ui-sref="message-list">消息中心</a>

$state.go

$state.go('someState') 一般使用在 controller 里面；

.controller('firstCtrl', function($scope, $state) {
      $state.go('login');
 });

这两个本质上是一样的东西，我们看 ui-sref 的源码：

element.bind("click", function(e) {
    var button = e.which || e.button;
    if ( !(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target')) ) {

      var transition = $timeout(function() {
        // HERE we call $state.go inside of ui-sref
        $state.go(ref.state, params, options);
      });

ui-sref 最后调用的还是 $state.go() 方法

4.2 如何传递参数

4.2.1 定义参数

首先，需要在路由页面定义接受的参数

.state('app.applycheck_detail', {
    params:{"id":null},               // 添加此行，定义要接受的参数
    url: '/applycheck_list',
    templateUrl: 'static/tpl/applycheck/applycheck_detail.html',
    resolve: load(['toaster','ui.grid','ui.grid.resizeColumns','ui.grid.pagination','static/js/controllers/cluster/applycheck_detail.js'])
})

4.2.2 传参（两种方式）

html 之 ui-sref

ui-sref="app.applycheck_detail({id:__变量id__})"

js 之 $state.go()

$state.go("app.applycheck_detail",{id:__变量id__})

4.2.3 接受参数

.controller("TestCtrl",function($scope,$http,$stateParams)
        {
            //console.log($stateParams.id)
        }
)

5 常见错误

Could not resolve 'app.xxxx' from state 'app'

可以检查下 xxxx 是否在 $stateProvider 上进行配置过
⚠️ **GitHub.com Fallback** ⚠️