上一篇中，我们介绍ng的数据绑定的方法，不知道你是否能给吸收。想了一下，为了在 ng 入门之前能够帮助大家打好基础，所以在这篇中我就用一个例子来解析 ng，并归纳一下 ng 的知识点。
案例解析
代码语言：javascript复制<html ng-app>
<!-- ng-app 告诉angular 应该管理页面的那部分，在html中声明就是管理整个html页面 -->
<head>
<title></title>
</head>
<!-- 用控制器管理body标签之间的任何东西 -->
<body ng-controller='CartController'>
<h1>订单：</h1>
<!-- ng-repeat为items数组中每个元素拷贝一个这个div中的DOM，在div每次拷贝中，同时设置一个叫item的属性代表当前元素 -->
<div ng-repeat='item in items'>
<!--将当前项的title属性插入到DOM中 -->
<span>{{item.title}}</span>
<!-- 定义创建了输入字段和item.quantity之间的数据绑定 -->
<input ng-model='item.quantity' />
<!-- currency是ng的一种过滤器 -->
<span>{{item.price|currency}}</span>
<span>{{item.price*item.quantity|currency}}</span>
<!-- ng-click点击调用remove()函数，并传递$index -->
<button ng-click="remove($index)">删除</button>
</div>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
//管理逻辑
// $scope对象：用来把数据绑定到界面上的元素
function CartController($scope){
$scope.items=[{//定义一个items集合
title:'水笔',
quantity:8,
price:3.95
},{
title:'毛笔',
quantity:10,
price:12.95
}];
//定义remove函数,将remove加到$scope中
$scope.remove=function(index){
$scope.items.splice(index,1);
};
}
</script>
</body>
</html>希望在对这个例子进行了完整的注解之后，你能更清晰的理解ng的思路,并且希望您能亲自实践一下！实践是检验真理的唯一标准嘛~
知识点归纳
1.MVC ng是基于MVC的js库，首先你要了解一下JS在MVC上的解析。
M：模型，包含应用当前状态的数据； V：视图，显示模型中的数据； C：控制器，管理模型与视图的关系。
用一张图来解释：
现在是否对javascript的MVC模式有更清晰的认识呢。
OK，我们接下来将ng.
2.angularjs知识点
首先，你要使用ng来创建一个web应用，你必须做2件事：
（1）加载angularjs；(通常我们可以使用CDN加载angularjs,因为CDN是一种“脚本跨应用缓存”，即当用户有多个使用angularjs的应用时，ng只下载一次，不会再次加载CDN。) （2）使用ng-app告知angular管理那一部分的DOM；
注释：如果在现有的一个应用中，希望使某部分用angularjs来管理，就在该部分的元素上加上ng-app，如<div ng-app></div>
其次，在我们在scope中创建数据的时候，应该使用“模型对象”的方式来包含数据，这样能避免在scope对象中原型继承引起非预期的行为。
如：
代码语言：javascript复制var messages={};//定义一个messages对象
messages.someText="hello world";//为messages的属性someText赋值
function myController($scope){
$scope.messages=messages;
}这样，我们就像数据包含在模型对象messages中啦~。
3、angular知识点——ng应用启动流程
angular应用的标准启动流程分为下列几步：
- 用户请求应用的第一个页面；
- 用户的浏览器发出一个HTTP链接到服务器，加载包含模板的index.html页面；
- angualr加载到页面，等待页面完全加载完成，然后寻找ng-app定义模板的边界；
- angular经过模板寻找标识符和捆绑，监听器和DOM操作完成了注册。同时，从服务器查询初始化数据，应用启动完成。
- 连接到服务器按需加载你额外需要展示给用户的数据。
如此下来，用angular结构化应用，将应用程序的模板和填充它们的数据分离啦爽吧~ 这样一来，模板可缓存，在第一次加载后只有新数据加载到浏览器，提升了浏览器的性能。
4、angular常用指令
ng-bind、ng-model、ng-show/hide 、ng-if
ng-checked、ng-src、ng-href、 ng-class 、
ng-selected、ng-submit 、ng-change、 ng-disabled
这些常用指令一定要熟悉它们的用法，在实际工作中很常用到。关于指令的作用可以参考一下这篇文章：http://www.jb51.net/article/60733.htm
OK，关于ng入门的实践和知识点的归纳就到这里，如果还有哪些需要了解的欢迎留言~
每篇一语：
《致命魔术》中说过，“魔术三步骤——以虚代实、偷天换日、化腐朽为神奇”，波登在影片最后告诉安杰，对艺术的牺牲才是他的secret，这也诠释了魔术的最后一步骤。所以，当你想达到一个位置的时候，助你上去的是你付出的极大的代价。安杰只做到了前两部，而波登做到了，这就是波登最终活下来的原因吧。
