AngularJS有着诸多特性，最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入，等等。
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 })