3.1 AngularJS必备知识

AngularJS是一个WEB应用框架。

本节我们会学习控制器（控制数据），会学习作用域（连接控制器和用户界面），用户界面又叫做视图，通过模板和作用域来创建交互视觉效果。另外，我们还会学习其他的特性比如如何使用过滤器来转换数据、如何构建并使用指令来增强现有的HTML元素，以及如何从外部数据源中加载并保存应用数据。

3.1 AngularJS初探

一个典型的AngularJS应用的组件：

3.1.1 视图和模板：描述内容

模板：是一块HTML内容，就是带有指令或者表达式的HTML，可以在需要的时候载入应用。

视图：会使用模板来展示数据，视图一定会有一个模板（就是HTML标签），还会有模板需要用到的数据，视图会获取数据并使用数据中的值来对模板进行渲染。

指令：指令会修改包含它的元素的行为。Angular有很多自带的指令，他们都是以ng开头的，如用来修饰显示样式的（ngShow、ngClass）、用于表单的（ngModel、ngForm）、用于监听单击等事件的（ngClick、ngMouseover）,Angular还有许多作用在原生HTML元素上的指令，提供一些HTML没有的功能，这些元素包括输入框、文本区域和锚点。

表达式：双花括号{{}}，表示某些数据会被展示在这里，这种思想被称为数据绑定。花括号中的所有内容都是表撒施，AngularJS会用当前模型的数据对表达式进行求值。

ngApp和ng-App的区别：

ngApp是javaScript版本的名字，ng-App是HTML版本的名字。

模板代码示例：

//以下是一段模板

• ng-repeat="note in notes" //ng-repeat为笔记数组中的每个笔记创建一个li ng-click="displayNote($index)" //ng-click会在li被点击时调用displayNote()方法 ng-class="{active:note.id == content.id}">{{note.title}}
  //用ng-class来控制是否显示一个类 {{note.date | date:'short'}} //显示数据并使用过滤器显示较短的日期格式

3.1.2 控制器、模型和作用域：管理数据和逻辑

控制器：是附加在文档对象模型（DOM）节点上的函数，用来驱动你的应用逻辑。在JavaScript中，控制器就是一个函数，用来和作用域通信并相应事件。

作用域：可以理解为在控制器和视图之间共享的一个上下文，可以爸它看做控制器和界面的桥梁，作用域在控制器中更新时也会更新视图。作用域有两个核心角色：存储数据并允许控制器的方法访问数据。存储在作用域中的数据被称为模型，模型可以是任意的JavaScript值（通常是数组或者对象，也可以是简单的数字或者字符串），你可以把它存储在作用域中，然后通过作用域共享给控制器和视图。

控制器代码示例：

angular.module('app').controller('Controller',function($scope){ //声明控制器并使用$scope服务来访问作用域 $scope.notes = [ //创建笔记对象数组并赋值给notes模型，ngrepeat会显示这个模型 {id:1,title:'Note 1',date:new Date()}, {id:2,title:'Note 2',date:new Date()} ]; $scope.getNote=function(index){ //添加一个方法，它会被视图中的ngClick命令出发并更新当前值 $scope.content=$scope.notes[index]; }; });

控制器中的所有内容和应用的其他部分隔离，除了它自己的子作用域。这很重要，因为这可以限制代码和变量的可见性。

根作用域（通过$root Scope对象访问）是Angular创建的第一个作用域，是其他所有作用域的基础，这意味着你放在根作用域上的所有东西对其他作用域都是可见的，听起来似乎还不错，但是最好不要这样做。需要保持作用域整洁和聚焦，而不是把所有东西都推在根作用域里。

控制器不是万能的：一要避免在控制器中进行DOM操作，二要避免在控制器中格式化或者过滤数据，可以使用表单来做这些事。

3.1.3 Service:可重用的对象和方法

Angular中有一个概念叫service，它本质上就是一个JavaScript对象，可以在整个应用中共享。Angular默认提供了许多service，你也可以创建自己的service。

$http是一个非常常见的service，Angular用它来操作HTTP请求。

service是有Angular延迟加载的，也就是说，他们只会在使用的时候才会载入内存。他们还是单例的，如果你在一个地方改变了service的值，其他用到这个service的地方都会受到影响。

Ionic把许多特性写成了Angular的service，需要注意的是，控制器中包含的几乎所有内容都是service。

3.1.4 双向数据绑定：在控制器和视图之间共享数据

Angular最强大的特性之一就是双向数据绑定。视图将数据绑定到模板，反过来也同样使用。视图可以改变作用域中的数据，数据会立刻更新到作用域并反映到控制器中。这在表单中尤其有用，用户向文本框中输入内容时作用域中的值会同步更新。你不需要做任何特殊的事情来启动双向数据绑定，它会自动实现。如下面的例子：

以上就是Angular的核心概念，这些背景知识已经足够你起步。

Angular AngularJS HTML

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。