光英的记忆博客

我们把互联网想象成一个邮局:当你想给朋友写信时,首先要把内容写在一张信纸上,然后在信封上写上地址,再把信纸装进信封。当你把信送到邮局,邮件分拣机会根据邮编和地址来判断你的朋友住在哪里。如果他住在一栋有很多房间的公寓大楼里面,邮局会把信件投递到大楼的前台,然后大楼的工作人员会根据房间号再次进行分拣。 互联网的工作原理和上面的过程很类似

ng-view指令用来设置将被路由管理和放置在HTML中的视图的位置。

使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false,那对应的元素将会从DOM中移除,否则对应元素的一个克隆将被重新插15入DOM中。161718查看第12章获得更详细信息。ng-if同no-show和ng-hide指令最本质的区别是,它不是通过CSS显示或隐藏DOM节点,而是真正生成或移

ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性。 $index:遍历的进度(0...length-1)。 $first:当元素是遍历的第一个时值为true。 $middle:当元素处于第一个和最后元素之间时值为true。$last:当元素是遍历的最后一个时

ng-init指令用来在指令被调用时设置内部作用域的初始状态。 ng-init最常见的使用场景是:在类似本节的例子中那样,需要创建小的示例代码的时候。对于任何需要健壮结构的场景,请在控制器中用数据模型对象来设置状态。2{{greeting}} {{person}}

尽管可以在视图中使用{{ }}模板语法(AngularJS内置的方式),我们也可以通过ng-bind指令实现同样的行为。  HTML加载含有{{ }}语法的元素后并不会立刻渲染它们,导致未渲染内容闪烁(Flash ofUnrendered Content,FOUC)。我可以用ng-bind将内容同元素绑定在一起避免FOUC。内容会被当作子文

除使用ng-bind来避免未渲染元素闪烁,还可以在含有{{ }}的元素上使用ng-cloak指令:15{{ greeting }}16ng-cloak指令会将内部元素隐藏,直到路由调用对应的页面时才显示出来。

同ng-bind指令类似,ng-bind-template用来在视图中绑定多个表达式。 <div ng-bind-template="{{message}}{{name}}">

