上一课的例子中，我们的模型数据是硬编码的，也就是说，我们的数据不是从服务器请求回来的。
这里，我们先讲解，如何从服务器获取数据：
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}
上一课的例子，我们只需要改写这个控制器构造函数就行了。
$http向Web服务器发起一个HTTP GET请求，获取phone/phones.json。AngularJS会自动检测这个应答是什么格式的，并且帮我们解析出来！
为了使用AngularJS的服务，你只需要在控制器的构造函数里面传入所需服务的名字。
当控制器构造的时候，AngularJS的依赖注入器会将这些服务注入到你的控制器中。
由于AngularJS是通过控制器构造函数的参数名字来推断依赖服务名称的。所以如果你要压缩PhoneListCtrl控制器的JS代码，它所有的参数也同时会被压缩，这时候依赖注入系统就不能正确的识别出服务了。
为了克服压缩引起的问题，只要在控制器函数里面给$inject属性赋值一个依赖服务标识符的数组，就像：
PhoneListCtrl.$inject = ['$scope', '$http'];
另一种方法也可以用来指定依赖列表并且避免压缩问题——使用Javascript数组方式构造控制器：把要注入的服务放到一个字符串数组（代表依赖的名字）里，数组最后一个元素是控制器的方法函数：
var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];
上面提到的两种方法都能和AngularJS可注入的任何函数完美协作，要选哪一种方式完全取决于你们项目的编程风格，建议使用数组方式。
然后，我们为手机列表的手机数据项添加缩略图以及链接：
[
{
...
"id": "motorola-defy-with-motoblur",
"imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
"name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
...
},
...
]
html改成这样：
...
<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>
...
为每条记录添加图片，只需要使用ngSrc指令代替<img>的src属性标签就可以了。因为如果我们用一个正常src属性来进行绑定（<img src="https://www.linuxidc.com/{{phone.imageUrl}}">），浏览器会把AngularJS的{{ 表达式 }}标记直接进行字面解释，这时会发起一个向非法url：:8000/app/{{phone.imageUrl}}的请求，因为浏览器载入页面时，同时也会请求载入图片。有了这个ngSrc指令，就会避免产生这种情况。
上面的应用只给我们的用户提供了一个简单的界面（一张所有手机的列表），并且所有的模板代码位于index.html文件中。
最后，我们增加一个能够显示我们列表中每一部手机详细信息的页面。
为了增加详细信息视图，我们可以拓展index.html来同时包含两个视图的模板代码，但是这样会很快给我们带来巨大的麻烦。相反，我们要把index.html模板转变成“布局模板”。这是我们应用所有视图的通用模板。其他的“局部布局模板”，根据当前的“路由”被填入，从而形成一个完整视图展示给用户。
AngularJS中的路由是通过$routeProvider来声明的，它是$route服务的提供者。这项服务使得控制器、视图模板与当前浏览器的URL可以轻易集成。它允许我们使用浏览器的历史(回退或者前进导航)和书签。
angular运行时，它会创建一个注入器，后面所有依赖注入的服务都会需要它。这个注入器自己并不知道$http和$route是干什么的，注入器唯一的职责是载入指定的服务模块，在这些模块中注册所有定义的服务提供者，并且当需要时给一个指定的函数注入服务。这些服务通过它们的提供者“懒惰式”（需要时才加载）实例化。
提供者提供服务实例并且对外提供API接口的对象，它可以被用来控制一个服务的创建和运行。对于$route服务来说，$routeProvider对外提供了API接口，通过API接口允许你为你的应用程序定义路由规则。
为了给我们的应用配置路由，我们需要给应用创建一个模块。
angular.module('phonecat', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
}]);