"use strict"; angular.module("getStateParams", ['ui.router']). factory("GetStateParams", ["$location", function ($location) { return { getParams: getParams }; function getParams() { var partUrlArr = $location.url().split("https://www.jb51.net/"); 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; }); } ] });