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 相关文章推荐
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
Vue异步加载about组件
Oct 31 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
vue 导出文件,携带请求头token操作
Sep 10 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 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 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
PHP原理之异常机制深入分析
2010/08/08 PHP
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
JS target与currentTarget区别说明
2011/08/28 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
python脚本内运行linux命令的方法
2015/07/02 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
C语言基础笔试题
2013/04/27 面试题
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
行政工作个人的自我评价
2014/02/13 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
六年级情感作文之500字
2019/10/23 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