ng-book关于angularjs的全解析毕业设计翻译.docx

单位代码 1006 学 号 10061096 分 类 密 级 毕业设计(翻译)ng-book，关于angularjs的全解析（节选）院（系） 名 称 计算机学院 专 业 名 称 计算机科学与技术 学 生 名 称 刘中巍 指 导 教 师 杨海燕/朱哲 2014年5月ng-book，关于angularjs的全解析 刘中巍 北京航空航天大学ng-book，关于angularjs的全解析作者：ari lerner第四章在javascript项目中，把功能性的代码放在全局命名空间中向来不是一个好习惯。这种方式可能会造成代码冲突，难以调试，会浪费宝贵的开发时间。通常情况下数据绑定，是通过下面的代码在全局命名空间中定义独立的函数来实现的： 在本章中，将会讨论如何编写高效的、可部署的控制器，我们将这种封装功能性代码的模块单元称为模块。 在angularjs中，模块是构建angularjs应用的主要方式。angularjs 应用的模块将包含项目中的所有代码，一个应用可能包含很多模块，每一个模块会实现不同的功能。 使用模块的方式会带来很多好处，例如：* 不会污染全局命名空间* 由于每个模块针对不同的功能性代码，所以便于构建测试、维护* 便于在不同的应用中共享代码* 可以在应用中按任意的顺序载入不同的代码 angularjs模块接口提供了angular.module()方法，用于声明一个模块。声明一个模块，需要两个参数，第一个参数是构建的模块的名称；第二个参数是当前模块的所依赖的元素列表，就是所谓的依赖注入；也可以通过只传递模块名称的方式，用这个方法来引用模块，例如可以像这样来引用myapp 模块；到目前为止，我们就可以在angular.module(myapp)之上构建应用了。构建大型的应用，可能需要创建很多不同的模块来实现复杂的业务逻辑。将不同的业务逻辑进行抽离，封装为不同的模块，可以更容易进行测试。想要获得更多关于如何编写高可用的模块，请参考体系结构章节。第五章作用域是所有angularjs应用的核心组成部分，它们的使用场景非常广泛，所以非常有必要去了解它们的运行机制。 作用域在angularjs中的角色就像是数据模型一样。作用域为表达式提供执行的上下文。在构建业务逻辑代码、编写控制器中的方法或者定义视图的属性的时候，都能发现作用域的身影。 作用域扮演着控制器和视图之间的胶水角色。在程序渲染视图之前，视图的模板会链接到相应的作用域上，当程序开始构建文档树的时候会通知angularjs进行适当的改变。这种异步的特性和promises机制异曲同工，就像一个xhr请求的过程，发出请求，然后进行异步回调，想要完全理解，请看promises章节。 作用域是angularjs应用的核心。因为动态数据绑定的缘故，当在视图中做出修改的时候，作用域对象会立即进行更新。同样，也可以在作用域对象改变的时候更新视图。 在angularjs中，作用域的机制类似文档树的机制，是按照层次排布的，换句话来讲，可以在一个子作用域对象中可以获取其父作用域对象的属性。 如果你很熟悉javascript的上下文机制，那么这种分层的理念就不难理解。在javascript创建一个可执行上下文的时候，例如创建一个新的函数，这个函数将会自动创建一个局部上下文。在angularjs中作用域的概念也是这样的，每当为一个文档元素的子文档元素创建一个作用域时，那么就在当前所在的父文档的作用域之下创建了一个新的可执行的上下文。作用域提供了一种能够监听模型改变的能力，对于开发者来讲，可以通过调用作用域的apply方法，传播模型改变的事件，在一个作用域的上下文中定义执行的表达式，也可以传播事件到其他的控制器或者程序的某些区域（此事件可以传播到的区域）。 将程序的业务逻辑放置在控制器中，并将需要用到的数据也放置到这个控制器的作用域中是一个非常好的方式。 在angularjs开始执行并生成视图的时候，会创建一个从根元素到根作用域作用域的数据绑定。根作用域是所有作用域对象的最终父元素。根作用域对象是距离全局上下文最近的作用域对象，在全局上下文上绑定过多的业务逻辑是一个糟糕的方式，同样也不要在根作用域上绑定过多的属性，这样会污染全局的作用域。 作用域对象是普通的javascript对象，可以很方便的去修改作用域中的属性。作用域对象是angularjs中的数据模型，并不像其他传统语言中的数据对象，作用域不再提供对数据处理的方法，请记住作用域就是普通的javascript对象，作用域是视图和html之间的桥梁，是视图和控制器之间的纽带。所有在作用域中可以访问的属性，在对应的视图中都可以获取。 例如我们来看一段html代码：我们可以猜测到name变量是在包含此元素的作用域的一个属性在应用中会将html进行渲染，然后将渲染好的html在浏览器中显示。html中包含所有的标准的html元素，既包含有angularjs独特的元素，也包含非angularjs的元素。不包含angularjs独特属性的元素无需特别的声明。在上面的例子中，当作用域变化的时候，会自动更新，angularjs无需处理元素。 在angularjs中，我们可以在模板中使用多种标识，这些标识包括以下几种：* 命令元素：在html中的小段功能性代码。* 数值绑定：在模板中使用 将表达式绑定到视图上。* 过滤器：在视图中起格式化作用的函数。* 表单控制：表单验证控制。作用域有以下的基本作用： * 实时监听模型的变化 * 提供了在整个应用中以及和其他组件之间传递模型变化的方法 * 作用域由于是分层模型，所以可以隔离功能代码和模型的属性 * 提供了表达式运行的执行上下文 在我们开发angularjs应用的时候，最主要的工作就是构建在不同作用域下的功能代码；作用域是包含功能代码和渲染模板的数据的对象，它是所有视图的核心，可以把作用域想象成视图的数据模型。 在之前的例子中，在根作用域中设置了一个变量，然后在视图中进行了引用，就像下面的代码；现在可以在视图中使用name这个属性了：如果我们不在根作用域中设置变量，我们可以用创建一个控制器的方式建立子作用域。可以通过在一个文档元素上使用ng-controller 命令元素的方式建立一个控制器； 现在，已经创建了一个叫做mycontroller的控制器，从而可以管理变量：ng-controllers 命令元素为当前的元素创建了一个新的作用域，而这个作用域在根作用域之下。 在angularjs运行上下文中，当浏览器接收到一个javascript的回调函数的时候，作用域将会识别出模型的变化情况。 在作用域表达式执行完毕，渲染循环执行之后，作用域的watch方法就会进行脏数据的校检。 当创建一个控制器或者命令元素的时候，angularjs会在运行时调用注入器创建一个新的作用域，并将这个作用域传递给控制器或者命令元素。当作用域被链接到视图的时候，所有创建作用域的命令元素会将其监听器注册到父作用域上。这些监听器会监听从视图层到指令的数据模型变化并进行传播。当渲染循环在根作用域中执行的时候，所有的子作用域都会进行脏数据的校检。这时会检查所有监听表达式是否有变化，一旦发现任何的变化，作用域都会调用监听者的回调函数。当一个作用域不再需要的时候，该作用域的创建者会调用作用域的析构方法清理该作用域。注意当一个作用域被销毁了，析构事件会被广播。命令元素会在angluar程序中广泛使用，通常情况下无需创建属于它们自己的作用域，但是这取决于这个命令元素的用途。例如：ng-controller 和 ng-repeat命令元素会创建属于它们的子作用域，并且将作用域绑定到文档元素上。 想要学习更多的内容时候，我们需要了解什么是控制器，以及如何在程序中使用。第六章在angularjs中，是用控制器来增强angularjs应用的视图层的。在hello world示例应用里，只使用了一个隐式控制器，没有明确定义一个控制器。angularjs中的控制器是一个函数，它用来给视图层作用域增加额外的功能。用控制器来设置作用域对象的初始状态，添加自定义行为。当在页面中创建了一个控制器，angularjs传递给控制器一个新的作用域参数，通过这个新的作用域，就可以设置控制器的作用域的初始状态。由于angularjs为我们提供了对控制器的处理，所以只需要编写控制器构造函数即可。编写一个控制器，初始化作用域如下：关于控制器编写的一个好习惯是使用namecontroller而不是namectrl方式来命名。可以看到，angularjs在创建作用域的时候会调用控制器。细心的读者会注意到刚才的代码在全局作用域下创建了函数。这样做通常不是一个好的方式，因为它污染了全局命名空间。更合理的创建方式是创建一个模块，然后在模块中创建控制器，比如像下面的例子：为了在视图层中创建自定义行为，可以直接在控制器的作用域上创建函数。幸运的是，angularjs允许视图调用在作用域上声明的函数，就如同在作用域上获取数据。使用一个内置的指令ng-click绑定在按钮，链接（或者任意一种文档元素）上。ng-click指令将文档元素点击事件处理函数绑定到浏览器点击过程的鼠标事件中（当浏览器触发文档元素点击事件时，处理函数将会被调用），同前面的例子类似，绑定过程的示例代码如下所示：按钮和链接都绑定了作用域上的一个处理函数，当它们被按下（被点击）时，angularjs将调用处理函数。注意，当告知angularjs什么方法被调用时，需要把它连同括号放到一个字符串中。现在，在firstcontroller中添加一组函数。通过这种方式设置的firstcontroller可以调用定义在firstcontroller作用域或包含其作用域的父作用域中的add或substract函数（如上所示）。使用控制器能够在单个容器中包含单一视图的逻辑代码。一个好的编程习惯是保持控制器简洁。angularjs开发者通过angularjs的依赖注入特性来获取服务，从而保持控制器简洁。同其他javascript框架的一个重要区别是，angularjs仅作为视图层和作用域模型层之间的一种连接。除了存储模型数据之外，控制器并不适合用来进行文档操作，文档格式化，数据操作，或是状态维护。angularjs能够在作用域上设置包括对象在内的任何类型，并能将对象属性展示在视图层。在ng-controller=mycontroller所在的div中的任何子元素中，都能够得到作用域上的person对象。例如，现在能够在视图中得到person对象的引用以及获取到。可以在控制器mycontroller中，创建一个只包含name属性的person对象： 从这里可以看出作用域对象是怎样从模型层到视图层传递信息。也可以用同样的方式来监听事件，同应用的其他部分进行交互，或是创建应用的特定逻辑。angularjs 使用作用域来分离视图层，控制器和指令（本书后面将介绍这个概念）各司其职，这也使得每块特定功能的测试编写变得简单。angularjs应用中每个部分都有一个父作用域（在ng-app层级上，这个作用域叫根作用域），这与其在哪个上下文中渲染无关。这里有一个例外：指令中创建的作用域是独立的作用域。除了独立的作用域，被创建的作用域都遵循原型继承规则，即它们能够访问到父级作用域。如果了解面向对象编程，这个行为看起来很熟悉。默认情况下，angularjs如果在当前作用域下查找不到某个属性，它会向上到其父作用域中查找，若仍找不到会继续向上查找，以此类推直到到达根作用域作用域。如果在根作用域中还没有找到，它将不会更新视图层，然后继续执行其他部分。为了理解上面的过程，我们创建一个parentcontroller，一个childcontroller。parentcontroller中定义一个person对象。childcontroller包含在parentcontroller中，它引用了person对象：如果我们在视图层中parentcontroller里嵌入了childcontroller，那么childcontrler中作用域的父对象就是parentcontroller的作用域对象。通过原型继承行为，就可以在子作用域中引用到parentcontroller包含的作用域中的数据。例如可以在childcontroller中引用定义在parentcontroller里的person对象。控制器的这种层级结构非常类似文档本身的结构。可以看到，当按下按钮时，我们在childcontroller里获取到了parentcontroller作用域的person属性，就像person是在childcontroller的作用域中定义的一样。一个好的编程习惯是尽量保持我们的控制器简洁，而与之相对的坏的编程习惯是把文档交互或数据操作逻辑放在控制器中。例如，下面的控制器代码过于繁琐，它包含了文档处理和很多视图层的处理逻辑：一个良好设计的应用会使用指令和服务来处理逻辑。我们将前面的控制器用指令和服务来重新改写，可以得到一个更简洁，更易于维护的控制器：第九章作为web开发者，html是我们所熟知的。先让我们一起来回顾一下这些最基本的web术语。html document一个html document 是包含结构的纯文本文档，并且可以通过css设置样式或使用javascript进行操作。html node一个html node是一个元素或者嵌套在另一个元素中的文本块。所有的元素都是节点，但一个文本节点不是一个元素。html element一个包含开始标签与结束标签的元素。html tag一个html tag负责标记一个元素的开始与结束。标签本身通过尖括号声明。一个起始标签包含其所属元素的名称，也可以包含属性，用来修饰此元素。attributeshtml 元素可以包含属性来提供一个元素的额外信息。这些属性通常被配置在起始标签上，可以通过一个键值对来配置他们，例如：key=”value”，或者仅指定一个键。首先来看看超链接标签，用于创建从一个页面到另一个页面的链接：有些标签，像超链接标签，可以看作参数的特殊属性。比如，一个链接标签的href属性使链接标签既具有链接行为，同时在所有浏览器默认情况下也将链接标签内的文本显示为蓝色。标签定义了一个到另一个页面的链接，此页面属于我们的网站或在其他网站，这取决于href属性的内容，该内容定义了链接的目标。它与下面的html 按钮元素有明显的区别：链接标签在默认情况下带下划线且为蓝色，而按钮默认情况下在浏览器里看起来是一个可点击的按钮。链接标签知道，当指定href属性为 时，如果用户点击链接，它应该改变地址栏中的地址并加载谷歌的首页。而按钮标签，完全无视指定的href属性，也不执行跳转的行为（该属性被忽略）。因此，改变地址栏中的地址并把你带到一个新的页面是一个链接的预置行为，但不是按钮的预置行为。不过这两个标签对标题属性提供相同的行为：当用户悬停时都显示提示。总之，web浏览器为我们呈现html 元素样式和行为的能力是web的基本优势之一。每个供应商，无论是谷歌还是微软，都尝试着遵守相同的html规范，这使得网络编程能够在跨设备和不同操作系统间保持一致。较低版本的ie浏览器没有遵循标准的html规范，所以需要做一些兼容处理来保证低版本ie浏览器正常工作。请查看 internet explorer章节获取详情信息。当前，新的html标签已经开始出现，这些是html5规范的一部分。例如，video标签，它指定了一个视频、影片剪辑或视频流。这些新的html5标签在新的浏览器上工作，一般不支持ie8及以下版本。鉴于我们对html元素的认识，命令元素是angularjs中创建新的拥有自定义功能的html元素的方法。例如，可以创建一个在所有浏览器中工作的自定义video标签。请注意，自定义元素具有自定义起始和关闭标签，my-better-video和一个自定义属性：my-href。为了使标签更可用，可以复写浏览器提供的视频标签，这意味着可以进行手动修改并使用。就如现在看到