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版本的名字。

　　模板代码示例：

//以下是一段模板

<ul class=""list-group>

    <li class="list-group-item">

        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}}<br />    //用ng-class来控制是否显示一个类

        <small>{{note.date | date:'short'}}</small>    //显示数据并使用过滤器显示较短的日期格式

    </li>

</ul>

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="formCtrl">

  <form novalidate>

    First Name:<br>

    <input type="text" ng-model="user.firstName"><br>

    Last Name:<br>

    <input type="text" ng-model="user.lastName">

    <br><br>

    <button ng-click="reset()">RESET</button>

  </form>

  <p>form = {{user }}</p>

  <p>master = {{master}}</p>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('formCtrl', function($scope) {

    $scope.master = {firstName:"John", lastName:"Doe"};

    $scope.reset = function() {

        $scope.user = angular.copy($scope.master);

    };

    $scope.reset();

});

</script>

</body>

</html>

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

　　　　

　　　　

3.1 AngularJS必备知识的更多相关文章

  1. Java面试必备知识

    JAVA面试必备知识 第一,谈谈final, finally, finalize的区别. 第二,Anonymous Inner Class (匿名内部类) 是否可以extends(继承)其它类,是否可 ...

  2. Apache Tomcat8必备知识

    Apache Tomcat8必备知识 作者:chszs,转载需注明.博客主页: http://blog.csdn.net/chszs 一.Apache Tomcat 8介绍 Apache Tomcat ...

  3. <转载>Div+Css布局教程（-）CSS必备知识

    目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...

  4. AngularJS进阶(十二)AngularJS常用知识汇总(不断更新中....)

    AngularJS常用知识汇总(不断更新中....) 注:请点击此处进行充电! app.controller('editCtrl',['$http','$location','$rootScope', ...

  5. 微软实战训练营(X)重点班第(1)课：SOA必备知识之ASP.NET Web Service开发实战

    微软实战训练营 上海交大(A)实验班.(X)重点班 内部课程资料 链接:http://pan.baidu.com/s/1jGsTjq2 password:0wmf <微软实战训练营(X)重点班第 ...

  6. 移动web开发（一）——移动web开发必备知识

    参考: 移动终端开发必备知识.http://isux.tencent.com/mobile-development-essential-knowledge.html

  7. Div+Css布局教程（-）CSS必备知识

    目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...

  8. 性能测试必备知识（2）- 查看 Linux 的 CPU 相关信息

    做性能测试的必备知识系列,可以看下面链接的文章哦 https://www.cnblogs.com/poloyy/category/1806772.html 查看系统 CPU 信息 cat /proc/ ...

  9. 性能测试必备知识（4）- 使用 stress 和 sysstat

    做性能测试的必备知识系列,可以看下面链接的文章哦 https://www.cnblogs.com/poloyy/category/1806772.html stress 介绍 Linux 系统压力测试 ...

随机推荐

  1. 他（he）（钟神）

    他[问题描述]一张长度为N的纸带,我们可以从左至右编号为0 −N(纸带最左端标号为0) .现在有M次操作,每次将纸带沿着某个位置进行折叠,问所有操作之后纸带的长度是多少.[输入格式]第一行两个数字N, ...

  2. Oracle 性能优化

    (1)      选择最有效率的表名顺序(只在基于规则的优化器中有效):ORACLE的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving table) ...

  3. Python学习笔记（2) Python提取《釜山行》人物关系

    参考:http://www.jianshu.com/p/3bd06f8816d7 项目原理:   实验基于简单共现关系,编写 Python 代码从纯文本中提取出人物关系网络,并用Gephi 将生成的网 ...

  4. IntelliJ IDEA 15，16 win 7 64位安装包以及注册码 百度云盘

    不知道发出来,有用没有,要是官网下载不了的话,可以用我的这个哦,虽然不是最新的. ideaIU-162.1447.21 ideaIU-15.0.2 win7  64系统的安装包 链接:http://p ...

  5. Mac 配置 php-fpm 时出现'/private/etc/php-fpm.conf': No such file or directory (2)

    https://github.com/musicode/test/issues/5 Mac 自带 php-fpm,在终端执行 php-fpm,会报如下错误: ERROR: failed to open ...

  6. WordPress酷炫CSS3读者墙代码

    前几日在大前端看到他站点中最新的CSS3读者墙代码,一看效果绚丽的不得鸟,立刻就开始研究了,多次研究未果,可终究是研究出来了,昨天刚成功,今天啊和童鞋来我站说读者墙头像显示不对,我一看,还真是,头像都 ...

  7. 遍历Map的方法

    1.使用 entrySet() entrySet()  -->  官方推荐将Map转换成Map.Entry对象的Set集合 Set entrys = map.entrySet(); Iterat ...

  8. 关于es5的一些新方法

    1.数组方法(1)isArray在之前我们判断数组类型的数据都是用instanceof来判断的,es5新增了对数组的判断,即Array.isArray()(2)every和some这两个方法一般用于对 ...

  9. canvas的save与restore方法的作用

    网上搜罗了一堆资料,最后总结一下. save:用来保存Canvas的状态.save之后,可以调用Canvas的平移.放缩.旋转.错切.裁剪等操作. restore:用来恢复Canvas之前保存的状态. ...

  10. HTML5 中的 canvas 画布（一）

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...