AngularJS的应用（4）

我们已经可以让AngularJS app在index.html中呈现数据。如果需要有更多类数据需要显示的时候该怎么办呢？一个较好的方法是使用多模板基于用户浏览的URL呈现不同条数据。我们可以用Angular application routes来实现。

在index.html添加<div ng-view></div>.在app.js中，在angular.module 的下方，添加route， 如下所示：

var app = angular.module('GalleryApp', ['ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            controller: "HomeController",
            templateUrl: 'views/home.html'
        })
        .otherwise({
            redirectTo: '/'
        });
});

在app.config()方法里面， 我们用Angular的$routeProvider来定义application的route。用.when()来映射URL/到controllerHomeController和template home.html。 HomeController 使用service js/services/photos.js来获取照片矩阵并保存到$scope.photos。 home.html使用ng-repeat 来循环并呈现照片矩阵中的每一项。否则如果一个用户偶然访问了一个URL而不是/， 我们重新指向/。现在每当用户访问/， 网页就会将home.html注入到<div ng-view></div> ，用户就可以在index.html浏览到了。

现在我们再加入一段when, 代码如下：

app.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            controller: "HomeController",
            templateUrl: 'views/home.html'
        })
        .when('/photos/:id', {
            controller: "PhotoController",
            templateUrl: 'views/photo.html'
        })
        .otherwise({
            redirectTo: '/'
        });
});

这是，我们映射了一个URL到PhotoController和photo.html。我们增加了一个变量部分id 到URL中，比如：/photos/:id。在PhotoController 中，我们使用了Angular的$routeParams来通过$routeParams.id从URL中检索id。注意：我们把$routeParams和service photos同时注入到PhotoController依赖矩阵（dependency array）使它们可以在controller内使用。
为了获取一个单独的photo，我们首先使用services photos来从server获取照片矩阵，之后用$routeParams.id访问特定的照片。
任何添加到$scope中的特性都可以被呈现。这意味着在photo.html里面，我们可以用expression来表现细节。当你点击link的时候，app并不是全部reload。只有在<div ng-view></div>里面的部分被加载。