学习学习学习

HelloWorld

<!DOCTYPE html>
<html ng-app>
<head>
<title>Simple app</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</script>
</head>
<body>
<input ng-model="name" type="text" placeholder="Your name">
<h1>Hello {{ name }}</h1>
</body>
</html>

  

虽然这个例子不怎么有趣,但它展示了AngularJS最基本也最令人印象深刻的功能之一:数据绑定

AngularJS 中的数据绑定

AngularJS创建实时模板来代替视图,而不是将数据合并进模板之后更新DOM。任何一个独立视图组件中的值都是动态替换的。这个功能可以说是AngularJS中最重要的功能之一,也是让我们只用10行代码,并且在没有任何JavaScirpt的情况下就可以写出Hello World的关键。

ng-app属性声明所有被其包含的内容都属于这个AngularJS应用,这也是我们可以在Web应用中嵌套AngularJS应用的原因。只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响。所以HTML页面中引用angular.js,并在某个DOM元素上要明确的设置ng-app属性。

自动数据绑定,可以将视图理解为模型状态的映射。如:

使用的是webStorm 9.0.1 引入bootStrap 3.3.0

所以当数据模型发生变化时,视图就能反映出相应的变化。如下:

用ng-model指令将内部数据模型对象($scope)中的name属性绑定到了文本输入字段上。当AngularJS认为某个值可能发生变化时,它会运行自己的事件循环来检查这个值是否变“脏”。如果该值从上次事件循环运行之后发生了变化,则该值被认为是“脏”值。这也是Angular可以跟踪和响应应用变化的方式。

这个事件循环会调用$digest()循环 这个过程被称作脏检查(dirty checking)。脏检查是检查数据模型变化的有效手段。

 

数据模型对象(model object)是指$scope对象。

$scope对象是一个简单的JavaScript对象,其中的属性可以被视图访问,也可以同控制器进行交互。如果不理解这个概念也没有关系,后面的例子将会对这个概念进行详细说明。双向数据绑定(bi-directional)意味着如果视图改变了某个值,数据模型会通过脏检查观察到这个变化,而如果数据模型改变了某个值,视图也会依据变化重新渲染

相比每秒钟都更新$scope.clock,更新clock.now的值会是更好的选择,                                                   
将所有绑定都通过这样的形式放在视图中,是个非常好的主意。


作用域(scope)是构成AngularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它是如何工作的,非常重要。

应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文。$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。

在应用将视图渲染并呈献给用户之前,视图中的模板会和作用域进行连接,然后应用会对DOM进行设置以便将属性变化通知给AngularJS。

作用域是应用状态的基础。基于动态绑定,我们可以依赖视图在修改数据时立刻更新$scope,也可以依赖$scope在其发生变化时立刻重新渲染视图

AngularJS将$scope设计成和DOM类似的结构,因此$scope可以进行嵌套,也就是说我们可以引用父级$scope中的属性。

创建自己的模块(module)

 

<html ng-app ="MyApp">
<head lang="en">

  

AngularJS启动并生成视图时,会将根ng-app元素同$rootScope进行绑定。$rootScope是所有$scope对象的最上层。

我们可以不将变量设置在$rootScope上,而是用控制器显式创建一个隔离的子$scope对象,把它设置到这个子对象上。使用ng-controller指令可以将一个控制器对象附加到DOM元素上,我们可以创建一个控制器来管理与其相关的变量,而不用将name变量直接放在$rootScope上:

$scope 的生命周期    

当Angular关心的事件发生在浏览器中时,比如用户在通过ng-model属性监控的输入字段中
输入,或者带有ng-click属性的按钮被点击时,Angular的事件循环都会启动。这个事件将在
Angular执行上下文中处理。

创建
在创建控制器或指令时,AngularJS会用$injector创建一个新的作用域,并在这个新建的控制器或指令运行时将作用域传递进去。

链接
当Angular开始运行时,所有的$scope对象都会附加或者链接到视图中。所有创建$scope对象的函数也会将自身附加到视图中。
这些作用域将会注册当Angular应用上下文中发生变化时需要运行的函数。
这些函数被称为$watch函数,Angular通过这些函数获知何时启动事件循环。

更新
当事件循环运行时,它通常执行在顶层$scope对象上(被称作$rootScope),每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化,$scope对象就会触发指定的回调函数。

销毁
当一个$scope在视图中不再需要时,这个作用域将会清理和销毁自己。
尽管永远不会需要清理作用域(因为Angular会为你处理),但是知道是谁创建了这个作用域还是有用的,因为你可以使用这个$scope上叫做$destory()的方法来清理这个作用域。

指令的作用域    

指令在AngularJS中被广泛使用,指令通常不会创建自己的$scope,但也有例外。比如ng-controller和ng-repeat指令会创建自己的子作用域并将它们附加到DOM元素上。

比如list信息时候,在控制器里获取数组,这里先用假数据:$scope.infoList,有两笔信息。故在控制器里循环ng-repeat呈现到视图中。

控制器    

控制器在AngularJS中的作用是增强视图。在Hello World的例子中,我们并没有使用普通的控制器,而是使用了一个隐式控制器。
AngularJS中的控制器是一个函数,用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态,并添加自定义行为。

时间: 2024-10-31 18:32:09

学习学习学习的相关文章

Deep Learning(深度学习)学习笔记整理系列七

