用angularjs開發下一代web應用（二）：angularjs應用骨架（一）

用angularjs開發下一代web應用（二）：angularjs應用骨架（一）

1.調用angularjs

1>載入angularjs庫

可以從google的CDN（內容分髮網絡）中載入，擷取快，並且可以在多個應用之間緩衝指令碼庫(建議使用這種方式，但是中國的特殊國情，不能用這種方式)：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

本地主機方式。

2>使用ng-app申明angular的邊界

2.MVC

定義控制器的正確方式是，把它定義成模組的一部分，控制器可以為應用裡面相關的部分提供命名空間機制。模組可以將東西從全域命名空間隔離開。

{{someText.message}}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script><script>var myAppModule = angular.module('myApp', []);myAppModule.controller('TextController',function($scope) {var someText = {};someText.message = 'You have started your journey.';$scope.someText = someText;});</script>

3.模板和資料繫結

基本的運作流程如下。
1．使用者請求應用起始頁。
2．使用者的瀏覽器向伺服器發起一次HTTP串連，然後載入index.html頁面，這個頁面裡麵包含了模板。
3．Angular被載入到頁面中，等待頁面載入完成，然後尋找ng-app指令，用來定義 模板邊界。
4．Angular遍曆模板，尋找指令和綁定關係，這將觸發一系列動作：註冊監聽器、執行一些DOM操作、從伺服器擷取初始化資料。這項工作的最後結果是，應用將會
啟動起來，並且模板被轉換成了DOM視圖。
5．串連到伺服器去載入需要展示給使用者的其他資料。對於每一個Angular應用來說，步驟1到步驟3都是標準化的，步驟4和步驟5是可選的。

這些步驟可以同步進行也可以非同步進行。為了提升效能，對於應用中的第一個視圖，你可以把資料和HTML模板一起載入進來，從而避免發起多次請求。
4.顯示文本

使用ng-bind指令，你可以在UI中的任何地方顯示並重新整理文本。它還有兩種等價形式。
第一種是使用花括弧的形式：

{{greeting}}

還有一種方式就是使用基於屬性的指令，叫做ng-bind：

雖然兩種形式的輸出內容相同，但是使用雙花括弧文法的時候，在Angular使用資料替換這些花括弧之前，第一個載入的頁面，也就是應用中的index.html，其未被渲染好的模板可能會被使用者看到。而使用第二種方法的視圖就不會遇到這個問題。

在大多數模板中你依然可以使用{{ }}。但是，對於index.html頁面中的資料繫結操作，建議使用ng-bind。

5.表單輸入

ng-model:將元素繫結到模型屬性上。

ng-change:指定一個控制器方法，一旦使用者修改了輸入值，此方法就會調用。

$watch()函數來監視一個運算式，當這個運算式發生變化時就會調用一個回呼函數。

ng-submit、ng-click、ng-dblclick。

function StartUpController($scope) {$scope.computeNeeded = function() {$scope.needed = $scope.startingEstimate * 10;};$scope.requestFunding = function() {window.alert("Sorry, please get more customers first.");};$scope.reset = function() {$scope.startingEstimate = 0;};}