Page 426 - AngularJS权威教程

406 第 31 章 构建 Angular Chrome 应用

31.7 主模块

接下来我们将在js/app.js文件中构建这个完整的Angular应用程序。对于生产版本的应用，你
可能希望将这些功能分割到多个JavaScript文件中，然后使用Grunt这类工具压缩和合并这些文件。

这个应用叫做myApp，因此要创建一个同名的Angular模块：

angular.module('myApp', [])
在这一步之后，这个应用运行在浏览器中就不会有任何问题了。

31.8 构建主页

接下来开始构建应用的主页部分。在这部分，将致力于整合能够让应用程序运行起来的组件。
在下个部分，将会建立一个多路由的应用程序。

构建时钟

Presently的主要特征是位于应用程序顶端并每秒都更新的大时钟。在Angular中，建立这个时
钟相当简单。
从构建负责管理主屏幕的MainController开始。在这个MainController控制器内，只需设
置一个每秒运转一次，同时更新一个局部作用域变量的延时。

angular.module('myApp', [])
.controller('MainController', function($scope, $timeout) {
// 构建date对象
$scope.date = {};

// 更新函数
var updateTime = function() {
$scope.date.raw = new Date();
$timeout(updateTime, 1000);
};

// 启动更新函数
updateTime();
});
MainController内的updateTime()函数每秒都会运行，以便更新$scope.date.raw时间戳，
同时更新视图。
为了看到加载到Chrome应用视图中的所有信息，还需要给文档绑定这个数据。可以使用标
准的{{ }}模板语法来设置这个绑定：

<div class="container">
<div ng-controller="MainController">
{{ date.raw }}
</div>
</div>
当返回到浏览器中并刷新它时，应该会看到一个未格式化的日期对象显示在视图中。