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 相关文章推荐
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
浅析Node.js非对称加密方法
Jan 29 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
node.js +mongdb实现登录功能
Jun 18 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使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
js中this对象用法分析
2018/01/05 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
EM算法的python实现的方法步骤
2018/01/02 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
python两个list[]相加的实现方法
2020/09/23 Python
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
小学生获奖感言范文
2014/02/02 职场文书
企业员工培训感言
2014/02/26 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
受资助学生感谢信
2015/01/21 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
Python进度条的使用
2021/05/17 Python