AngularJS使用ui-route实现多层嵌套路由的示例

程序员文章站 2022-04-29 12:01:59

本文介绍了angularjs使用ui-route实现多层嵌套路由的示例，分享给大家，具体如下：一、预期实现效果： https://liyuan-meng.github...

本文介绍了angularjs使用ui-route实现多层嵌套路由的示例，分享给大家，具体如下：

一、预期实现效果：

https://liyuan-meng.github.io/uirouter-app/index.html

（项目地址：https://github.com/liyuan-meng/uirouter-app）

二、分析题目要求，给出依赖关系，构建项目

1. service:

（1）根据条件查询people数据checkpeople.service，不给出条件则查询所有。

（2）得到路由信息getstateparams.service。

2. components:

（1）hello模块：点击button按钮更改内容。

（2）peolplelist模块：显示people列表，点击people显示people详情。依赖于checkpeople.service模块。

（3）peopledetail模块：显示people详情，依赖于checkpeople.service模块和getstateparams.service模块。

3. 构建项目：

AngularJS使用ui-route实现多层嵌套路由的示例

如图所示：component目录用来保存所有服务模块和业务模块，lib目录保存外部引用（我是用的是angular.js1.5.8和ui-route0.2.18），app.config.js文件用来配置路由，index.html则作为入口文件。

三、实现这个例子

1. 首页index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>title</title>
  <script src="./lib/angular.js"></script>
  <script src="./lib/angular-ui-route.js"></script>
  <script src="./app.config.js"></script>
  <script src="./components/core/people/checkpeople.service.js"></script>
  <script src="./components/core/people/getstateparams.service.js"></script>
  <script src="./components/hello/hello.component.js"></script>
  <script src="./components/people-list/people-list.component.js"></script>
  <script src="./components/people-detail/people-detail.component.js"></script>
</head>
<body ng-app="hellosolarsystem">
<div>
  <a ui-sref="hellostate">hello</a>
  <a ui-sref="aboutstate">about</a>
  <a ui-sref="peoplestate">people</a>
</div>

<ui-view></ui-view>

</body>
</html>

（1）导入lib中的文件以及所有用到的service和component服务的文件。

（2）ng-app="hellosolarsystem"指明了从hellosolarsystem模块开始解析。

（3）定义视图<ui-view></ui-view>

2. 配置路由app.config.js

'use strict';

angular.module("hellosolarsystem", ['peoplelist', 'peopledetail', 'hello','ui.router']).

  config(['$stateprovider', function ($stateprovider) {

    $stateprovider.state('hellostate', {
      url: '/hellostate',
      template:'<hello></hello>'

    }).state('aboutstate', {
      url: '/about',
      template: '<h4>its the ui-router hello solar system app!</h4>'

    }).state('peoplestate', {
      url: '/peoplelist',
      template:'<people-list></people-list>'

    }).state('peoplestate.details', {
      url:'/detail/:id',
      template: '<people-detail></people-detail>'
    })
  }
]);

（1）模块名字：hellosolarsystem；

（2）注入'peoplelist', 'peopledetail', 'hello','ui.router'模块。

（3）配置stateprovider服务的视图控制，例如第一个名为hellostate的视图控制器：当ui-sref == "hellostate"的时候，路由更新为url的值#/hellostate，并且<ui-view></ui-view>中显示的内容为<hello></hello>组件解析出的内容。

（4）嵌套路由的实现：名为peoplestate的视图控制器是父路由。名为peoplestate.details的视图控制器是子路由。这是一种相对路由方式，父路由将匹配.../index.html#/peoplestate/，子路由将匹配.../index.html#/peoplestate/detail/x（x是/detail/:id中的id的值）。如果改成绝对路由的形式，只需要写成url:'^/detail/:id',这时子路由将匹配.../index.html#/detail/x（x是/detail/:id中的id的值）。

4. 实现checkpeople.service（根据条件查找people）

checkpeople.sercice.js

'use strict';

