夜鹰教程网-程序员的加油站
 当前位置:文章中心 >> Vue.js_ReactJs_AngularJs
ui-route实现多层嵌套路由
夜鹰教程网 来源:www.yyjcw.com 日期:2019-1-10 10:17:38
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>

<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


复制链接 网友评论 收藏本文 关闭此页
上一条:已经是第一条了  下一条: 使用自定义指令当ng-repeat加载完数据后…
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  热点推荐
Google搜索存在的的结果变量问题:…
做黑链可以很快的提高排名,但是也…
被alexa收录的网站如何修改自己在…
CPA广告 CPS广告 CPC广告 CPM广告…
如何获得大量优质外链
内容更新频率与搜索引擎关系 让它…
如何走出百度首页降权的阴影
新站一天被收录的经历
谈谈做交叉链接的经验心得
新站提前被百度收录需要注意的几点…
互联钱靠什么?
QQ赚钱方法解密
如何使新站1-3天内被百度收录
要怎样解决百度快照长时间不更新
百度、谷歌搜索引擎原理及新网站应…
  最近更新
ui-route实现多层嵌套路由
使用自定义指令当ng-repeat加载完…
如何学习AngularJS
Angular 事件
AngularJS 指令
对比四种给百度搜索引擎提交链接的…
网站原创内容过少可能导致AdSense…
户端的优化越来越受到关注
百度新闻源的采集收录标准是什么
SEO和SEM是目前最直接有效的方法
如何提交亚马逊分类目录
CPA广告 CPS广告 CPC广告 CPM广告…
月经贴:每次 PR 值更新就是站长们…
成功的SEO:如何才能正确分析竞争对…
SEO经验之谈:关键词用什么分割?…

关于我们 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3