从构建负责管理主屏幕的 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. });
  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. });

MainController 内的 updateTime() 函数每秒都会运行,以便更新 $scope.date.raw 时间戳,
同时更新视图

  1. <div class="container">
  2. <div ng-controller="MainController">
  3. {{ date.raw }}
  4. </div>
  5. </div>

目前,浏览器中的这个日期还非常丑陋。我们可以利用Angular内置的过滤器以更优雅的方
式来格式化这个日期。

  1. <div class="container">
  2.   <div ng-controller="MainController">
  3.     <div id="datetime">
  4.       <h1>{{ date.raw | date:'hh mm ss' }}</h1>
  5.     </div>
  6.   </div>
  7. </div>
  1. 你可以在视图中添加另一个日期,以人性化的方式来显示当前日期。只要再添加一个格式化
  2. 的日期就可以了:
  3. <!-- ... -->
  4. <div id="datetime">
  5. <h1>{{ date.raw | date: 'hh mm ss' }}</h1>
  6. <h2>{{ date.raw | date: 'EEEE, MMMM yyyy' }}</h2>
  7. </div>
  8. <!-- ... -->

angularjs 构建主页 内置过滤器、日期的格式化的更多相关文章

  1. AngularJS提供的内置过滤器

    1. currencycurrecy过滤器可以将一个数值格式化为货币格式.用{{ 123 | currency }}来将123转化成货币格式.currecy过滤器允许我们自己设置货币符号.默认情况下会 ...

  2. AngularJS复习-----内置过滤器和内置服务

    AngularJS中的内置服务(共30多个): $http 发送http请求,主要用于进行异步数据请求的功能实现,这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程请 ...

  3. apache shiro内置过滤器 标签 注解

    内置过滤器 anon(匿名)  org.apache.shiro.web.filter.authc.AnonymousFilter authc(身份验证)       org.apache.shiro ...

  4. Django内置过滤器详解附代码附效果图--附全部内置过滤器帮助文档

    前言 基本环境 Django版本:1.11.8 Python版本:3.6 OS: win10 x64 本文摘要 提供了常用的Django内置过滤器的详细介绍,包括过滤器的功能.语法.代码和效果示例. ...

  5. Asp.Net Core MVC框架内置过滤器

    第一部分.MVC框架内置过滤器 下图展示了Asp.Net Core MVC框架默认实现的过滤器的执行顺序: Authorization Filters:身份验证过滤器,处在整个过滤器通道的最顶层.对应 ...

  6. Shiro内置过滤器

    Shiro内置过滤器 DefaultFilter 枚举类定义了shiro所有的默认过滤器. package org.apache.shiro.web.filter.mgt; public enum D ...

  7. angularjs开发常见问题-2(angularjs内置过滤器)

    在angular中内置了几个经常使用的filter,能够简化我们的操作. 过滤器使用 '|' 符号,概念有点相似于linux中的管道. 1.filter (过滤) filter能够依据条件过滤数据.样 ...

  8. AngularJS 的那些内置九种过滤器

    ng内置了九种过滤 1. currency (货币处理) 使用currency可以将数字格式化为货币,默认是美元符号,你可以自己传入所需的符号,例如我传入人民币: {{num | currency : ...

  9. 009-spring cloud gateway-过滤器GatewayFilter、GlobalFilter、GatewayFilterChain、作用、生命周期、GatewayFilterFactory内置过滤器

    一.概述 在Spring-Cloud-Gateway之请求处理流程中最终网关是将请求交给过滤器链表进行处理. 核心接口:GatewayFilter,GlobalFilter,GatewayFilter ...

随机推荐

  1. ICLR 2013 International Conference on Learning Representations深度学习论文papers

    ICLR 2013 International Conference on Learning Representations May 02 - 04, 2013, Scottsdale, Arizon ...

  2. ASP.NET 5 Beta6发布了(翻译)

    感觉就好像我们刚刚发布了一个版本,现在我们又要发布一个新的版本.开发团队通过努力工作在Visual Studio2015的正式版上提交使用ASP.NET 5开发工具的上的更新以及库的更新.新的版本为b ...

  3. android用jsonReader来解析json

    对于这个json: { "id" : "3232", "data" : [{ "data1" : "555&q ...

  4. Jenkins自动部署到(远程)tomcat服务器

    Jenkins的流程: 1.从版本控制中获取代码 ->2. 使用maven编译生成相应的包(jar,war) ->3. 部署到指定的地点. 其中2.主要是解决依赖的问题,或许你需要先mvn ...

  5. WEB漏洞挖掘技术总结

    漏洞挖掘技术一直是网络攻击者最感兴趣的问题,漏洞挖掘的范围也在随着技术的提升而有所变化.在前期针对缓冲区溢出.格式化字符串.堆溢出.lib库溢出等技术都是针对ELF文件(Linux可执行文件)或者PE ...

  6. Python 爬虫(2)多线程

    前面说过由于GIL的存在,Python的多线程效率没有希望的那么高,python的多线程适合IO密集型的情况,而爬虫恰好就是一个IO密集的情况,因为爬虫中很大一部分时间,是在等待socket返回数据. ...

  7. [AngularJS] Angular 1.3: ng-model-options updateOn, debounce

    <!DOCTYPE html> <html ng-app="app"> <head lang="en" > <meta ...

  8. 【树莓派】-bash: /usr/local/java/jdk1.8.0_161/bin/java: cannot execute binary file: Exec format error

    遇到这样的问题:-bash: /usr/local/java/jdk1.8.0_161/bin/java: cannot execute binary file: Exec format error ...

  9. 初识 NoSQL Databases RethinkDB

    初识 NoSQL Databases RethinkDB rethinkDB所有数据都是基于 json的Document; 官网:http://rethinkdb.com/ github: https ...

  10. 讯飞语音唤醒SDK集成流程

    唤醒功能,顾名思义,通过语音,唤醒服务,做我们想做的事情. 效果图(开启应用后说讯飞语音或者讯飞语点唤醒) 源码下载 地址:http://download.csdn.net/detail/q48788 ...