Deep Learning(深度学习)学习笔记整理系列 声明: 1)该Deep Learning的学习系列是整理自网上很大牛和机器学习专家所无私奉献的资料的.具体引用的资料请看参考文献.具体的版本声明也参考原文献. 2)本文仅供学术交流,非商用.所以每一部分具体的参考资料并没有详细对应.如果某部分不小心侵犯了大家的利益,还望海涵,并联系博主删除. 3)本人才疏学浅,整理总结的时候难免出错,还望各位前辈不吝指正,谢谢. 4)阅读本文需要机器学习.计算机视觉.神经网络等等基础(如果没有也没关系了,没

Python.python学习(1).学习规划

Python.python学习.学习规划 欢迎收看! 阅读此文表明你也是要学Python这门神奇的语言了.很好,来对地方了,先容我简单介绍一下这个博客系列. 这个系列的博客将会持续专注于Python这个语言的知识积累和开发经验. 编写这个系列,一方面是为了巩固我自己对Python的理解,另一方面也是希望能够分享我的经验,给初学者提供一定帮助.网上现有的各类教程已经汗牛充栋,在我学习的时候就曾参阅过许多教程与文章,它们讲解问题的思路各不相同,综合的阅读使得我最终能够整理起知识的碎片并正确地理解.所

Deep Learning(深度学习)学习笔记整理系列之(五)

Deep Learning(深度学习)学习笔记整理系列 [email protected] http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04-08 声明: 1)该Deep Learning的学习系列是整理自网上很大牛和机器学习专家所无私奉献的资料的.具体引用的资料请看参考文献.具体的版本声明也参考原文献. 2)本文仅供学术交流,非商用.所以每一部分具体的参考资料并没有详细对应.如果某部分不小心侵犯了大家的利益,还望海涵,并联系博主

Deep Learning(深度学习)学习笔记整理系列之(三)

Deep Learning(深度学习)学习笔记整理系列 [email protected] http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04-08 声明: 1)该Deep Learning的学习系列是整理自网上很大牛和机器学习专家所无私奉献的资料的.具体引用的资料请看参考文献.具体的版本声明也参考原文献. 2)本文仅供学术交流,非商用.所以每一部分具体的参考资料并没有详细对应.如果某部分不小心侵犯了大家的利益,还望海涵,并联系博主

嵌入式学习_AD学习篇

AD基础使用: 1.建立一个工作区 (.DsnWrk) workspace 2.建立一个PCB工程(.PrjPCB)  project 3.建立一个PCB原理图文件(理论上告诉你两个点连接起来) 建立原理图后需要编译一下,没问题再倒入pcb文件.(.SchDoc)  schemmatic 4.建立一个PCB文件(物理上两个点怎么连)(.PcbDoc) 5.Layout(先布局再布线最后电器规格检查(DRC检查)) 6.生成Gerber文件(G1,G2,GBL,GBO,GBP,GBS,GKO,GP

spring4.0.6最新稳定版新特性学习,简单学习教程(一)

Spring Framework 4.0 学习整理. Spring框架的核心部分就是Ioc容器,而Ioc控制的就是各种Bean,一个Spring项目的水平往往从其XML配置文件内容就能略知一二,很多项目,往往是外包公司的项目,配置文件往往是乱七八糟,抱着能跑就行,不报错就行的态度去写,然后在项目中后期发现各种缺失又去一通乱补,其结果就是,整个文档可读性极差,毫无章法.这也不能怪写这个XML的人,拿着苦逼程序员的工资干着架构师的工作必然是这个结果.为了程序员的幸福,我认为有必要来一套简单快速的官方

学习如何学习

学习如何学习 在「如何学习」这点上,一直觉得自己做的不够好,曾经想学吉他,坚持了两个礼拜就以「手指太短,不适合」终结了,后来想学数学,却终究连翻开书的勇气都没有,工作一忙更是顾不上这些了.所以在 Youtube 上看到 Barbara Oakley 的 Learning How to Learn 时,才发现自己在学习上的各种问题,收获颇多.如果有兴趣的话,建议直接看视频,讲解地很有条理且生动. Barbara Oakley 是系统工程学博士,但对于「学习」方面也颇有研究,在 Coursera 上

使用腾讯云 GPU 学习深度学习系列之二:Tensorflow 简明原理【转】

转自:https://www.qcloud.com/community/article/598765?fromSource=gwzcw.117333.117333.117333 这是<使用腾讯云 GPU 学习深度学习>系列文章的第二篇,主要介绍了 Tensorflow 的原理,以及如何用最简单的Python代码进行功能实现.本系列文章主要介绍如何使用 腾讯云GPU服务器 进行深度学习运算,前面主要介绍原理部分,后期则以实践为主. 往期内容: 使用腾讯云 GPU 学习深度学习系列之一:传统机器学

Deep Learning(深度学习)学习笔记整理系列之(六)

Deep Learning(深度学习)学习笔记整理系列 [email protected] http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04-08 声明: 1)该Deep Learning的学习系列是整理自网上很大牛和机器学习专家所无私奉献的资料的.具体引用的资料请看参考文献.具体的版本声明也参考原文献. 2)本文仅供学术交流,非商用.所以每一部分具体的参考资料并没有详细对应.如果某部分不小心侵犯了大家的利益,还望海涵,并联系博主

Deep Learning(深度学习)学习笔记整理系列之(七)

Deep Learning(深度学习)学习笔记整理系列 [email protected] http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04-08 声明: 1)该Deep Learning的学习系列是整理自网上很大牛和机器学习专家所无私奉献的资料的.具体引用的资料请看参考文献.具体的版本声明也参考原文献. 2)本文仅供学术交流,非商用.所以每一部分具体的参考资料并没有详细对应.如果某部分不小心侵犯了大家的利益,还望海涵,并联系博主