一,预期实现效果:
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)导入 lib 中的文件以及所有用到的 service 和 component 服务的文件.
<!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>
(2)ng-app="helloSolarSystem" 指明了从 helloSolarSystem 模块开始解析.
(3)定义视图
2. 配置路由 app.config.js
(1)模块名字:helloSolarSystem;
'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>'
})
}]);
(2)注入'peopleList', 'peopleDetail', 'hello','ui.router'模块.
(3)配置 stateProvider 服务的视图控制,例如第一个名为 helloState 的视图控制器:当 ui-sref == "helloState" 的时候,路由更新为 url 的值 #/helloState,并且中显示的内容为组件解析出的内容.
(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)
(1)在 getData 这个函数中,我们想要返回一个保存 people 信息的数组,但是由于使用 $http().then() 服务的时候,这是一个异步请求,我们并不知道请求什么时候结束,所以世界返回 people 数组是有问题的.我们注意到,$http().then() 是一个 Promise 对象,所以我们可以想到直接将这个对象返回,这样在就可以使用 "函数的结果. then(function(data))" 来得到异步请求拿来的数据 data.
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;
}
}]);
3. 实现 getStateParams.service(获取路由信息)
(1)这里的 getParams 函数返回的是路由信息的最后一个数据,也就是 people 的 id,这个 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];
}
}]);
4. 实现 hello 模块
5. 实现 peolpeList 模块:
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;
};
}
]
});
(1)这里的用来显示 peopleList 的子组件 pepleDetail
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>
6. 实现 peopleDetail 模块
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;
});
}
]
});
<li>名字: {{item.name}}</li>
peopleDetail.template.html
<ul ng-repeat="item in peopleDetails track by $index">
<li>介绍: {{item.intro}}</li>
7. 源码:
</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;
});
}
]
});
https://github.com/liyuan-meng/uiRouter-app
来源: https://www.cnblogs.com/Anita-meng/p/8254163.html