AngularJS自學之路——初識AngularJS和資料繫結，初識angularjs
AngularJS 是什麼
AngularJS的官方文檔是這樣介紹它的。完全使用JavaScript編寫的用戶端技術。同其他曆史悠久的Web技術（HTML、CSS和JavaScript）配合使用，使Web應用開發比以往更簡單、更快捷。
AngularJS主要用於構建單頁面Web應用。它通過增加開發人員和常見Web應用開發工作單位之間的抽象層級，使構建互動現代Web應用變得更加簡單。
AngularJS的Team Dev將其描述為一種構建動態Web應用的結構化架構。
AngularJS使開發Web應用變得非常簡單，同時也降低了構建複雜應用的難度。它提供了開發人員在現代Web應用中經常要用到的一系列進階功能，例如：
最近在玩github，看到了有些項目license是MIT，我還以為是MIT（麻省理工學院），一問我同事，才知道MIT意味著你可以為AngularJS貢獻代碼，使其變得更加優秀。關於貢獻代碼的更多內容可以在AngularJS的官網中查看“貢獻代碼”部分。不知道AngularJS官網的，可以百度（我從來不記官網，都是百度的）。
第一個AngularJS程式——Hello World<!DOCTYPE html><html ng-app><head> <title>Simple app</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"> </script></head><body> <input ng-model="name" type="text" placeholder="Your name"> <h1>Hello {{ name }}</h1></body></html>雖然這個例子不怎麼有趣，但它展示了AngularJS最基本也最令人印象深刻的功能之一：資料繫結。
AngularJS則採用了完全不同的解決方案。它建立即時模板來代替視圖，而不是將資料合併進模板之後更新DOM。任何一個獨立視圖組件中的值都是動態替換的。這個功能可以說是AngularJS中最重要的功能之一，也是讓我們只用10行代碼，並且在沒有任何JavaScirpt的情況下就可以寫出Hello World的關鍵。
要實現這個功能，只要在HTML頁面中引用angular.js，並在某個DOM元素上明確設定ng-app屬性即可。ng-app屬性聲明所有被其包含的內容都屬於這個AngularJS應用，這也是我們可以在Web應用中嵌套AngularJS應用的原因。只有被具有ng-app屬性的DOM元素包含的元素才會受AngularJS影響。
自動資料繫結使我們可以將視圖理解為模型狀態的映射。當用戶端的資料模型發生變化時，視圖就能反映出這些變化，並且不需要寫任何自訂的代碼，它就可以工作。
在MVC（Model View Controller，模型視圖控制器）的世界裡，控制器可以不必擔心會牽扯到渲染視圖的工作。這樣我們就不必再擔心如何分離視圖和控制器邏輯，並且也可以使測試變得既簡單又令人愉悅。
由於JavaScript自身的特點，以及它在傳遞值和引用時的不同處理方式，通常認為，在視圖中通過對象的屬性而非對象本身來進行引用綁定，是Angular中的最佳實務。
<!doctype html><html ng-app><head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script></head><body> <div ng-controller="MyController"> <h1>Hello {{ clock.now }}!</h1> </div> <script type="text/javascript" src="js/app.js"></script></body></html>在這個例子中，相比每秒鐘都更新$scope.clock，更新clock.now的值會是更好的選擇。
// 在app.js中function MyController($scope) { $scope.clock = { now: new Date() }; var updateClock = function() { $scope.clock.now = new Date() }; setInterval(function() { $scope.$apply(updateClock); }, 1000); updateClock();};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
