控件（input、select、textarea）是用户输入数据的一种方式。Form（表单）是这些控件的集合，目的是将相关的控件进行分组。表单和控件提供了验证服务，所以用户可以收到无效输入的提示。这提供了更好的用户体验，因为用户可以立即获取到反馈，知道如何修正错误。请记住，虽然客户端验证在提供良好的用户体验中扮演重要的角色，但是它可以很简单地被绕过，因此，客户端验证是不可信的。服务端验证对于一个安全的应用来说仍然是必要的...
一、什么是Module？很多应用都有一个用于初始化、加载（wires是这个意思吗？）和启动应用的main方法。angular应用不需要main方法，作为替代，module提供有指定目的的声明式，描述应用如何启动。这样做有几项优点： 这过程是声明描述的，更加容易读懂。在单元测试中，不需要加载所有module，这对写单元测试很有帮助。额外的module可以被加载到情景测试中，可以覆盖一些设置，帮助进行应用的端对端测试（end-to-end test）。第三方代...
一、什么是Scope？scope（http://code.angularjs.org/1.0.2/docs/api/ng.$rootScope.Scope）是一个指向应用model的object。它也是expression（http://www.cnblogs.com/lcllao/archive/2012/09/16/2687162.html）的执行上下文。scope被放置于一个类似应用的DOM结构的层次结构中。scope可以监测（watch,$watch）expression和传播事件。 二、scope的特性 scope提供$watch API（http://code.angularjs.org/1.0.2/docs/api/ng.$rootScop...
跨域，前端开发中经常遇到的问题，AngularJS实现跨域方式类似于Ajax，使用CORS机制。 下面阐述一下AngularJS中使用$http实现跨域请求数据。 AngularJS XMLHttpRequest：$http用于读取远程服务器的数据 $http.post(url, data, [config]).success(function(){ ... }); $http.get(url, [config]).success(function(){ ... }); $http.get(url, [config]).success(function(){ ... });一、$http.jsonp【实现跨域】 1.指定callback和回调...
我们在上一步做了很多基础性的训练，所以现在我们可以来做一些简单的事情喽。我们要加入全文检索功能（没错，这个真的非常简单！）。同时，我们也会写一个端到端测试，因为一个好的端到端测试可以帮上很大忙。它监视着你的应用，并且在发生回归的时候迅速报告。 请重置工作目录： git checkout -f step-3我们的应用现在有了一个搜索框。注意到页面上的手机列表随着用户在搜索框中的输入而变化。 步骤2和步骤3之间最重要的不同在下面...
在这一步你会增加一个让用户控制手机列表显示顺序的特性。动态排序可以这样实现，添加一个新的模型属性，把它和迭代器集成起来，然后让数据绑定完成剩下的事情。 请重置工作目录： git checkout -f step-4你应该发现除了搜索框之外，你的应用多了一个下来菜单，它可以允许控制电话排列的顺序。 步骤3和步骤4之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 模板 app/index.html Search: <input ng-model="query"> S...
到现在为止，我们使用是硬编码的三条手机记录数据集。现在我们使用AngularJS一个内置服务$http来获取一个更大的手机记录数据集。我们将使用AngularJS的依赖注入（dependency injection (DI)）功能来为PhoneListCtrl控制器提供这个AngularJS服务。 请重置工作目录： git checkout -f step-5刷新浏览器，你现在应该能看到一个20部手机的列表。 步骤4和步骤5之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 数据 你项目...
这一步，你会为手机列表的手机添加缩略图以及一些链接，不过这些链接还不会起作用。接下来你会使用这些链接来分类显示手机的额外信息。 请重置工作目录： git checkout -f step-6现在你应该能够看到列表里面手机的图片和链接了。 步骤5和步骤6之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 数据 注意到现在phones.json文件包含了唯一标识符和每一部手机的图像链接。这些url现在指向app/img/phones/目录。 app/pho...
在这一步，你将学习如何创建一个布局模板并且通过路由功能来构建一个具有多个视图的应用。 请重置工作目录： git checkout -f step-7注意到现在当你转到app/index.html时，你会被重定向到app/index.html#/phones并且相同的手机列表在浏览器中显示了出来。当你点击一个手机链接时，一个手机详细信息列表也被显示了出来。 步骤6和步骤7之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 多视图，路由和布局模板 我们的应...
在这一步，你将实现手机详细信息视图，这个视图会在用户点击手机列表中的一部手机时被显示出来。 请重置工作目录： git checkout -f step-8现在当你点击列表中的一部手机之后，这部手机的详细信息页面就会被显示出来。 为了实现手机详细信息视图我们将会使用$http来获取数据，同时我们也要增添一个phone-detail.html视图模板。 步骤7和步骤8之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 数据 除了phones.json，a...
先说下缓存： 一个缓存就是一个组件，它可以透明地储存数据，以便以后可以更快地服务于请求。多次重复地获取资源可能会导致数据重复，消耗时间。因此缓存适用于变化性不大的一些数据，缓存能够服务的请求越多，整体系统性能就能提升越多。 $cacheFactory介绍： $cacheFactory是一个为Angular服务生产缓存对象的服务。要创建一个缓存对象，可以使用$cacheFactory通过一个ID和capacity。其中，ID是一个缓存对象的名称，capacity则是描...
为了说明angularJS如何增强了标准HTML，我们先将创建一个静态HTML页面模板，然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板。 在本步骤中，我们往HTML页面中添加两个手机的基本信息，用以下命令将工作目录重置到步骤1。 git checkout -f step-1请编辑app/index.html文件，将下面的代码添加到index.html文件中，然后运行该应用查看效果。 app/index.html <ul><li><span>Nexus S</span><p>Fast just got faster with Ne...
在这一步中，我们会改进我们APP获取数据的方式。 请重置工作目录： git checkout -f step-11对我们应用所做的最后一个改进就是定义一个代表RESTful客户端的定制服务。有了这个客户端我们可以用一种更简单的方式来发送XHR请求，而不用去关心更底层的$http服务（API、HTTP方法和URL）。 步骤9和步骤10之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 模板 定制的服务被定义在app/js/services，所以我们需要在布局模板...
在这一步你将学习到如何创建自己的显示过滤器。 请重置工作目录： git checkout -f step-9现在转到一个手机详细信息页面。在上一步，手机详细页面显示“true”或者“false”来说明某个手机是否具有特定的特性。现在我们使用一个定制的过滤器来把那些文本串图形化：√作为“true”；以及作为“false”。来让我们看看过滤器代码长什么样子。 步骤8和步骤9之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 定制过滤器 为...
AngularJS支持通过在单个页面上的多个视图的单页应用。要做到这一点AngularJS提供ng-view 和 ng-template指令，以及 $routeProvider 服务。 ng-viewng-view 标记只是简单地创建一个占位符，是一个相应的视图(HTML或ng-template视图)，可以根据配置来放置。 使用定义一个div与ng-view在主模块中。 <div ng-app="mainApp"> ...<div ng-view></div></div> ng-templateng-template 指令是用来创建使用script标签的HTML视图。它包含一个...