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 相关文章推荐
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
JavaScript中var关键字的使用详解
Aug 14 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
原生JS实现留言板
Mar 26 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
从0搭建vue-cli4脚手架
Jun 17 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
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实现文件上传二法
2006/10/09 PHP
用PHP产生动态的影像图
2006/10/09 PHP
apache php模块整合操作指南
2012/11/16 PHP
基于header的一些常用指令详解
2013/06/06 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
ExtJS 入门
2010/10/29 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
python实现FTP服务器服务的方法
2017/04/11 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
解决c++调用python中文乱码问题
2020/07/29 Python
python文件排序的方法总结
2020/09/13 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
求职自荐信的格式
2014/04/07 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
公司委托书格式范文
2014/10/09 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
认识实习感想
2015/08/10 职场文书