怎么样快速了解AngularJS？
相信很多初学者都有过或者类似的疑问，其实这个问题没有标准的答案，每个人的技术背景、工作经验等等都不经相同，所以学习AngularJS的切入点肯定也就不同，我之前初略使用过knockoutjs，当我第一眼看到AngularJS的Helloworld案例后，顿时就被声明式的语法和强大的双向绑定特性所吸引。
其实AngularJS的官方网站首页的几个例子已经很好的展示了AngularJS的一些特性，下面我就从几个例子一步一步的讲解AngularJS吸引人的东西并且实际项目中是怎么使用ng的。
首先还是从第一个经典的Hello world 案例说起，如下HTML（如果你在墙外，可以直接访问https://angularjs.org ，右边就有运行效果）。
<!doctype html><html ng-app> <head> <script src="http://ngnice.com/lib/angular/1.2.16/angular.js"></script></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body></html>会一点HTML的人都知道，这个界面有个input输入框，下面有个<h1>的标题，内容是 Hello {{yourName}}!。
实现的效果是：当用户在input输入框输入内容时，下面的h1标题内部实时显示 ”Hello 输入的内容!"
与普通的HTML不同之处有以下几点：
html标签上加了一个 ng-app属性，意思是整个HTML都属于AngularJS控制；
input输入框加了一个 ng-model="yourName"，这样就表明input的value与内存中的变量yourName是双向绑定的，在输入框输入”world“，内存中的yourName变量就变成了”world“，反之亦然；
h1标签内部有个{{yourName}}，这个表示内存中的yourName属性和h1节点的内容实现了双向绑定，yourName为”world“后，h1的内容就会变成”Hello world!“，"{{}}"是ng的表达式。
传统的做法：
在input上添加change事件，当触发change事件后，获取input输入框的内容，再组合字符串，通过DOM操作修改h1的innerHTML，前提可能要给 input和h1加上id或者name属性。
通过这个例子.
大家应该能够很明显的感觉到AngularJS的优势了，不用写一行JS代码，就能实现一个很完美的功能。
上面的例子只是展示了一个简单的双向绑定功能，AngularJS既然是一个MV*框架，上面说的yourName是Model，HTML是View，那么*（Controller或者ViewModel）去哪了？我稍微修改下上面的例子:
<!doctype html> <html ng-app> <head> <script src="http://ngnice.com/lib/angular/1.2.16/angular.js"></script> </head> <body> <div ng-controller="testCtrl"> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <button ng-click="clearInputValue()">Clear Input Value</button> <hr> <h1>Hello {{yourName}}!</h1> </div> <script> function testCtrl($scope) { $scope.yourName = "world"; $scope.clearInputValue = function () { $scope.yourName = ""; } } </script> </body></html>
新闻热点
疑难解答
图片精选