ng-model指令用来将input、select、text area或自定义表单控件同包含它们的作用域中的属性进行绑定。它可以提供并处理表单验证功能,在元素上设置相关的CSS类(ng-valid、ng-invalid等),并负责在父表单中注册控件。它将当前作用域中运算表达式的值同给定的元素进行绑定。如果属性并不存在,它会隐式创建并将其添加到当前作用域中。我们应该始终用ngModel来

ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏。类似地,当赋值给ng-hide指令的值为true时元素也会被隐藏。元素的显示或隐藏是通过移除或添加ng-hide这个CSS类来实现的。.ng-hide类被预先定义在了AngularJS的CSS文件中,并且它的display属性的值为none(用了!importan

这个指令会在表单输入发生变化时计算给定表达式的值。因为要处理表单输入,这个指令要和ngModel联合起来使用。 ng-model="equation.x" ng-change="change()" /> {{ equation.output }}angular.module('myApp',[]).controller('Equatio

ng-form用来在一个表单内部嵌套另一个表单。普通的HTML标签不允许嵌套,但ng-form可以。这意味着内部所有的子表单都合法时,外部的表单才会合法。这对于用ng-repeat动态创建表单是非常有用的。由于不能通过字符插值来给输入元素动态地生成name属性,所以需要将ng-form指令内每组重复的输入字段都包含在一个外部表单元素内。

ng-click用来指定一个元素被点击时调用的方法或表达式。 <button ng-click="count = count + 1" ng-init="count=0"> Increment count: {{ count }} Decrement angular.module('myApp',[]

ng-select用来将数据同HTML的元素进行绑定。这个指令可以和ng-model以及ng-options指令一同使用,构建精细且表现优良的动态表单。ng-options的值可以是一个内涵表达式(comprehension expression),其实这只是一种有趣的说法,简单来说就是它可以接受一个数组或对象,并对它们进行循环,将内部的内容提供给select标签内部的选项

ng-submit用来将表达式同onsubmit事件进行绑定。这个指令同时会阻止默认行为(发送请求并重新加载页面),除非表单不含有action属性。 <form ng-submit="submit()" ng-controller="FormController"> Enter text and hit enter: <in

使用ng-class动态设置元素的类,方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。当表达式发生变化,先前添加的类会被移除,新类会被添加。下面的例子会用ng-class在一个随机数大于5时将.red类添加到一个div上: 5}" ng-if="x > 5"> You won!

这个指令和ng-switch-when及on="propertyName"一起使用,可以在propertyName发生变化时渲染不同指令到视图中。在下面的例子中,当person.name是Ari时,文本域下面的div会显示出来,并且这个人会获得胜利: And the winner is {{ person.name }}注意,在switch被调

使用ng-include可以加载、编译并包含外部HTML片段到当前的应用中。模板的URL被限制在与应用文档相同的域和协议下,可以通过白名单或包装成被信任的值来突破限制。更进一步,需要考虑跨域资源共享(Cross-Origin Resource Sharing,CORS)和同源规则(Same Origin Policy)来确保模板可以在任何浏览器中正常加载。例如,所有浏览器都不能进行跨域的请

下面将要介绍的指令会以父级作用域为原型生成子作用域。这种继承的机制可以创建一个隔离层,用来将需要协同工作的方法和数据模型对象放置在一起。13ng-app和ng-controller是特殊的指令,因为它们会修改嵌套在它们内部的指令的作用域。ng-app为 AngularJS 应 用 创 建 $rootScope, ng-controller 则 会 以 $rootSc

浏览器是什么在介绍AngularJS之前,我们需要先了解浏览器在渲染网页的过程中都做了些什么。目前市场上有很多不同品牌的浏览器,常见的有Chrome、Safari、Firefox和IE。它们的核心功能基本上都是相同的:获取网页,并将它显示给用户。浏览器获取页面对应的HTML文本,将其解析为一个在浏览器内部使用的结构,对页面的内容进行布局,并在内容显示到屏幕上之前加上样式,所有这些工作都

Hello World数据绑定和第一个AngularJS Web应用写一个Hello World应用是开始学习AngularJS的最基本途径,让我们从一段简单得不能再简单的HTML开始吧。随着学习的深入,我们会逐渐深入到AngularJS的内部原理中。现在,让我们先来写一个HelloWorld应用。

在Rails等传统Web框架中,控制器将多个模型中的数据和模板组合在一起形成视图,并将其提供给用户,这个组合过程会产生一个单向视图。如果没有创建任何自定义的JavaScript组件,视图只会体现它渲染时模型暴露出的数据。在写这篇文章时,已经出现了好几个可以在视图和模型之间自动进行数据绑定的框架。AngularJS则采用了完全不同的解决方案。它创建实时模板来代替视图,而不是将数据合并进模板之后更

审阅一下上面写的代码,我们使用ng-model指令将内部数据模型对象($scope)中的name属性绑定到了文本输入字段上。 这意味着无论在文本输入字段中输入了什么,都会同步到数据模型中。数据模型对象(model object)是指$scope对象。$scope对象是一个简单的JavaScript对象,其中的属性可以被视图访问,也可以同控制器进行交互。如果不理解这个概念也没有关系,后

由于JavaScript自身的特点,以及它在传递值和引用时的不同处理方式,通常认为,在视图中通过对象的属性而非对象本身来进行引用绑定,是Angular中的最佳实践 如果把这个最佳实践应用到上面时钟的例子中,需要把视图中的代码改写成下面这样: 9 Hello {{

AngularJS启动并生成视图时,会将根ng-app元素同$rootScope进行绑定。$rootScope是所有$scope对象的最上层 $rootScope是AngularJS中最接近全局作用域的对象。在$rootScope上附加太多业务逻并不是好主意,这与污染JavaScript的全局作用域是一样的。$scope对象就是一个普通的JavaScript对象,我

当Angular关心的事件发生在浏览器中时,比如用户在通过ng-model属性监控的输入字段中输入,或者带有ng-click属性的按钮被点击时,Angular的事件循环都会启动。这个事件将在Angular执行上下文中处理。 每当事件被处理时,$scope就会对定义的表达式求值。此时事件循环会启动,并且Angular23456789

AngularJS应用的任何一个部分,无论它渲染在哪个上下文中,都有父级作用域存在。对于ng-app所处的层级来讲,它的父级作用域就是$rootScope。有一个例外:在指令内部创建的作用域被称作孤立作用域。除了孤立作用域外,所有的作用域都通过原型继承而来,也就是说它们都可以访问父级作用域。如果熟悉面向对象编程,对这个机制应该不会陌生。默认情况下,AngularJS在当前作用域中无法找

尽管AngularJS会在运行$digest循环的过程中自动解析表达式,但有时手动解析表达式也是非常有用的。AngularJS通过$parse这个内部服务来进行表达式的运算,这个服务能够访问当前所处的作用域。这个过程允许我们访问定义在$scope上的原始JavaScript数据和函数。将$parse服务注入到控制器中,然后调用它就可以实现手动解析表达式。举例来说,如果页面上有一个输入框

在AngularJS中,我们的确有手动运行模板编译的能力。例如,插值允许基于作用域上的某个条件实时更新文本字符串。要在字符串模板中做插值操作,需要在你的对象中注入$interpolate服务。在下面的例子中,我们将会将它注入到一个控制器中: angular.module('myApp', []) .controller('MyController',fun

正如前面所见,创建自定义过滤器非常容易。创建自定义过滤器需要将它放到自己的模块中。下面我们一起来实现一个过滤器,将字符串第一个字母转换为大写。首先,创建一个模块用以在应用中进行引用(这是一个非常好的实践): angular.module('myApp.filters', []) .filter('capitalize', function() {

能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的。在人与人沟通的语境中,表单验证给出来的反馈同获得正确输入同等重要。表单验证不仅能给用户提供有用的反馈,同时也能保护我们的Web应用不会被恶意或者错误的输入所破坏。我们要在Web前端尽力保护后端。AngularJS能够将HTML5表单验证功能同它自己的验证指令结合起来使用,并且非常方便。AngularJS

基于我们对HTML元素的理解,指令本质上就是AngularJS扩展具有自定义功能的HTML元素的途径。例如,我们可以创建一个自定义元素,它实现了标签的功能并且能在所有浏览器中工作: Caneventaketext注意,这个自定义元素使用了特殊的开始和闭合标签my-better-video,以及my-href这个自定义属性。为了让这个标签更有用,可以将浏览器默认的v

首先来看看和原生HTML标签名称相似的一组内置指令,这组指令非常容易记忆,因为仅仅是在原生标签名前加上了ng前缀,包括: ng-href; ng-src; ng-disabled;ng-checked;ng-readonly;ng-selected;ng-class; ng-style。

ng-href、ng-src等属性虽然不是标准的HTML布尔属性,但是由于行为相似,所以在AngularJS源码内部是和布尔属性同等对待的,下面介绍这些属性。ng-href和ng-src都能有效帮助重构和避免错误,因此在改进代码时强烈建议用它们代替原来的href和src属性。1. ng-href当使用当前作用域中的属性动态创建URL时,应该用ng-href代替href。这里的潜在问

当AngularJS编译DOM时会查找花括号{{ some expression }}内的表达式。这些表达式会被自动注册到$watch服务中并更新到$digest循环中,成为它的一部分: <-- updated when`someExpression` on the$scope is updated -->Hello{{someExpress