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

本文介绍了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. 构建项目:

如图所示: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

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

(0)

相关推荐

  • AngularJS ui-router (嵌套路由)实例

    我们都知道,如果使用原生路由的话,Angular的视图是通过ng-view这个指令进行加载的.比如这样:<div ng-view></div>.一般,我们都会把这个指令放在index.html这个文件里面,然后,通过控制器来加载相应的模板视图.比如这样: var bookStoreApp = angular.module('bookStoreApp', [ 'ngRoute', 'ngAnimate', 'bookStoreCtrls', ]); bookStoreApp.conf

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

    本文实例讲述了AngularJS基于ui-route实现深层路由的方法.分享给大家供大家参考,具体如下: 1.前面我们通过了简单的ng-route实现了简单层次的路由,对于深层次的路由,我们可以通过ui-route来实现. (1)ng-route的局限性:一个页面无法嵌套多个视图,也就是说一个页面只能有包含一个页面一个控制器的切换. (2)ui-route的改进:在具有富客户端的单页应用中,要在一个页面中呈现不同的视图,我们可以通过ui-route实现路由的嵌套. 2 . ui-route的使用

  • angularjs ui-router中路由的二级嵌套

    关于ui-router中嵌套路由中的问题 1.首先我们的页面层次为 其中Main.html是我们的主页,我们要在main.html中对路由进行统一的管理. main.html页面中有一个ui-view在这里将填充PageTab.html,同时被填充的PageTab.html中也有一个ui-view 这样就实现了嵌套路由. 最终效果: 当我们点击Page-1时出现的是Page1中的内容,同理点击Page-2. 下面是实际的代码: Main.html <!DOCTYPE html> <htm

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

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

  • vue多层嵌套路由实例分析

    本文实例讲述了vue多层嵌套路由.分享给大家供大家参考,具体如下: 多层嵌套: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></scri

  • 探讨AngularJs中ui.route的简单应用

    html页面代码 <body ng-app="myApp"> <div ui-view></div> <div ui-view="login"></div> <div ui-view="enroll"></div> </body> 需要引用的ui.router.js文件 <script src="angular-ui-router.js

  • Vue三层嵌套路由的示例代码

    Vue嵌套路由: 实现效果(路由三层嵌套,点击一级tab显示二级tab效果,二级tab点击切换对应内容,不在tab区域里的内容,切换时不重复渲染): Demo访问时路径:http://IP:端口/#/routers/ 1.建立案例文件夹 page/routers/ 1 routers/index.vue <template> <div> <router-link :to="{name: 'rindex_rhome'}" class="rlink&

  • vue嵌套路由与404重定向实现方法分析

    本文实例讲述了vue嵌套路由与404重定向实现方法.分享给大家供大家参考,具体如下: 第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思.  比如在vue中,我们如果不使用嵌套路由,那么只有一个<router-view>,但是如果使用,那么在一个组件中就还有<router-view>,这也就构成了嵌套. 为什么要使用嵌套路由? 就比如在一个页面中, 在页面的上半部分,有三个按钮,而下半部分是根据点击不同的

  • 详解vue route介绍、基本使用、嵌套路由

    目录 前言 一.介绍.安装 1.定义 2.安装 二.基本使用(代码后赋) 三.嵌套路由 1.布局逻辑 2.效果展示 3.代码 四.注意 前言 想要学习完整内容请关注主页的专栏————>Vue学习 本次的代码段是结合体,被我分开发文,我以在看代码段时,已经截图展示,所看部分 一.介绍.安装 1.定义 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用. 路由:route 一组key-v的对应关系(路径的改变对应的组件进行切换) 路由器:route

  • AngularJS 使用 UI Router 实现表单向导

    我们看到这项技术已经应用在了许多的网页上.比如购物车,注册表单,入职流程以及许多多步表单,让用户更容易在线填写表单. 下面我们将构建它: 使用UI Router,它能内嵌状态,为每个状态显示不同的view,我们能让多步表单变得相当的容易. 为了快速的理解UI Router是怎样工作的,看我们的文章:AngularJS使用UI-Router路由 让我们言归正传,开始创建我们的最棒的表单! 创建工程 创建工程有个模板结构. 需要个 布局文件 , 每个表单的视图文件, 格式文件, 以及JavaScri

  • vue.js Router中嵌套路由的实用示例

    前言 随着 Vue.js 单页应用(SPA)变得相当复杂,你开始需要 Vue 路由以及嵌套路由.嵌套路由允许更复杂的用户界面以及相互嵌套的组件.让我们创建一个相对简单的用例,来展示 Vue Router 中嵌套路由的实用性. 用 Vue CLI 进行设置 如果尚未安装,请运行以下命令全局安装 Vue CLI: $ npm install -g @vue/cli 或者 $ yarn global add @vue/cli 现在你能从命令行运行 vue 命令了.让我们创建一个名为 alligator

  • 详解angular2实现ng2-router 路由和嵌套路由

    实现ng2-router路由,嵌套路由 首先配置angular2的时候router模块已经下载,只需要引入即可 import {RouterModule, Routes} from "@angular/router"; 我们要创建一个嵌套路由,所以需要创建以下文件 index.html app.module.ts app.component.ts home.component.ts list.component.ts list-one.component.ts list-two.com

随机推荐