林炳文Evankaka原創作品。轉載請注明出處http://blog.csdn.net/evankaka
摘要：主要給大家介紹了AngularJs及其特性，並以3個實例來做說明。
本教程使用AngularJs版本：1.5.3
AngularJs GitHub: https://github.com/angular/angular.js/
AngularJs下載地址：https://angularjs.org/
一、AngualrJs簡介
AngularJS是由谷歌開發出來的，它是為了克服HTML在構建應用上的不足而設計的。HTML是一門很好的為靜態文本展示設計的聲明式語言，但要構建WEB應用的話它就顯得乏力了。通常，我們是通過以下技術來解決靜態網頁技術在構建動態應用上的不足：AngularJS使用了不同的方法，它嘗試去補足HTML本身在構建應用方面的缺陷。AngularJS通過使用我們稱為標識符(directives)的結構，讓瀏覽器能夠識別新的語法。例如：
（1）使用雙大括號{{}}語法進行數據綁定；
（2）使用DOM控制結構來實現迭代或者隱藏DOM片段；
（3）支持表單和表單的驗證；
（4）能將邏輯代碼關聯到相關的DOM元素上；
（5）能將HTML分組成可重用的組件。
AngularJS可以認為是一個MVC模式的框架Model-View-Controller)，其中M代碼scope,V代表Html展示元素，C代表Controller.你也可以將它看成是一個MVVW模式的框架（Model-View-ViewModel），其中其中M代碼scope中的數據,V代表Html展示元素，VW代表scope.AngularJS和Jquery的設計思想完成不同，你不需要去冗長的代碼去控制DOM元素，一些Html上的元素都和scope上的數據進行一個雙向綁定，你只需要更新scope上的數據，Html自動會發生改變。同理，你如果修改html上的數據，如input上的輸入值 ，對就的scope也會接收到你的改變，從而實時更新。當然，這只是它很小一部份的功能，更多的包括指令、路由、服務等，也可以大大加快開發的速度。下面來看看它有哪些特性
二、特性
1、 數據綁定
數據綁定可能是AngularJS最酷最實用的特性。它能夠幫助你避免書寫大量的初始代碼從而節約開發時間。一個典型的web應用可能包含了80%的代碼用來處理，查詢和監聽DOM。數據綁定使得代碼更少，你可以專注於你的應用。
傳統來說，當model變化了。 開發人員需要手動處理DOM元素並且將屬性反映到這些變化中。這個一個雙向的過程。一方面，model變化驅動了DOM中元素變化，另一方面，DOM元素的變化也會影響到Model。這個在用戶互動中更加復雜，因為開發人員需要處理和解析這些互動，然后融合到一個model中，並且更新View。這是一個手動的復雜過程，當一個應用非常龐大的時候，將會是一件非常費勁的事情。
2、模板
在AngularJS中，一個模板就是一個HTML文件。但是HTML的內容擴展了，包含了很多幫助你映射model到view的內容。
HTML模板將會被瀏覽器解析到DOM中。DOM然后成為AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板來生成一些指導，即，directive（指令）。所有的指令都負責針對view來設置數據綁定。
我們要理解AuguarJS並不把模板當做String來操作。輸入AngularJS的是DOM而非string。數據綁定是DOM變化，不是字符串的連接或者innerHTML變化。使用DOM作為輸入，而不是字符串，是AngularJS區別於其它的框架的最大原因。使用DOM允許你擴展指令詞匯並且可以創建你自己的指令，甚至開發可重用的組件。
3、MVC
針對客戶端應用開發AngularJS吸收了傳統的MVC基本原則。MVC或者Model-View-Controll設計模式針對不同的人可能意味不同的東西。AngularJS並不執行傳統意義上的MVC，更接近於MVVM（Model-View-ViewModel)。其中MVC原理圖可以看看下面的圖片。
4、依賴注入（Dependency Injection，即DI）
AngularJS擁有內建的依賴注入子系統，可以幫助開發人員更容易的開發，理解和測試應用。
DI允許你請求你的依賴，而不是自己找尋它們。比如，我們需要一個東西，DI負責找創建並且提供給我們。
5、Directives（指令）
指令是我個人最喜歡的特性。你是不是也希望瀏覽器可以做點兒有意思的事情？那么AngularJS可以做到。
指令可以用來創建自定義的標簽。它們可以用來裝飾元素或者操作DOM屬性。
三、實例講解
（1）入門實例一
- <!DOCTYPE html>
- <html lang="en" ng-app="">
- <head>
- <meta charset="UTF-8">
- <title>AngularJS入門學習</title>
- <script type="text/javascript" src="./1.5.3/angular.min.js"></script>
- </head>
- <body>
- <p><input type="text" ng-model = "inputValue">請輸入內容</p>
- <h1>您輸入的內容為：{{inputValue}}</h1>
- </body>
- </html>
結果：
注意事項：
文本輸入指令<input ng-model="inputValue" />綁定到一個叫inputValue的模型變量。
雙大括號標記將yourname模型變量添加到問候語文本。
你不需要為該應用另外注冊一個事件偵聽器或添加事件處理程序！
這個頁面非常簡潔，如果用Jquery寫，那么就得設置input框 的chang中事件，然后更新內容。這一過程比AngularJS來得繁瑣多了。
（2）入門實例2
下面現來看一個帶Controller層的：
- <!DOCTYPE html>
- <html lang="en" ng-app="myApp">
- <head>
- <meta charset="UTF-8">
- <title>AngularJS入門學習</title>
- <script type="text/javascript" src="./1.5.3/angular.min.js"></script>
- </head>
- <body ng-controller = "myController">
- <p><input type="text" ng-model = "inputValue">請輸入內容</p>
- <h1>您輸入的內容為：{{inputValue}}</h1>
- </body>
- <script type="text/javascript">
- var app = angular.module('myApp', []);//獲得整個angularJS影響的html元素
- //控制器
- app.controller('myController', function($scope) {
- $scope.inputValue = "林炳文Evankaka";
- });
- </script>
- </html>
注意，ng-app="myApp",這個不能少，還有ng-controller=“”也不能少，這兩個分別批明了AngularJS有效的范圍和Controller層有效的范圍。
效果如下：
這里因為我們設置了$scope.inputValue = "林炳文Evankaka";，所以一打開頁面，input中就已自動填充 "林炳文Evankaka";
myController——控制器方法的名字和<body>標簽里面的ngController指令的值相匹配。
input的數據此時與注入到我們控制器函數的作用域（$scope）相關聯。當應用啟動之后，會有一個根作用域被創建出來，而控制器的作用域是根作用域的一個典型后繼。這個控制器的作用域對所有<body ng-controller="myController">標記內部的數據綁定有效。
(3)入門實例3
接下來使用一個帶有多種ng指令的實例，這時實現的功能是點擊按鈕一下，顯示內容，再點擊一個，隱藏內容
- <!DOCTYPE html>
- <html lang="en" ng-app="myApp">
- <head>
- <meta charset="UTF-8">
- <title>AngularJS入門學習</title>
- <script type="text/javascript" src="./1.5.3/angular.min.js"></script>
- </head>
- <body ng-controller = "myController">
- <button ng-click= "myClick()" ></button>
- <h1 ng-if = "!flag"> 我是林炳文Evankaka</h1>
- </body>
- <script type="text/javascript">
- var app = angular.module('myApp', []);//獲得整個angularJS影響的html元素
- //控制器
- app.controller('myController', function($scope) {
- $scope.flag = false;
- $scope.myClick = function(){
- console.log($scope.flag);
- $scope.flag = !$scope.flag ;
- console.log($scope.flag);
- }
- });
- </script>
- </html>
參考文章：http://www.apjs.net/
from: http://blog.csdn.net/evankaka/article/details/51078043