一、预期实现效果：

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="./lib/angular.js"></script>
  7.     <script src="./lib/angular-ui-route.js"></script>
  8.     <script src="./app.config.js"></script>
  9.     <script src="./components/core/people/checkPeople.service.js"></script>
  10.     <script src="./components/core/people/getStateParams.service.js"></script>
  11.     <script src="./components/hello/hello.component.js"></script>
  12.     <script src="./components/people-list/people-list.component.js"></script>
  13.     <script src="./components/people-detail/people-detail.component.js"></script>
  14. </head>
  15. <body ng-app="helloSolarSystem">
  16. <div>
  17.     <a ui-sref="helloState">Hello</a>
  18.     <a ui-sref="aboutState">About</a>
  19.     <a ui-sref="peopleState">People</a>
  20. </div>
  21.  
  22. <ui-view></ui-view>
  23.  
  24. </body>
  25. </html>

（1）导入lib中的文件以及所有用到的service和component服务的文件。

（2）ng-app=”helloSolarSystem”指明了从helloSolarSystem模块开始解析。

（3）定义视图<ui-view></ui-view>

2. 配置路由app.config.js

  1. 'use strict';
  3. angular.module("helloSolarSystem", ['peopleList', 'peopleDetail', 'hello','ui.router']).
  5.     config(['$stateProvider', function ($stateProvider) {
  7.         $stateProvider.state('helloState', {
  8.             url: '/helloState',
  9.             template:'<hello></hello>'
  11.         }).state('aboutState', {
  12.             url: '/about',
  13.             template: '<h4>Its the UI-Router Hello Solar System app!</h4>'
  15.         }).state('peopleState', {
  16.             url: '/peopleList',
  17.             template:'<people-list></people-list>'
  19.         }).state('peopleState.details', {
  20.             url:'/detail/:id',
  21.             template: '<people-detail></people-detail>'
  22.         })
  23.     }
  24. ]);

（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

  1. 'use strict';
  3. //根据条件（参数）查找信息。
  4. angular.module('people.checkPeople', ['ui.router']).
  5.     factory('CheckPeople', ['$http', function ($http) {
  6.         return {
  7.             getData: getData
  8.         };
  9.         function getData(filed) {
  10.             var people;
  11.             var promise =  $http({
  12.                 method: 'GET',
  13.                 url: './data/people.json'
  14.             }).then(function (response) {
  15.                 if (filed) {
  16.                     people = response.data.filter(function (value) {
  17.                         if (Number(value.id) === Number(filed)) {
  18.                             return value;
  19.                         }
  20.                     })
  21.                 } else {
  22.                     people = response.data;
  23.                 }
  24.                 return people;
  25.             });
  26.             return promise;
  27.         }
  28.     }]);

（1）在getData这个函数中，我们想要返回一个保存people信息的数组，但是由于使用$http().then()服务的时候，这是一个异步请求，我们并不知道请求什么时候结束，所以世界返回people数组是有问题的。我们注意到，$http().then()是一个Promise对象，所以我们可以想到直接将这个对象返回，这样在就可以使用”函数的结果.then(function(data))”来得到异步请求拿来的数据data。

3. 实现getStateParams.service（获取路由信息）

getStatePatams.service.js

  1. "use strict";
  3. angular.module("getStateParams", ['ui.router']).
  4.     factory("GetStateParams", ["$location", function ($location) {
  5.         return {
  6.             getParams: getParams
  7.         };
  8.         function getParams() {
  9.             var partUrlArr = $location.url().split("/");
  10.             return partUrlArr[partUrlArr.length-1];
  11.         }
  12. }]);

（1）这里的getParams函数返回的是路由信息的最后一个数据，也就是people的id，这个service有些特殊，不够通用，可能还需要优化一下会更加合理。不过并不影响我们的需求。

4. 实现hello模块

hello.template.html

  1. <div>
  2.     <div ng-hide="hideFirstContent">hello solar sytem!</div>
  3.     <div ng-hide="!hideFirstContent">whats up solar sytem!</div>
  4.     <button ng-click="ctlButton()">click</button>
  5. </div>

hello.component.js

  1. 'use strict';
  3. angular.module("hello", [])
  4.     .component('hello', {
  5.         templateUrl: './components/hello/hello.template.html',
  6.         controller: ["$scope", 
  7.             function HelloController($scope) {
  8.                 $scope.hideFirstContent = false;
  9.                 $scope.ctlButton = function () {
  10.                     this.hideFirstContent = !this.hideFirstContent;
  11.                 };
  12.             }
  13.         ]
  14.     });

5. 实现peolpeList模块：

peopleList.template.html

  1. <div>
  2.     <ul>
  3.         <a ng-repeat="item in people" ui-sref="peopleState.details({id:item.id})">
  4.             <li>{{item.name}}</li>
  5.         </a>
  6.     </ul>
  7.     <ui-view></ui-view>
  8. </div>

（1）这里的<ui-view></ui-view>用来显示peopleList的子组件pepleDetail

peopleList.component.js

  1. 'use strict';
  3. angular.module("peopleList", ['people.checkPeople'])
  4.     .component('peopleList', {
  5.         templateUrl: './components/people-list/people-list.template.html',
  6.         controller: ['CheckPeople','$scope',
  7.             function PeopleListController(CheckPeople, $scope) {
  8.                 $scope.people = [];
  9.                 CheckPeople.getData().then(function(data){
  10.                     $scope.people = data;
  11.                 });
  12.             }
  13.         ]
  14.     });

6. 实现peopleDetail模块

peopleDetail.template.html

  1. <ul ng-repeat="item in peopleDetails track by $index">
  2.     <li>名字： {{item.name}}</li>
  3.     <li>介绍： {{item.intro}}</li>
  4. </ul>

peopleDetail.component.js

  1. 'use strict';
  3. angular.module("peopleDetail", ['people.checkPeople', 'getStateParams'])
  4.     .component('peopleDetail', {
  5.         templateUrl: './components/people-detail/people-detail.template.html',
  6.         controller: ['CheckPeople', 'GetStateParams', '$scope',
  7.             function peopleDetailController(CheckPeople, GetStateParams, $scope) {
  8.                 $scope.peopleDetails = [];
  9.                 CheckPeople.getData(GetStateParams.getParams()).then(function(data){
  10.                     $scope.peopleDetails = data;
  11.                 });
  12.             }
  13.         ]
  14.     });

7.源码：

https://github.com/liyuan-meng/uiRouter-app

 

版权声明：本文为Anita-meng原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/Anita-meng/p/8254163.html