---
name: films
url: /films/:id?p=
controller: FilmsCtrl
---
这段代码告诉了我们三件事:
Films为该页面名称,在指向该页面的所有链接中可使用;
URL将有两个可选参数:id(根据我们的数据生成的影片ID)和p(所在电影列表中的页码数);
我们将使用自定义AngularJS控制器FilmsCtrl,而不是Foundation for Apps自动创建的默认空白控制器。
因为我们要使用自己的控制器,接下来就要在app.js里创建一个(控制器)。浏览下面的控制器,它将被用于电影列表
和单个影片页面。你能看到,该控制器保持追踪URL参数,定位我们所在的结果页面,从外部API里获取所需信息(是
电影列表还是单个影片的细节,取决于URL参数),并使用$scope变量将这些信息返回到页面视图里。等
angular.module声明关闭后,再把它添加到app.js中。
controller('FilmsCtrl',
["$scope", "$state", "$http",function($scope, $state, $http){
// Grab URL parameters - this is unique to FFA, not standard for
// AngularJS. Ensure $state is included in your dependencies list
// in the controller definition above.
$scope.id = ($state.params.id || '');
$scope.page = ($state.params.p || 1);
// If we're on the first page or page is set to default
if ($scope.page == 1) {
if ($scope.id != '') {
// We've got a URL parameter, so let's get the single entity's
// data from our data source
$http.get("http://swapi.co/api/"+'films'+"/"+$scope.id,
{cache: true })
.success(function(data) {
// If the request succeeds, assign our data to the 'film'
// variable, passed to our page through $scope
$scope['film'] = data;
})
} else {
// There is no ID, so we'll show a list of all films.
// We're on page 1, so the next page is 2.
$http.get("http://swapi.co/api/"+'films'+"/", { cache: true })
.success(function(data) {
$scope['films'] = data;
if (data['next']) $scope.nextPage = 2;
});
}
} else {
// Once again, there is no ID, so we'll show a list of all films.
// If there's a next page, let's add it. Otherwise just add the
// previous page button.
$http.get("http://swapi.co/api/"+'films'+"/?page="+$scope.page,
{ cache: true }).success(function(data) {
$scope['films'] = data;
if (data['next']) $scope.nextPage = 1*$scope.page + 1;
});
$scope.prevPage = 1*$scope.page - 1;
}
return $scope;
}]) // Ensure you don't end in a semicolon, because more
// actions are to follow.
保存完app.js后,你需要通过终端(Control+ C用来取消操作,然后再运行foundation-app watch)重启服务,以保证
应用程序包含该新模板(files.html)文件,而该文件中都创建了新控制器(app.js)。
就是这样,我们有了一个功能完整的控制器,它能从外部RESTful API资源中获取数据,将结果缓存至浏览器的
session中,并把数据返回到视图页面中。
再次打开films.html,开始构建可以访问的数据视图。首先增加展示电影列表的视图内容。我们可以访问所有添加到
$scope变量中的属性,无需加前缀$scope,如本例中的films、prevPage和nextPage。在模板现有内容下添加如下代
码: