前端框架，说白了，就是一系列HTML/CSS/JavaScript组件的集合，我们可以在设计时使用它们，让我们花最少的力气去实现符合标准的网站。先让我们来看下2015年前排行榜。
很显然，AngularJs是当今最热门的一个前端框架，它能快速构建企业级的web应用，已经被用于google的多款产品，有MVVM,依赖注入，自动化双向数据绑定，模块化等特性，
下面简要的介绍一下对这个框架的理解。
一：它与Jquery的区别
jquery,我想大多数前端初学者比较早接触的一种东西，总的来说就是一个库，形象的说这是个工具箱子，里面有各种工具，你要想什么工具，就自己去里面取，毫无疑问，使用jquery确实可以方便省事很多，jquery说白了，其核心就是进行DOM操作，像我们之前一直惯用的$("#..")来表示引用一个id值为..的标签，其大致核心代码如下。
1 Base.prototype.find = function (str) {
2 var childElements = [];
3 for (var i = 0; i < this.elements.length; i ++) {
4 switch (str.charAt(0)) {
5 case ‘#‘ :
6 childElements.push(this.getId(str.substring(1)));
7 break;
8 case ‘.‘ :
9 var temps = this.getClass(str.substring(1), this.elements[i]);
10 for (var j = 0; j < temps.length; j ++) {
11 childElements.push(temps[j]);
12 }
13 break;
14 default :
15 var temps = this.getTagName(str, this.elements[i]);
16 for (var j = 0; j < temps.length; j ++) {
17 childElements.push(temps[j]);
18 }
19 }
20 }
21 this.elements = childElements;
22 return this;
23 }
就是用javascript进行一系列的封装，然而，这种模式有几个比较致命的缺点，就是效率比较低，解析速度比较慢。然而AngularJs使用得当，可以避开这点。比如想要做一个根据checkbox的状态隐藏显示某一个元素，使用AngularJs，只需要几行代码就可以，如
1 <input ng-model="showSpecial" type="checkbox"> 2 <div ng-show=”showSpecial”> 3 This content will disappear and reappear if you click the checkbox above 4 </div>
具体代码没有详细列出，但是使用jquery的话，就得需要写很多行代码，就是要拿到某一个节点和属性，查看它的值，做这个操作那个操作。当然，不可否认的是jquery也是有它的优势，严格上来说两者并没有什么可比性。如果是jquery是一个工具箱，那么angularjs就是一个框架，你要用这个框架去找工具，打比方说，这个框架将下水道都已经安装好了，但是想要有水，就必须得接个水龙头，这点别人帮不了你，这个水龙头就是一个工具，这个工具你的自己去找。
二：最炫的优点之双向数据绑定
说数据绑定是AngularJs最炫酷的优点一点也不过分， 可以巧妙的实现避免书写大量的初始代码而节省大量的时间，它采用了MVC的基本思想，但是又不局限于此，它在这个的基础上有进一步改善，确确的说它是一种MVVM模式，MVVM,其英文的全称为Model-View-View-Model,相信只要不是英语白痴的人都知道这几个单词的意思，通俗的讲就是Model的改变会影响View层，View层的改变又会反过来隐影响Model层，说道这里，可能大部分同学还是比较模糊，这些都是什么鬼东西，那么接下来我就以两个实例来演示一遍
1 <!DOCTYPE HTML>
2 <html ng-app>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 <script src="angular.min.js"></script>
7 <script>
8
9 function Aaa($scope,$timeout){
10 $scope.name = ‘hello‘;
11 $scope.show = function(){
12 $scope.name = ‘九天玄男‘;
13 };
14
15 }
16
17 </script>
18 </head>
19
20 <body>
21 <div ng-controller="Aaa" ng-click="show()">
22 <p>{{name}}</p>
23 </div>
24
25 </body>
26 </html>
当我一点击页面上出现的hello时，它就会变成"九天玄男"四个字，当然这其中调用了一个ng-click指令，V层就是{{name}}，当M中的name的值改变时，其值就是发生改变，这就是所谓的M影响了View,.下面我们再来看一个关于View影响Model的实际例子。
1 <!DOCTYPE HTML>
2 <html ng-app>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 <script src="angular.min.js"></script>
7 <script>
8
9 function Aaa($scope,$timeout){
10 $scope.name = ‘hello‘;
11 }
12
13 </script>
14 </head>
15
16 <body>
17
18 <div ng-controller="Aaa">
19 <input type="text" ng-model="name">
20 <p>{{name}}</p>
21 </div>
22
23 </body>
24 </html>
当我们向View中的input输入“九天玄男”四个字时，我们会比较惊讶的发现，下面也跟着显示，而下面中的{{name}}是来源于Model中的数据，所以这就是所谓的View影响了Model。
三：几种比较常用的功能
1：ng-repeat标签
使用这个标签可以实现像ul这些标签进行完美的结合，进行迭代输出。我们同样也是可以实现指定输出的顺序，选择奇数行显示还是偶数行显示等这些功能，其扩展部分主要有$even,ng-repeat-start等。
1 <!doctype html>
2 <html ng-app=‘App‘>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 <style>
7 .active1{
8 background:red;
9 }
10 .active2{
11 background:blue;
12 }
13 </style>
14 <script src="angular.min.js"></script>
15 <script>
16 var m1=angular.module(‘App‘,[]);
17 m1.controller(‘Aaa‘,[‘$scope‘,function($scope){
18 $scope.dataList=[
19 ‘aaa‘,‘bbb‘,‘ccc‘
20 ]
21 }])
22 </script>
23 </head>
24
25 <body>
26 <div ng-controller="Aaa">
27 <li class="{{$even?‘active1‘:‘active2‘}}" ng-repeat=‘data in dataList‘>{{data}}</li>
28 </div>
29 </body>
30 </html>
使用以上这aaa,bbb,ccc,显示出来并加入相应的样式。
2：ng-style，控制css
可以先在Model中写明style，然后在View中对其进行调用。
1 <!DOCTYPE HTML>
2 <html ng-app="myApp">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 <style>
7 .red{ background:red;}
8 .yellow{ background:yellow;}
9 </style>
10 <script src="angular.min.js"></script>
11 <script>
12
13 var m1 = angular.module(‘myApp‘,[]);
14 m1.controller(‘Aaa‘,[‘$scope‘,function($scope){
15 $scope.text = ‘hello‘;
16 $scope.style = "{color:‘red‘,background:‘yellow‘}";
17 $scope.sClass = "{red:true,yellow:true}";
18 $scope.url = "http://www.baidu.com";
19 }]);
20
21
22
23 </script>
24 </head>
25
26 <body>
27 <div ng-controller="Aaa">
28 <div ng-class="{{sClass}}">{{text}}</div>
29 <div ng-style="{{style}}">{{text}}</div>
30 <a ng-href="{{url}}">a</a>
31 <a ng-attr-href="{{url}}" ng-attr-class="" ng-attr-style="">a</a>
32 </div>
33 <script>
34 //alert(1);
35 </script>
36 </body>
37 </html>
3：ng-model标签
对于这个标签我们应该是已经很熟悉了，前面讲解的双向数据绑定中也有提及，它的主要作用就是实现动态绑定，下面就以收银界面来显示这个标签所起到的作用。
1 <!DOCTYPE HTML>
2 <html ng-app>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 <script src="angular.min.js"></script>
7 <script>
8
9 function Aaa($scope,$timeout){
10 $scope.iphone = {
11 money : 5,
12 num : 1,
13 fre : 10
14 };
15 $scope.sum = function(){
16 return $scope.iphone.money * $scope.iphone.num;
17 };
18
19 $scope.$watch($scope.sum,function(newVal,oldVal){
20 $scope.iphone.fre = newVal >= 100 ? 0 : 10;
21
22 });
23
24 }
25
26 </script>
27 </head>
28
29 <body>
30
31 <div ng-controller="Aaa">
32 <p>价格:<input type="text" ng-model="iphone.money"></p>
33 <p>个数:<input type="text" ng-model="iphone.num"></p>
34 <p>费用:<span>{{ sum() | currency:‘￥‘ }}</span></p>
35 <p>运费:<span>{{iphone.fre | currency:‘￥‘}}</span></p>
36 <p>总额:<span>{{ sum() + iphone.fre | currency:‘￥‘}}</span></p>
37 </div>
38
39 </body>
40 </html>
4：$http对象
众所周知，jquery中有$ajax对象，它使用的是异步请求，但是AngularJs它不仅也使用了异步请求，更是将它用的“丧心病狂”,所有的$http都是使用异步。下面就以模拟百度搜索界面来展示该功能。
1 <!DOCTYPE HTML>
2 <html ng-app="myApp">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 <script src="angular.min.js"></script>
7 <script>
8
9 var m1 = angular.module(‘myApp‘,[]);
10 m1.controller(‘Aaa‘,[‘$scope‘,‘$http‘,‘$timeout‘,function($scope,$http,$timeout){
11 var timer = null;
12 $scope.data = [];
1314 $scope.change = function(name){
15 $timeout.cancel(timer);
17
18 timer = $timeout(function(){
19
20 $http({
21 method : ‘JSONP‘,
22 url : ‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd =‘+name+‘&cb=JSON_CALLBACK‘
23 }).success(function(data){
24 //console.log(data);
25 $scope.data = data.s;
26 });
27
28 },500);
30 };
31 }]);
32
33 </script>
34 </head>
36 <body>
37 <div ng-controller="Aaa">
38 <input type="text" ng-model="name" ng-keyup="change(name)">
39 <input type="button" ng-click="change(name)" value="搜索">
40 <ul>
41 <li ng-repeat="d in data">{{d}}</li>
42 </ul>
43 </div>
44 </body>
45 </html>
巧妙的使用$http，就可以模拟百度的搜索界面，，只要输入a，就会显示相关数据。
四：败也绑定
通过以上的介绍，尤其是最后的一个关于模拟百度搜索的，各位同学们有没有觉得AngularJs吊炸天有没有，但是凡事都是有利弊，在其数据绑定的背后，其实也是有很多时候不太方便的，因为它页面绑定的非常厉害，如果一个项目中需求发生改变时，很多数据都是绑定的，所以就会牵一发而动全身，如果这个时候进行解绑，解绑后就会引起很多其他地方的问题。而且，除此之外，它也是有一定的局限性，比如像游戏之类的网站，这就不可避免要使用到大量的DOM操作，这个时候如果使用AngularJs的话，就会引起很多的不方便，同样的，如果是太多简单的页面，也不适合使用这个框架。当然，不可否认的一点就是它确实是有很多的优势。国内比较许多比较大型的网站都是使用到这个框架。据说，曾经一个网站用了一万七千行代码，使用了这个框架之后，变成了一千多行代码。所以，我们也是学会去适当的使用这个框架。
五：小总结
因为本人是最近才学习的AngularJs,所以很多地方理解的还不是很深，像这个框架的其他特性，像依赖注入这些，只是初步学习而已，所以很多地方都没有进行细讲，接下来等自己忙完了这阵子之后，我会更进一步的去学习AngularJs,毕竟这个是一个前端开发者在未来的道路上求职的一把利器，同时，伴随着其Angular2，这个版本的出现，很多知识都会进行改变，我们所能做的就是打好基础，进一步学习。最后在陈述一遍，由于本人还只是个前端的菜鸟，对于其中的相关知识，可能理解的还不是很透彻，各路大神也千万不要喷我，前端的世界更新的太快了，想要存活下去，就必须不断的逼迫自己去学习更多新的东西与技术。
6)V(@JS6MLP{G.png)