初识Angular

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>

View Code

$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>

View Code

控制器是 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>

View Code

ng-bind绑定 <p> 内的 innerHTML 到变量 myText:

1 <div ng-app="" ng-init="myText='Hello World!'">
2 
3 <p ng-bind="myText"></p>
4 
5 </div>

View Code

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     })

View Code

异乡小龟