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

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. MatLab2012b/MatLab2013b 分类器大全(svm,knn,随机森林等)

    train_data是训练特征数据, train_label是分类标签.Predict_label是预测的标签.MatLab训练数据, 得到语义标签向量 Scores(概率输出). 1.逻辑回归(多项 ...

  2. table 中,如何使得单元格的内容不换行,单元格不被撑开

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. Google POI下载工具破解之路

    我是GIS初学者,爱好二次开发,像初恋一样.最近对编译感兴趣,每当成功获取一点信息,就有一种快感,感觉马上就要成功了……其实,还早! 01.初次反编译 今天在微创业工作室找到了Google POI下载 ...

  4. SQL语言 之 SQL概述

    SQL(Structured Query Language)语言,自1987年6月被国际标准化组织采纳为国际标准,SQL语言成为关系数据库的标准语言. SQL语言是关系数据库操作的基础语言,将数据查询 ...

  5. iOS7 下使用SVPullToRefresh 下拉刷新导航栏位置错误

    iOS7 下使用SVPullToRefresh 下拉刷新导航栏位置错误: 下拉刷新之后,tableview的第一列会跑到导航栏的下面: 修正:添加如下代码 /** * 下拉刷新 增加一个: */ // ...

  6. Androidclient性能參数监控

    背景: 在做androidclient測试的时候.有时候须要监控cpu/mem/电量消耗/界面载入时间/流量等等指标. 于是俺们就上下求索,网友告诉我两个方案:AnotherMonitor和Emmag ...

  7. 转:configure/make/make install的作用 linux 安装 卸载 make uninstall

    这些都是典型的使用GNU的AUTOCONF和AUTOMAKE产生的程序的安装步骤. ./configure 是用来检测你的安装平台的目标特征的.比如它会检测你是不是有CC或GCC,并不是需要CC或GC ...

  8. 基于Ant Design UI框架的React项目

    概述 这款基于React开发的UI框架,界面非常简洁美观,在这篇文章中我主要为大家介绍一下如何用Ant开始搭建React项目 详细 代码下载:http://www.demodashi.com/demo ...

  9. 阿里云RDS同步到本地自建mysql数据库从库

    RDS mysql版本为5.6.29 x86_64 1.下载数据备份.binlog备份 内网中转?数据量不大,直接下载 下载数据备份(外网下载链接) wget -c "https://rds ...

  10. Android开发优化之——从代码角度进行优化

    通常我们写程序,都是在项目计划的压力下完成的,此时完成的代码可以完成具体业务逻 辑,但是性能不一定是最优化的.一般来说,优秀的程序员在写完代码之后都会不断的对代码进行重构.重构的好处有很多,其中一点, ...