用angularjs開發下一代web應用（二）：angularjs應用骨架（一），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
定義控制器的正確方式是，把它定義成模組的一部分，控制器可以為應用裡面相關的部分提供命名空間機制。模組可以將東西從全域命名空間隔離開。
<html ng-app='myApp'><body ng-controller='TextController'><p>{{someText.message}}</p><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></body></html>
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中的任何地方顯示並重新整理文本。它還有兩種等價形式。
第一種是使用花括弧的形式：<p>{{greeting}}</p>
還有一種方式就是使用基於屬性的指令，叫做ng-bind：<p ng-bind="greeting"></p>
雖然兩種形式的輸出內容相同，但是使用雙花括弧文法的時候，在Angular使用資料替換這些花括弧之前，第一個載入的頁面，也就是應用中的index.html，其未被渲染好的模板可能會被使用者看到。而使用第二種方法的視圖就不會遇到這個問題。
在大多數模板中你依然可以使用{{ }}。但是，對於index.html頁面中的資料繫結操作，建議使用ng-bind。
5.表單輸入
ng-model:將元素繫結到模型屬性上。
ng-change:指定一個控制器方法，一旦使用者修改了輸入值，此方法就會調用。
$watch()函數來監視一個運算式，當這個運算式發生變化時就會調用一個回呼函數。
ng-submit、ng-click、ng-dblclick。
<form ng-submit="requestFunding()" ng-controller="StartUpController">Starting: <input ng-change="computeNeeded()" ng-model="startingEstimate">Recommendation: {{needed}}<button>Fund my startup!</button><button ng-click="reset()">Reset</button></form>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;};}
國內angularjs第一本翻譯，內容清晰實用，技術點覆蓋全面，是入門教程裡的不二首選，搞前端的童鞋們都可以看看，非常不錯。個人覺得是一本，更好更方便的前後端的分離開發，維護成本的減少，開發效率的提高，更加值 得我們學習研究
AngularJS開發下一代Web應用中文版
這個google出的 新的web前端 MVC架構 目前還是少數人在用的 也不存在 中文版的書籍 建議你去51cto 搜尋 "七步從AngularJS菜鳥到專家" 還是可以一看的 目前最全的教程系列 優酷也有個其他公司的 一個講解視頻 中文的 v.youku.com/...e=4451
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
