简介：AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
一、AngularJS大致功能模块
二、页面交互变得简单
1、示例：计算价格
<html> <head> <Meta name="viewport" content="width=device-width" /> <Meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <title>示例</title> </head> <body> <div ng-app="" ng-init="quantity=1;price=5"> <h2>价格计算器</h2> 数量： <input type="number" ng-model="quantity"> 价格： <input type="number" ng-model="price"> <p><b>总价：</b> {{ quantity * price }}</p> </div> </body> </html>
效果：
我感觉都没写js代码，就完成了一个计算逻辑！
@H_301_156@2、示例：表单值不需要写js代码来获取json值<html> <head> <Meta name="viewport" content="width=device-width" /> <Meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <title>示例</title> </head> <body> <div ng-app="myApp" ng-controller="formCtrl"> <form novalidate> First Name:<br> <input type="text" ng-model="user.firstName"><br> Last Name:<br> <input type="text" ng-model="user.lastName"> <br><br> <button ng-click="reset()">RESET</button> </form> <p>表单值 = {{user}}</p> <p>初始值 = {{inituser}}</p> </div> <script> var app = angular.module('myApp',[]); app.controller('formCtrl',function ($scope) { $scope.inituser = { firstName: "John",lastName: "Doe" }; $scope.reset = function () { $scope.user = angular.copy($scope.inituser); }; $scope.reset(); }); </script> </body> </html>
效果：
页面输入值改变，不需要重新取值，比如使用jquery，不使用angular，则需要这样取值：
var json={};
json.firstName=$("#firstName").val();
json.lastName=$("#lastName").val();
现在这样简单是方便了不止一点！
2、示例：绑定事件让代码变得更容易维护
<html>
<head>
<Meta name="viewport" content="width=device-width" />
<Meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<title>示例</title>
</head>
<body ng-app="myNoteApp" ng-controller="myNoteCtrl">
<h2>我的笔记</h2>
<textarea ng-model="message" cols="40" rows="10"></textarea>
<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>
<p>剩余字数: <span ng-bind="left()"></span></p>
<script> var app = angular.module("myNoteApp",[]); app.controller("myNoteCtrl",function ($scope) { $scope.message = ""; $scope.left = function () { return 100 - $scope.message.length; }; $scope.clear = function () { $scope.message = ""; }; $scope.save = function () { alert("Note Saved"); }; }); </script>
</body>
</html>
效果：
这里的message字数改变，会触发修改剩余字数提示。
未使用angular时，我们会把这样改变绑定在message的change事件上，这样，要查剩余字数的代码，必须要想到是message的事件,类似这样：
$("#message").change(function({ $("#leftwordcount").text(left()); });
现在是查到剩余字数对应span的ng-bind事件，就能知道是哪里实现了这个逻辑，更容易找到实现方法从而更加易于维护这种实现。
三、其他总结
比如我学习到angular的http部分,语法更加简单，只要传重要的参数就行，不用jquery http那么多选项，对于简单的数据请求更加易于使用：
$http.get(‘/someUrl’,config).then(successCallback,errorCallback);
$http.post(‘/someUrl’,data,errorCallback);
当然，也可能是有些方法封装好了，参数减少，同时也不适用于复杂场景的处理，我觉得angular结合其他js框架的使用，才能达到一个相对完美的状态吧，一个框架肯定是不能满足所有使用需求的。不过多了解一个框架，就可能会在需要它的时候想起来用它。
附angular基础内容学习网址：http://www.runoob.com/angularjs/angularjs-tutorial.html
