angularjs 构建主页 内置过滤器、日期的格式化
从构建负责管理主屏幕的 MainController 开始。在这个 MainController 控制器内,只需设
置一个每秒运转一次,同时更新一个局部作用域变量的延时
1 angular.module('myApp', []) 2 .controller('MainController', function($scope, $timeout) { 3 // 构建date对象 4 $scope.date = {}; 5 // 更新函数 6 var updateTime = function() { 7 $scope.date.raw = new Date(); 8 $timeout(updateTime, 1000); 9 }; 10 // 启动更新函数 11 updateTime(); 12 });
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 时间戳,
同时更新视图
<div class="container">
<div ng-controller="MainController">
{{ date.raw }}
</div>
</div>
目前,浏览器中的这个日期还非常丑陋。我们可以利用Angular内置的过滤器以更优雅的方
式来格式化这个日期。
<div class="container"> <div ng-controller="MainController"> <div id="datetime"> <h1>{{ date.raw | date:'hh mm ss' }}</h1> </div> </div> </div>
你可以在视图中添加另一个日期,以人性化的方式来显示当前日期。只要再添加一个格式化
的日期就可以了:
<!-- ... -->
<div id="datetime">
<h1>{{ date.raw | date: 'hh mm ss' }}</h1>
<h2>{{ date.raw | date: 'EEEE, MMMM yyyy' }}</h2>
</div>
<!-- ... -->