我们把这个模块定义为phonecat，并且通过使用config方法，我们把$routeProvider注入到我们的配置函数中，并且使用$routeProvider.when方法来定义我们的路由规则。
我们的路由规则定义如下：
（1）当URL 映射段为/phones时，手机列表视图会被显示出来。为了构造这个视图，AngularJS会使用phone-list.html模板和PhoneListCtrl控制器。
（2）当URL 映射段为/phone/:phoneId时，手机详细信息视图被显示出来。这里:phoneId是URL的变量部分。为了构造手机详细视图，AngularJS会使用phone-detail.html模板和PhoneDetailCtrl控制器。
（3）otherwise({redirectTo: '/phones'})语句使得当浏览器地址不能匹配我们任何一个路由规则时，触发重定向到/phones。
我们重用之前创造过的PhoneListCtrl控制器，同时我们为手机详细视图添加一个新的PhoneDetailCtrl控制器。
为了让我们新创建的模块运行起来，我们需要在ngApp指令的值上指明模块的名字：
<!doctype html>
<html lang="en" ng-app="phonecat">
...
</html>
新的PhoneDetailCtrl控制器：
function PhoneDetailCtrl($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}
注意到在第二条路由声明中:phoneId参数的使用。所有以:符号声明的变量（此处变量为phones）都会被提取，然后存放在$routeParams对象中。
$route服务通常和ngView指令一起使用。ngView指令的角色是为当前路由把对应的视图模板载入到布局模板中。
<html lang="en" ng-app="phonecat">
<head>
...
<script src="https://www.linuxidc.com/lib/angular/angular.js"></script>
...
</head>
<body>
<div ng-view>
</div>
</body>
</html>
注意，我们把index.html模板里面大部分代码移除，我们只放置了一个<div>容器，这个<div>具有ng-view属性。我们删除掉的代码现在被放置在phone-list.html模板中：
<div>
<div>
<div>
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<div>
<ul>
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
<a href="#/phones/{{phone.id}}"><img ng-src="https://www.linuxidc.com/{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
同时我们为手机详细信息视图添加一个占位模板。
TBD: detail view for {{phoneId}}
大家注意到我们上面的两个模板中没有添加PhoneListCtrl或PhoneDetailCtrl控制器属性！
这样就实现了一个基于angular的多视图的应用程序。
希望你喜欢，并分享我的工作~带你走近AngularJS系列：
在 AngularJS 应用中通过 JSON 文件来设置状态
AngularJS 之 Factory vs Service vs Provider