angular1使用ui.router跳转传参

最新推荐文章于 2021-05-17 16:12:54 发布

原创最新推荐文章于 2021-05-17 16:12:54 发布 · 1.3k 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍如何在AngularJS应用中使用UI Router进行高级路由配置，包括路由继承、参数传递等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先在模块初始化的时候注入依赖的模块'ui.router'.

在.config(function($stateProvider, $urlRouterProvider){})中注入这两个需要用到的ui.router模块中的服务

$urlRouterProvider.otherwise('/login');

$stateProvider
    .state('login', {
        url: '/login',
        templateUrl: 'login.html',
        controller: '控制器'
    })

在这里写各种路由

ui.router支持路由的继承：

若很多页面都使用的同一个页面的结构，

那么可以将其作为基页面：设置abstract: true

.state('basePage', {
    abstract: true,
    url: '/basePage',
    templateUrl: 模板路径,
    controller: '控制器'
})

base页面如下：

<div id="wrapper">
    <div ng-include="需要包含的模板框架"></div>
    <div id="page-wrapper" class="gray-bg">
        <div ng-include="需要包含的模板框架'"></div>

	在这里真正的引入子类的路由路径模板
        <div class="content-view" ui-view></div>
        <div ng-include="需要包含的模板框架"></div>
    </div>
</div>

子类页面路由写法：

.state('basePage.page1', {
    url: '/page1',
    templateUrl: 模板路径,
    controller: '控制器'
})

关于跳转传参知道两种写法：

1. 直接加到url中:

/page1/:param1/:param2

2. 加到对象当中：

params: {'param1': null, 'param2': null}

在对应的控制器中都可以通过

$stateParams.param1来获取参数