AngularJs入门篇-控制器的加深理解基础篇

下面做的是一个更新时间的效果,每一秒钟就会更新一下,视图中会显示出当前的时间

 

下面的这个例子中,SceondController函数将接受两个参数,既该DOM元素的$scope和$timeout。

可以将视图中clock变量用{{}}包起来,以显示$scope中的clock的值。

///////////////  THML

<div ng-controller="SceondController">

<h5>{{ clock }}</h5>

</div>

///////////////  SCRIPT

<script type="text/javascript">

angular.module("myApp", [])

.controller("SceondController", function($scope, $timeout) {

var updataClock = function() {

$scope.clock = new Date();

$timeout(function() {

updataClock();

}, 1000);

};

updataClock();

});

</script>

//数据绑定的最佳实践

由于JavaScript自身的特点,以及它在传值和引用时的不同处理方式,通常认为,在视图中通过对象的属性

而非对象本身来进行引用绑定,是AngularJS的最佳实践。

那么如果把这个最佳实践应用到上面的那个时钟效果上,那么需要把视图中的代码写成如下这个样子:

angular.module("myApp", [])

.controller("SceondController", function($scope) {

$scope.clock = {

now: new Date()

};

var updataClock = function() {

$scope.clock.now = new Date();

};

setInterval(function() {

$scope.$apply(updataClock);

}, 1000);

updataClock();

});

*或许这个时候不知道什么时候用$apply,那么我会单独的找点资料,为解释它的用法。目前只需要不添加它,是实现不了的就可以了。

时间: 2024-10-11 10:37:30

AngularJs入门篇-控制器的加深理解基础篇的相关文章

Python之路【第十六篇】:Django【基础篇】

Python之路[第十六篇]:Django[基础篇] Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. 基本配置 一.创建django程序 终端命令:django-admin startproject sitename IDE创建Django程序时,本质上都是自动执行上述命令 其他常用命令: python manage.py runserver

【angularjs】【学习心得】路由基础篇

原文:http://www.imooc.com/wenda/detail/236998 AngularJS自带有路由模块ngRoute,但是有经验的老师都推荐我们使用功能更完善更强大的ui-router来做路由.那到底什么是路 由呢?我自己的理解是:路由可以看作一个总控制器,它会根据页面的不同状态来填充页面的内容,这就是路由的主要用处.前端路由能极大地减少对服务器资源的 请求数量,因此在前端做路由显得尤为重要. ------------------------------------------

给深度学习入门者的Python快速教程 - 基础篇

实在搞不定博客园的排版,排版更佳的版本在: https://zhuanlan.zhihu.com/p/24162430 Life is short, you need Python 人生苦短,我用Python -- Bruce Eckel 5.1 Python简介 本章将介绍Python的最基本语法,以及一些和深度学习还有计算机视觉最相关的基本使用. 5.1.1 Python简史 Python是一门解释型的高级编程语言,特点是简单明确.Python作者是荷兰人Guido van Rossum,1

ESP8266开发之旅 基础篇① 走进ESP8266的世界

本博客由 单片机菜鸟 个人撰写,仅仅做个人技术交流分享,不做任何商业用途,不经允许,切勿转载.如有不对之处,请留言,本人及时更改. 一.基础篇 ESP8266开发之旅 基础篇① 走进ESP8266的世界 ESP8266开发之旅 基础篇② 如何安装ESP8266的Arduino开发环境 ESP8266开发之旅 基础篇③ ESP8266与Arduino的开发说明 ESP8266开发之旅 基础篇④ ESP8266与EEPROM ESP8266开发之旅 基础篇⑤ ESP8266 SPI通信和I2C通信

渗透学习笔记--基础篇--sql注入(字符型)

环境:dvwa1.7数据库:mysql前置知识:sql语句(Click me)      在进行sql注入前,我们先熟悉熟悉select语句.一.打开我们的sql终端 二.进入之后可以看到有mysql>我们输入sql语句,即可返回我们想要的结果,注意分号哟!我们使用的dvwa,在我们前几章设置的时候,会在数据库中生成一个dvwa的database:这里我们使用它来进行我们的select 语句:(1)使用dvwa数据库use dvwa;(2)在users表里查询用户名为'admin'的所有信息se

JS基础篇--HTML DOM classList 属性

页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. 添加类(add) document.getElementById("myDIV").classList.add("mystyle"); 为 <div> 元素添加多个类: document.getElementById("myDIV").cla

AngularJS入门基础——控制器

AngularJS中的控制器是一个函数,用来向视图的作用域添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. AngularJS同其他JavaScript框架最主要的一个区别就是,控制器并不适合用来执行DOM操作,格式化或数据操作,以及除存储数据模型之外的状态维护操作.它只是视图和$scope之间的桥梁. AngularJS应用的任何的一个部分,无论它渲染在哪个上下文,都有父级作用域存在.对ng-app所处的层级来讲,它的父级作用域就是$rootScope. 有一个例外,在指

Qt入门之基础篇 ( 二 ) :Qt项目建立、编译、运行和发布过程解析

转载请注明出处:CN_Simo. 题解: 本篇内容主讲Qt应用从创建到发布的整个过程,旨在帮助读者能够快速走进Qt的世界. 本来计划是讲解Qt源码静态编译,如此的话读者可能并不能清楚地知道为何要静态编译,所以借此篇内容说明一下原由并为之后文章的学习做准备. 即使本片内容只是在围绕一个小小的HelloWorld程序开展,但还是希望朋友们不要急于求成,"欲速则不达". 文章整体思路: 我们循序渐进地来看,一个Qt应用的完成有以下一个重要的步骤: 项目创建->源码编译->程序运行

angularjs入门学习【指令篇】

一.首先我们来了解下指令API 属性 含义 restrict 申明标识符在模版中作为元素,属性,类,注释或组合,如何使用 priority 设置模版中相对于其他标识符的执行顺序 Template 指定一个字符串式的内嵌模版,如果你指定了模版是一个URL,那么是不会使用的 tempateUrl 指定URL加载的模版,如果你已经指定了内嵌的模版字符串,那么它不会使用的 Replace 如果为真,替换当前元素,如果是假或未指定,拼接到当前元素 Transclude 移动一个标识符的原始字节带你到一个新