javascript
[AngularJS]Chapter 1 AnjularJS简介
??? 創建一個完美的Web應用程序是很令人激動的，但是構建這樣應用的復雜度也是不可思議的。我們Angular團隊的目標就是去減輕構建這樣AJAX應用的復雜度。在谷歌我們經歷過各種復雜的應用創建工作比如：GMail、Map和日歷。我們認為我們有必要把這些經驗總結下來傳授給大家。
??? 我們希望在編寫web應用程序時就像是我們第一次寫代碼一樣，寫完了回過頭驚奇地看著將會發生什么。我們希望在編碼的過程像是在創造而不是為了滿足瀏覽器內部怪異的工作原理。
與此同時，我們需要一個能使設計一種容易創建和使用的應用變得簡單的環境，這種環境也能使程序易于測試盒拓展和維護當這個程序變得龐大的時候。
我們打算使用AnjularJS來作為這樣環境的開發框架。我對我們已經取得的成就感到非常滿意。這也主要歸功于幫助AnjularJS更加完善，教了哦我們一些東西的和AnjularJS相關的開源社區。我希望你能加入我們使AnjularJS更加完善。、
【概念】
當你構建anjularJS應用的時候，你會遇到這樣幾個核心概念。這些并不是我們發明的，而是我們從其他框架中借鑒過來的。
【客戶端模板】
多頁面的web應用程序通過后臺服務器程序在HTML中填充數據，然后把結果返回給瀏覽器。單頁面應用程序也成為AJAX應用程序也是這樣做的，但是做了一些拓展。anjularJS所不同的是它是在客戶端完成HTML模板和數據的組合工作。這樣，服務端就成了為前端提供靜態資源的角色，并對這些資源進行維護。
讓我們舉個例子來看看anjularJS是如何在前端組合HTML模板和數據的。我們來舉一個hello，word例子，但我們并不把Hello，world寫在html里，我們把hello這個問候語寫成我們可以再以后更改的數據形式。
我們寫這樣一段HTML
1 <html ng-app> 2 <head> 3 <script src="angular.js"></script> 4 <script src="controllers.js"></script> 5 </head> 6 <body> 7 <div ng-controller='HelloController'> 8 <p>{{greeting.text}}, World</p> 9 </div> 10 </body> 11 </html> View Code在Controller.js中這樣寫邏輯
1 function HelloController($scope) { 2 $scope.greeting = { text: 'Hello' }; 3 } View Code運行這個頁面我們將看到這樣的結果
Hello，world
這里有兩件跟我們現在廣泛使用的方法所不同的事要特別指出一下。
1、這里面沒有id或class來制定從哪指定事件。
2、當hellocontroller設置了greeting.text的值為hello，我們沒有注冊任何事件監聽者和回調函數。
3、hellocontroller只是一個單純的js函數，沒有繼承任何anjularJS提供的東西。
4、hellocontroller有一個$scope變量，并且之前我們沒有創建它。
5、我們沒有調用hellocontroller，也沒指定啥時候調用它。
我們之后再說其他不同的地方。但是現在你應該知道anjularJS的應用程序和我們之前構造的應用程序有很大不同
我們為什么這樣設計，anjularJS是如何工作的？我們看看anjularJS從其他地方借鑒來的東西先。
【模型-視圖-控制器（MVC）】
MVC應用程序架構是在19世紀70年代作為Smalltalk的一部分提出來的。自從被提出以來。它就成為了構建應用程序的流行架構。無論Java、c++還是OC都能看到MVC的影子。但是MVC對于web應用構建還是很不成熟。
MVC的核心就是處理數據、邏輯和界面的分開。
視圖從模型中取得數據，展示給用戶。當用戶和應用程序交互的時候。控制器來負責相應。然后更新模型中的數據，模型通知視圖數據的改變然后展示給用戶。
在Anjular應用程序中，屬兔就是DOM，控制器是JavaScript的類，模型數據存儲在對象屬性中。
我們認可MVC因為有這幾個原因：首先，它給你一個元數據模型來讓你存數據，這樣你不用每次用的時候重新產生數據。你的項目會在理解你寫了什么上有優勢，當他們知道你在使用MVC結構來組織你的代碼。也許最重要的我們要讓你的app易于拓展維護和測試。
【數據綁定】
以前的AJAX單頁面應用程序很常見，這樣的平臺有Rails,PHP，JSP幫助我們創建用戶界面通過拼湊html和數據的方式，然后再把這些送回客戶端展示出來。
類似于就Query這樣的庫拓展了這種方式到客戶端，并且使我們以一種相同的方式。但是能單獨的更新DOM，而不是更新整個頁面。這里，我們組合HTML模版和數據，然后插入結果到DOM中通過設置某一元素的innerHtml。
這樣的方式很好。但是當你想插入新的數據到UI中，或者改變基于用戶輸入的數據到正確的狀態，在UI和JavaScript屬性里。
但是如果我們能完成這些而不用寫代碼。如果我們只是生命那部分UI映射那部分JavaScript屬性。讓他嗯自動一步同步。這種編程的風格叫做數據綁定。我們把這種方式包含在anjularJS中是引文他能與MVC協同工作的很好。這能減少代碼當你寫視圖和模型。把數據從一個地方移動到另一個地方的工作是自動完成的。
我們做一個例子解釋。hellocontroller設置了模型greeting.text一次，之后就沒再改變。我們修改這個例子通過添加一個能改變greeting.text值的文本框使greeting.text可變。
1 <html ng-app> 2 <head> 3 <script src="angular.js"></script> 4 <script src="controllers.js"></script> 5 </head> 6 <body> 7 <div ng-controller='HelloController'> 8 <input ng-model='greeting.text'> 9 <p>{{greeting.text}}, World</p> 10 </div> 11 </body> 12 </html> View Code在瀏覽器中加載這個文件，我們看到如下的結果
[hello]
hello,world
沒有注冊一個文本框文字改變事件，我們的UI自動更新啦！這也會發生在與服務器的交互過程中。在我們的控制器中，我們能夠向服務器我們
依賴注入
我們之前提到過但是還有很多關于hellocontroller我們沒提到的。例如，$scope對象自動進行綁定數據。我們不需要通過調用任何方法創建它。我們只需要把它放到hellocontroller的函數體里。
我們這章的后半部分將要提到，$scope不是唯一我們可以訪問到的對象。如果我們想綁定數據到用戶瀏覽器的URL上。我們可以請求管理這項事務的對象通過把$location放到函數參數列表中，像這樣：
function HelloController($scope, $location) {
$scope.greeting = { text: 'Hello' };
// use $location for something good here...
}
我們通過Anjular的依賴注入系統得到這樣神奇的效果。依賴注入使我們遵循這樣一種開發方式：不創建依賴，我們的類知道他們需要什么
這遵循了一種設計模式叫做Law of Demeter，也叫做最低知識準則。我們的hellocontroller的工作是去創建一個greeting模型的初始狀態，這種模式不用擔心其他的一些事，比如￥scope是如何創建的或者從哪找到他。
Directives
Anjular最好的部分就是你可以寫HTML模板。你能這樣做是因為框架的核心包含了一個強大的DOM轉換引擎，使你能夠拓展html的語法。
我們已經看見了模板中好多不是HTML的新的特性，例子包含了這樣的數據綁定特性，ng-controller來制定哪一個控制器開控制試圖的哪部分。還有ng-model綁定了模型的輸入部分。我們把這些html拓展稱之為directivesAnjular提供了很多directives幫你為你的app定義視圖，我們將要介紹更多這些東西。這些directives定義了我們。他們能只是設定你的應用程序工作或者被用來創建可重用的組件。
當然，你也不是只能使用Anjular提供哦你的Directives。你可以寫你自己的HTML模板拓展能力來滿足你的需要。
【一個例子：購物車】
讓我們看一個稍微大一點的例子。此例中展示了Augular更多的特性。我們想象一下我們要干什么去創建我們購物app。在這個app的某些地方我們將顯示用戶的購物車并且讓他編輯。讓我們掠過中間的步驟。
<html ng-app='myApp'>
<head>
<title>Your Shopping Cart</title>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script src="angular.js"></script>
<script>
function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
</script>
</body>
</html>
下面就是一個簡單的介紹。本書的其他部分再做深入講解。
我們從頭部開始
<html ng-app>
ng-app屬性告訴Anjular要管理頁面的那些部分。我們把它加到了HTML元素上。我們將桃酥Anjular我們想要它管理整個頁面。這樣做是很常見的。但是你可能想把它放到一個div里。在這個app里如果你想用一個已經存在的使用特定方法的app使用集成Anjular來管理頁面
<body ng-controller='CartController'>
在Angular中，你管理頁面某一部分的javascript類叫做controller。通過包含控制器在body標簽，我就生命了CartController將要管理所有<body>標簽中的所有內容。
<div ng-repeat='item in items'>
ng-repeat屬性告訴這里邊的東西是要循環顯示的，，本例中將會產生三個div，每個都有產品題目，單位價格，總價，還有一個移除按鈕。
<span>{{item.title}}</span>
通過{{}}來進行數據綁定，我們能從頁面的其他部分插入數據，然后使他保持同步
<input ng-model='item.quantity'>
ng-model做了文本域和屬性之間的數據綁定。
{{}}是一種單向數據綁定。我們同步數據的改變通過使用ng-model。當用戶填寫了一個新值的時候，ng-model改變了item.quantity的值。
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
anjular提供了一種特性叫做過濾器，使我們能夠格式化文本。有這么一些列過濾器叫做currency過濾器能格式化美元。
<button ng-click='remove($index)'>Remove</button>
我們傳入了一個$index參數，它代表了ng-repeat的序號，所以我們知道要刪除的是誰。
function CartController($scope) {
這個CartController處理購物車的業務邏輯。我們告訴Anjular這個控制器需要$scope。$scope就是使我們能夠綁定數據到UI中的東西
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
本例中加的這個items要在UI中顯示。
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
我們想讓remove()方法在UI可用，所以我們把它加入到了$scope變量里。
【下章預告】
本章很簡單。下面講述更多東西。
轉載于:https://www.cnblogs.com/tonghounb/p/3474289.html
總結
以上是生活随笔為你收集整理的[AngularJS]Chapter 1 AnjularJS简介的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 透视投影中3DMM系数的求解
- 下一篇： 图的定义与术语 - 数据结构和算法54