angularjs 路由ui-router详解——子路由，动态路由（三）_angular动态路由

问题描述

由于 ionic 1.x 是使用的 ui-router，因此我这里也是重点学习了ui-router

文章参考

1. 深究AngularJS——ui-router详解

快速使用 ui-router

1. 引入angularjs 和 ui-router 库

<script src="../public/js/angular.min.js"></script>
<script src="../public/js/angular-ui-router.min.js"></script>
1
2

2. 将ui-router库作为当前模块启动的依赖

//定义模板，并注入ui-router
var app = angular.module('myApp', ['ui.router'])
1
2

3. 在html中添加<ui-view>作为占位符

<div ng-app="myApp">
	<div ui-view></div>
</div>
1
2
3

4. 配置路由信息

//定义模板，并注入ui-router
var app = angular.module('myApp', ['ui.router'])
//定义路由----对服务进行参数初始化，这里配stateProvider服务的视图控制
app.config([
  '$stateProvider', '$urlRouterProvider',
  function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/students");  //这条是相当于报错的时候跳转
    $stateProvider
      .state('login', {
        url: '/login',
        // template: './module/main/mainTemplate.html',
        templateUrl: './module/login/loginTemplate.html',
        controller: 'LoginController'
      })
      .state('main', {
        url: '/main',
        // template: './module/main/mainTemplate.html',
        templateUrl: './module/main/mainTemplate.html',
        controller: 'MainController'
      })
  },
])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

路由嵌套

应用场景

我们在经常在页面中发现，其中页面某个部分不会发生变化，当地址变化，只是其中某个部分发生变化，像一个模板一样，例如“后台管理”的典型页面，左边是菜单，右边是内容

如何定义嵌套路由

1. 在父state中定义一个子state

//定义模板，并注入ui-router
var app = angular.module('myApp', ['ui.router'])
//定义路由----对服务进行参数初始化，这里配stateProvider服务的视图控制
app.config([
  '$stateProvider',
  '$urlRouterProvider',
  function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/login') //这条是相当于报错的时候跳转
    $stateProvider
      .state('login', {
        url: '/login',
        // template: './module/main/mainTemplate.html',
        templateUrl: './module/login/loginTemplate.html',
        controller: 'LoginController',
      })
      .state('main', {
        url: '/main',
        // template: './module/main/mainTemplate.html',
        templateUrl: './module/main/mainTemplate.html',
        controller: 'MainController',
      })
      .state('main.students', {
        url: '/students',
        templateUrl: './module/main/students/studentsTemplate.html',
        controller: 'studentsController',
      })
  },
])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

‘main.students’ 是 ‘main’ 的子状态
'main’将匹配…/index.html#/main；
'main.students’将匹配…/index.html#/students。

2. 在父页面中再次添加 <ui-view> 作为子页面的占位符

<div>
  <div>
    mainTemplate --- {{firstName}} --- {{lastName}}
  </div>
  <div>
    <a ui-sref="login">login</a>
    <a ui-sref="main.students">main.student</a>
  </div>
  <div ng-click="myClickAction('huangbiao')">
    <button>点击按钮事件</button>
  </div>

  <div>{{ '' | NodataFilter}}</div>
  <div ui-view></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

动态路由(restful传递参数)

应用场景

例如我们查看新闻详情，除了新闻内容不一样，所有的布局样式完全一样，因此我们使用动态路由修改

如何使用动态路由

在url配置中，使用:变量名 或者 {变量名}的方式定义动态参数

url: ‘/index/:id’,和url: ‘/index/{id}’,两种形式传参

//定义模板，并注入ui-router
var app = angular.module('myApp', ['ui.router'])
//定义路由----对服务进行参数初始化，这里配stateProvider服务的视图控制
app.config([
  '$stateProvider',
  '$urlRouterProvider',
  function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/login') //这条是相当于报错的时候跳转
    $stateProvider
      .state('login', {
        url: '/login',
        // template: './module/main/mainTemplate.html',
        templateUrl: './module/login/loginTemplate.html',
        controller: 'LoginController',
      })
      .state('main.myinfo', {
        url: '/myinfo/:username/{age}',
        templateUrl: './module/main/myinfo/myinfoTemplate.html',
        controller: 'myinfoController'
      })
  },
])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2. 使用$state.go跳转页面并传递参数

app.controller('LoginController', ['$scope', '$state', function($scope, $state) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";

  $scope.goHomePage = function () {
    console.log(this === $scope)
    debugger
    console.log($state)
    var paramObj = {
      username: 'huangbiao',
      age: 18
    }
    debugger
    $state.go('main.myinfo', paramObj)  // 根据路由名字，跳转到对应的路由界面
  }
}]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这里的参数的key值一定要与前面配置的url的变量保持一致，否则无法获取参数

3. 或者使用ui-sref传递参数

<a ui-sref="main.myinfo({
  username: 'huangbiao',
  age: 18
})">传递参数跳转</a>
1
2
3
4

4. 使用$stateParams获取参数值

app.controller('myinfoController', [
  '$scope', '$state', '$stateParams', '$http',
  function ($scope, $state, $stateParams, $http) {
    console.log($stateParams)
    console.log($state)
  },
])
1
2
3
4
5
6
7

生命周期函数

在路由配置中添加 onEnter 和 onExit

1. onEnter：进入页面触发的方法
2. onExit：离开页面触发的方法

//定义模板，并注入ui-router
var app = angular.module('myApp', ['ui.router'])
//定义路由----对服务进行参数初始化，这里配stateProvider服务的视图控制
app.config([
  '$stateProvider',
  '$urlRouterProvider',
  function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/login') //这条是相当于报错的时候跳转
    $stateProvider
      .state('login', {
        url: '/login',
        // template: './module/main/mainTemplate.html',
        templateUrl: './module/login/loginTemplate.html',
        controller: 'LoginController',
      })
      .state('main.myinfo', {
        url: '/myinfo/:username/{age}',
        templateUrl: './module/main/myinfo/myinfoTemplate.html',
        controller: 'myinfoController',
        //进入页面触发的方法
        onEnter: function () {
          console.log('main.myinfo onEnter')
          debugger
        },
        //离开页面触发的方法
        onExit: function () {
          console.log('main.myinfo onExit')
          debugger
        },
      })
  },
])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

ng-click 方法中的this指向的$scope

在点击事件的方法中， this 和 $scope 是同一个对象

$scope.addAddress = function () {
	console.log(this === $scope)
	alert(this.addAddress);
	$state.go('setting_add_address');
};
1
2
3
4
5