//根据条件（参数）查找信息。
angular.module('people.checkpeople', ['ui.router']).
  factory('checkpeople', ['$http', function ($http) {
    return {
      getdata: getdata
    };
    function getdata(filed) {
      var people;
      var promise = $http({
        method: 'get',
        url: './data/people.json'
      }).then(function (response) {
        if (filed) {
          people = response.data.filter(function (value) {
            if (number(value.id) === number(filed)) {
              return value;
            }
          })
        } else {
          people = response.data;
        }
        return people;
      });
      return promise;
    }
  }]);

（1）在getdata这个函数中，我们想要返回一个保存people信息的数组，但是由于使用$http().then()服务的时候，这是一个异步请求，我们并不知道请求什么时候结束，所以世界返回people数组是有问题的。我们注意到，$http().then()是一个promise对象，所以我们可以想到直接将这个对象返回，这样在就可以使用"函数的结果.then(function(data))"来得到异步请求拿来的数据data。

3. 实现getstateparams.service（获取路由信息）

getstatepatams.service.js

"use strict";

angular.module("getstateparams", ['ui.router']).
  factory("getstateparams", ["$location", function ($location) {
    return {
      getparams: getparams
    };
    function getparams() {
      var parturlarr = $location.url().split("/");
      return parturlarr[parturlarr.length-1];
    }
}]);

（1）这里的getparams函数返回的是路由信息的最后一个数据，也就是people的id，这个service有些特殊，不够通用，可能还需要优化一下会更加合理。不过并不影响我们的需求。

4. 实现hello模块

hello.template.html

<div>
  <div ng-hide="hidefirstcontent">hello solar sytem!</div>
  <div ng-hide="!hidefirstcontent">whats up solar sytem!</div>
  <button ng-click="ctlbutton()">click</button>
</div>

hello.component.js

'use strict';

angular.module("hello", [])
  .component('hello', {
    templateurl: './components/hello/hello.template.html',
    controller: ["$scope", 
      function hellocontroller($scope) {
        $scope.hidefirstcontent = false;
        $scope.ctlbutton = function () {
          this.hidefirstcontent = !this.hidefirstcontent;
        };
      }
    ]
  });

5. 实现peolpelist模块：

peoplelist.template.html

<div>
  <ul>
    <a ng-repeat="item in people" ui-sref="peoplestate.details({id:item.id})">
      <li>{{item.name}}</li>
    </a>
  </ul>
  <ui-view></ui-view>
</div>

（1）这里的<ui-view></ui-view>用来显示peoplelist的子组件pepledetail

peoplelist.component.js

'use strict';

angular.module("peoplelist", ['people.checkpeople'])
  .component('peoplelist', {
    templateurl: './components/people-list/people-list.template.html',
    controller: ['checkpeople','$scope',
      function peoplelistcontroller(checkpeople, $scope) {
        $scope.people = [];
        checkpeople.getdata().then(function(data){
          $scope.people = data;
        });
      }
    ]
  });

6. 实现peopledetail模块

peopledetail.template.html

<ul ng-repeat="item in peopledetails track by $index">
  <li>名字： {{item.name}}</li>
  <li>介绍： {{item.intro}}</li>
</ul>

peopledetail.component.js

'use strict';

angular.module("peopledetail", ['people.checkpeople', 'getstateparams'])
  .component('peopledetail', {
    templateurl: './components/people-detail/people-detail.template.html',
    controller: ['checkpeople', 'getstateparams', '$scope',
      function peopledetailcontroller(checkpeople, getstateparams, $scope) {
        $scope.peopledetails = [];
        checkpeople.getdata(getstateparams.getparams()).then(function(data){
          $scope.peopledetails = data;
        });
      }
    ]
  });

7.源码：https://github.com/liyuan-meng/uirouter-app

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： laravel技巧之查询构造器Query Builder叠加链式调用的方法

下一篇： PHP实现的栈数据结构示例【入栈、出栈、遍历栈】

AngularJS使用ui-route实现多层嵌套路由的示例

AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】

AngularJS基于ui-route实现深层路由的方法【路由嵌套】

使用AngularJS来实现HTML页面嵌套的方法