AngularJS有着诸多特性，最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入，等等。
官网地址：http://angularjs.org
中文网站：http://www.apjs.net
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。
通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:
类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有:jQuery等
框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。
AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如:
使用双大括号{{}}语法进行数据绑定;
使用DOM控制结构来实现迭代或者隐藏DOM片段;
支持表单和表单的验证;
能将逻辑代码关联到相关的DOM元素上;
能将HTML分组成可重用的组件。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
1 <div ng-app="" ng-init="quantity=1;price=5"> 2 3 <h2>价格计算器</h2> 4 5 数量： <input type="number" ng-model="quantity"> 6 价格： <input type="number" ng-model="price"> 7 8 <p><b>总价：</b> {{ quantity * price }}</p> 9 10 </div>
$scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
$scope是一个对象，有可用的方法和属性。
$scope可应用在视图和控制器上。
ng-controller 指令定义了应用程序控制器。
1 <div ng-app="myApp" ng-controller="myCtrl"> 2 {{ firstName + " " + lastName }} 3 </div> 4 5 <script> 6 7 var app = angular.module("myApp", []); 8 9 app.controller("myCtrl", function($scope) { 10 $scope.firstName = "John"; 11 $scope.lastName = "Doe"; 12 }); 13 14 </script>
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ang</title> 6 </head> 7 <body ng-app="myApp" > 8 <div id="app"> 9 <input type="text" ng-model="msg" > 10 11 </div> 12 <h1 ng-bind="data"></h1> 13 <div ng-controller="myCrl"> 14 <button ng-click="togglePage('first')">1</button> 15 <button ng-click="togglePage('second')">2</button> 16 <button ng-click="togglePage('third')">3</button> 17 <div ng-show="showpage.first" ng-bind='"kd"'></div> 18 <div ng-show="showpage.second" ng-bind='"la"'></div> 19 <div ng-show="showpage.third" ng-bind='"pa"'></div> 20 21 <script src="angular.min.js"></script> 22 <script> 23 var app = angular.module("myApp", []); 24 25 26 app.controller("myCrl", function($scope){ 27 $scope.showpage = { 28 first: true, 29 second: false, 30 third: false 31 } 32 33 $scope.togglePage = function(page){ 34 for(var i in $scope.showpage){ 35 $scope.showpage[i]=false; 36 } 37 $scope.showpage[page]= true; 38 } 39 }) 40 </script> 41 </body> 42 </html>
ng-bind绑定 <p> 内的 innerHTML 到变量 myText:
1 <div ng-app="" ng-init="myText='Hello World!'"> 2 3 <p ng-bind="myText"></p> 4 5 </div>
ng-click 指令定义了 AngularJS 点击事件。
ng-show
ng-show指令用于设置应用部分是否可见。
ng-show="true" 设置 HTML 元素可见。
ng-show="false" 设置 HTML 元素不可见
ng-hide
ng-hide 指令用于设置应用部分是否可见。
ng-hide="true" 设置 HTML 元素不可见。
ng-hide="false" 设置 HTML 元素可见。
你可以通过 AngularJS 的 angular.module 函数来创建模块：
1 var app = angular.module("myApp", []); 2 3 4 app.controller("myCrl", function($scope){ 5 $scope.showpage = { 6 first: true, 7 second: false, 8 third: false 9 } 10 11 $scope.togglePage = function(page){ 12 for(var i in $scope.showpage){ 13 $scope.showpage[i]=false; 14 } 15 $scope.showpage[page]= true; 16 } 17 })