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


Posted in Javascript onJanuary 10, 2018

本文介绍了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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
js计算精度问题小结
Apr 22 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 #jQuery
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 #Javascript
10个经典的网页鼠标特效代码
Jan 09 #Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 #Javascript
JavaScript实现多重继承的方法分析
Jan 09 #Javascript
webpack多入口文件页面打包配置详解
Jan 09 #Javascript
Vue项目组件化工程开发实践方案
Jan 09 #Javascript
You might like
php计算2个日期的差值函数分享
2015/02/02 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
python计算auc指标实例
2017/07/13 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
Python面向对象类的继承实例详解
2018/06/27 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
Python内置类型性能分析过程实例
2020/01/29 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
python 实现简易的记事本
2020/11/30 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
校园招聘策划书
2014/01/09 职场文书
办理护照介绍信
2014/01/16 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书