由于过一段时间需要给小学弟小学妹讲一讲前后端交互的例子。 趁机整理一下原来的知识。
前后端交互，在我的理解来看，是为了保证数据的同步为目的的。 按照它动作的重心又可以分为 前端主导型，后端主导型。 前端主导型也就是在一个页面的主体文档请求到了后，后面所有的内容都是通过请求json数据，或者说文本段 来进行交互，那么它就必须在前端控制视图的一致性，也就是通过js来操作使得页面同步。也就是所谓的ajax异步请求。因为说到异步请求，更多的指数据的同步，却忽略了视图的同步。 后端主导型就是前台只负责向后台发送请求或者信号，所有的操作比如数据同步，视图同步都是通过服务器端完成，它是通过dom文档进行交互，也就是text/html格式的文本段。常见的比如jsp,velocity等。
所以说，以数据和视图的同步为目的的话，我以前更多的是采用jq的方式。 众所周知，jq对js做了简单的封装，它是基于事件驱动的。 也就是我们要做视图同步的时候，必须对事件进行处理派发，重写各个块的代码以完成业务逻辑，而通常业务逻辑又是惊人一致，所以自然产生了很多冗余代码。。 况且，js取数据的方式也让自己有一些烦躁，想一想自己要在一个具有两三百行密密麻麻的html文本代码中，要在几十个id中，要在近百个class中，定位自己的元素的场景吧！ 首先自己对id的命名和class的命名就是第一个考验。 其次，如何保证自己不在一次一次的枯燥操作中失去理智关电脑跑路。。
angularjs的出现，可以说很好的处理了这些问题。 2016年以来出现的前端三大框架vue,react,angular它们都是基于mvvc模式。 也就是说是以数据驱动的，那些简单枯燥的同步工作我就不做了，解放了双手，同时解放了大脑。。 此外，angularjs提供了双向绑定这样一个神器，再也不需要去一堆堆代码里面定位某个属性了。 可以简单的讲页面分为几个对象，我们直接操作对象就行了。 大大的解耦了html与js脚本。 当然angularjs 与angular差别又大了很多，就不考虑了。 但是至少我们有必要用angularjs做交互。。
原因就说这么多，下面就开始基础内容的整理。
当网页加载完毕，AngularJS 自动开启。
**ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。**
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
ng-init 指令初始化 AngularJS 应用程序变量。
HTML5 允许扩展的（自制的）属性，以 data- 开头。AngularJS 属性以 ng- 开头，但是您可 以使用 data-ng- 来让网页对 HTML5 有效。
AngularJS 表达式写在双大括号内：{{ expression }}。等同于 ng-bind
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。
AngularJS 对象就像 JavaScript 对象
AngularJS 数组就像 JavaScript 数组
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-repeat 指令会重复一个 HTML 元素
ng-model是用于表单元素的，支持双向绑定。对普通元素无效； ng-bind用于普通元素，不能用于表单元素，应用程序单向地渲染数据到元素；
当ng-bind和{{}}同时使用时，ng-bind绑定的值覆盖该元素的内容
Valid: true (如果输入的值是合法的则为 true)。
Dirty: false (如果值改变则为 true)。
Touched: false (如果通过触屏点击则为 true)
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}
AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
过滤器可以使用一个管道字符（|）添加到表达式和指令中
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写
AngularJS 内建了30 多个服务。
有个 $location 服务，它可以返回当前页面的 URL 地址。
$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据
在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出
ng-disabled 指令 ng-show 指令 ng-hide 指令 ng-click 指令
模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。
可以通过 AngularJS 的 angular.module 函数来创建模块
ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使 用预定义的 class 来设置 HTML 元素的动画。
AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：
value
factory
service
provider
constant
接着以一个实际的例子来感受一下angualrjs的便利吧：
第一步：在近70行代码中定义angularjs的应用。
第二步，在需要双向交互的地方定义模型。 这里可以看到它的强大之处在于，无拘无束的创作对象。 也就是说数据模型的名称可以自定义，属性可以自定义，且属性还可指定属性。 通过angularjs能够很轻松的在js中取得这些对象。
第三部，定义控制器。 它的一个直观作用在于： 当页面很长很复杂的时候，我可以通过这个达到一个逻辑划分的效果。 这样的话相当于开辟了几个独立的域。 在命名方面也就不用再考虑了。 况且这种面向数据的方式也不会存在命名枯竭的问题。。。 哇咔咔咔~~~
第四步，开始写自己的业务逻辑了。 它带来的特点： 使得交互即能毫不慌张的处理全局，又不失风度的分而治之。
最后，来看一看常见的angualrjs的包结构，有一定的参考意义。
