1.背景介绍
angular的简介
以前开发（web或者移动端）前端主要使用jQuery+原生js,如果使用某些前端UI框架的话，它自己还可能提供一些API可以使用。而且目前很多UI框架都是基于jQuery的，所以说一下由jQuery跨到angularjs跨度较大，研究了一段时间的angularjs ,下面从整体上说说感受吧:
关于和jquery的比较
首先angular是一个mvc框架，它与jquery不同之处在于，前者致力于mvc代码解耦，采用model,controller以及view方式去组织代码，而后者提供给你了很多APi函数，你可以不用写很多原生js去实现比较复杂的效果，比如说动画，$.animate,这样的效果如果需要原生js来写的话，代码量将会比较庞大;
其次，jQuery没有定义你的代码如何组织，你可以将它放在一个单独的js文件中进行引用，也可以直接写在页面中采用script标签进行包裹，甚至可以直接以内联的方式写在html标签中，但是angularjs会将一个HTML页面分成若干个模块，每个模块都可以自己的scope，service以及directive，各个模块之间也可以进行通信，但是整体上结构是比较清晰的，就是说其代码组织方式是模块化的。
最后，jQuery的思想是先设计好页面，然后在已有页面的基础上进行dom操作后展示页面，但是angular的view可能仅仅是一个框架，对view的dom操作或者时间监听都是在directive中实现的，而且一般情况下很少自己直接去写Dom操作代码，只要你监听model。model发生变化后view也会发生变化。
2.知识剖析
angular JS的核心特征：
最后，jQuery的思想是先设计好页面，然后在已有页面的基础上进行dom操作后展示页面，但是angular的view可能仅仅是一个框架，对view的dom操作或者时间监听都是在directive中实现的，而且一般情况下很少自己直接去写Dom操作代码，只要你监听model。model发生变化后view也会发生变化。
2.数据绑定
典型的DOM操作，都是先将数据处理完毕之后，再通过元素上设置innerHTML将结果插入到所要的DOM中;这样的工作重复性很高，还要确保界面和javascript属性中获取到数据时正确的状态。 而在angular中一但建立双向绑定，使用者输入，会由Angular自动传到一个变量中，再自动读到所有绑到它的内容，更新它，效果上就是立即的资料同步， 在程式码中修改变量，也会直接反应到呈现的试图上。
如：
html
{{greeting.text}}, World
js
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
input的值（用户的输入）与greeting.text绑定在一起，并及时呈现在中。绑定是双向的，也可用通过设置$scope.greeting.text的值，并自动同步到输入框和双大括号（{{}}）中
3.依赖注入
依赖注入)是一种软件设计模式,用于处理如何让程序获得其依赖(对象的)引用,提高代码的重用性和灵活性
如:
$scope对象吧数据绑定自动通过HelloController构造函数传递给开发者，$scope并不是我们唯一需要的，还可以添加一个$location对象，
function HelloController($scope, $location) {
$scope.greeting = { text: 'Hello' };
// use $location for something good here...
}
小知识：通过Angular的依赖注入系统，我们能够遵循迪米特法则（最少知识原则），只关注我们最需要的部分。
4.模块化
代码模块化，每个模块的代码独立拥有自己的作用域，model，controller等。
5.指令
Angular包括一个强大的DOM转换引擎，使得开发者有能力扩展HTML语法。在之前的实例中我们看到{{}}是用绑定数据的，ng-controller是用来指定哪个控制器来服务哪个视图，ng-model将一个输入框绑定到模型部分。我们称之为HTML扩展指令。
3.常见问题
如何在代码中体现？
4.解决方案
下面我们就通过编码实战的方式来书写一个购物车示例
5.编码实战
div ng-app=""
div ng-controller="CartController"
div ng-repeat="item in items"
span ng-bind="item.title"
input ng-model="item.quantity"
span ng-bind="item.price | currency"
span ng-bind="item.price * item.quantity | currency"
button ng-click="remove($index)"
JS
function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function (index) {
$scope.items.splice(index, 1);
}
}
6.扩展思考
示例代码中，angular是如何运行的？每个指令的都做了些什么？
div ng-app
ng-app告诉Angular管理页面的那一部分。根据需要ng-app也可以放在上
div ng-controller="CartController"
Javascript类叫做控制器，它可以管理相应页面区域中的任何东西。
div ng-repeat="item in items"
ng-repeat代表为items数组中每个元素拷贝一次该DIV中的DOM，同时设置item作为当前元素，并可在模板中使用它。
span{{item.title}}/span
表达式{{item.title}}检索迭代中的当前项，并将当前项的title属性值插入到DOM中
input ng-model="item.quantity"
ng-model定义输入字段和item.quantity之间的数据绑定
span>{{item.price | currency}}/span
单价和总价格式化成美元形式。通过Angular的currency过滤器进行美元形式的格式化。
button ng-click="remove($index)"> Remove /button
通过ng-repeat的迭代顺序$index，移除数据和相应的DOM（双向绑定特性）
function CartController($scope) { CartController 管理这购物车的逻辑，$scope 就是用来把数据绑定到界面上的元素
$scope.items = [ {title: 'Paint pots', quantity: 8, price: 3.95}, {title: 'Polka dots', quantity: 17, price: 12.95}, {title: 'Pebbles', quantity: 5, price: 6.95} ];
通过定义$scope.items，我们已经创建一个虚拟数据代表了用户购物车中物品集合，购物车是不能仅工作在内存中，也需要通知服务器端持久化数据。
$scope.remove = function(index) {$scope.items.splice(index, 1);};
remove()函数能够绑定到界面上，因此我们也把它增加到$scope 中
git连接：https://github.com/ptteng/PPT/blob/master/PPT
视频连接
