本文實例講述了AngularJS入門教程之Helloworld示例。分享給大家供大家參考，具體如下：
什么是AngularJs？
angularjs是一個為動態(tài)WEB應(yīng)用設(shè)計的結(jié)構(gòu)框架。它能讓你使用HTML作為模板語言，通過擴(kuò)展HTML的語法，讓你能更清楚、簡潔地構(gòu)建你的應(yīng)用組件。它的創(chuàng)新點在于，利用數(shù)據(jù)綁定和依賴注入，它使你不用再寫大量的代碼了。這些全都通過瀏覽器端的javascript實現(xiàn)，這也使得它能夠完美地和任何服務(wù)器技術(shù)結(jié)合。
AngularJS簡單的Helloworld例子：
<!DOCTYPE HTML><!-- 告訴AngularJs引擎從這里開始是ng-app管理 --><html lang="en-US" ng-app><head> <meta charset="UTF-8"> <title>AngularJS例子</title></head><body> <!-- ng-model數(shù)據(jù)模型 --> <input type="text" ng-model='name' placeholder="yourname" /> <!-- {{}}angular表達(dá)式 --> <h1>Hello {{name}}</h1> <script type="text/javascript" src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script></body></html>這個例子其實展示了angularjs的數(shù)據(jù)雙向綁定，
左邊為數(shù)據(jù)單向綁定圖解，通常是要你管jquery，backbone這類框架，右邊為angularjs數(shù)據(jù)雙向綁定。
模型 視圖 控制器（MVC）
MVC背后的核心概念就是，你在你的代碼之間明確分離管理數(shù)據(jù)（模型），應(yīng)用程序邏輯（控制器），并將數(shù)據(jù)給用戶（視圖）。
視圖從模型中獲取數(shù)據(jù)展示給用戶。當(dāng)用戶通過點擊或者輸入和應(yīng)用程序進(jìn)行交互時，控制器通過改變模型中的數(shù)據(jù)響應(yīng)。最終，模型層通知視圖層，已經(jīng)發(fā)生改變，一邊更新顯示。
在Angluar應(yīng)用中，視圖層就是DOM，控制器就是Javascript類，模型數(shù)據(jù)存儲在對象屬性中。
angularjs數(shù)據(jù)綁定
像jquery庫這種擴(kuò)展到客戶端的模式，讓我們遵循相似的風(fēng)格，但由于更新的能力，單獨地DOM的部分，而不是更新整個頁面。這里，我們合并HTML字符串和數(shù)據(jù)，然后通過元素上設(shè)置innerHTML將結(jié)構(gòu)插入到我們想要的Dom中。
這一切都運行的相當(dāng)好，但是你想將新數(shù)據(jù)插入到界面，或者改變基于用戶輸入的數(shù)據(jù)時，你需要做很多又不是價值不高的工作，來確保同時在界面和javascript屬性中獲取的數(shù)據(jù)正常的狀態(tài)。
但是，倘若我們有什么東西把這些工作都為我們做好了，同時不需要寫代碼？倘若我能僅僅聲明界面的某一部分映射到j(luò)avascript的屬性，讓他們自動的同步？這種編程方式叫做數(shù)據(jù)綁定。我們在angular中包括這種功能，因為當(dāng)編寫視圖和模型時，使用mvc來消除代碼那是非常棒的。移動數(shù)據(jù)從一個地方的絕大部分自動發(fā)生。
注：最上面的例子就能體現(xiàn)
依賴注入（DI）
$scope對象把數(shù)據(jù)綁定自動的傳遞給了我們。我們沒有必要通過調(diào)用任何函數(shù)來創(chuàng)建它。我們只是要求把它放到HelloController構(gòu)造函數(shù)中。
在后續(xù)學(xué)習(xí)中，我們發(fā)現(xiàn)，scope并不是我們唯一需要的。如果我們需要數(shù)據(jù)綁定它到用戶瀏覽器指定的URL地址中，我們需要在構(gòu)造函數(shù)中，添加一個scope并不是我們唯一需要的。如果我們需要數(shù)據(jù)綁定它到用戶瀏覽器指定的URL地址中，我們需要在構(gòu)造函數(shù)中，添加一個location對象，就這樣：
function HelloController($scope,$location){ $scope.greeting={text:'Hello'} //使用$location 在這}通過Angular的依賴注入系統(tǒng)，我們可以得到這種效果。依賴注入允許我們遵循一種開發(fā)風(fēng)格，這種開發(fā)風(fēng)格中，不是創(chuàng)建依賴，我們的類僅僅添加他們需要的。
這個遵循了一個叫迪米特法則的設(shè)計模式，也被稱作最少知識法則。由于HelloController的任務(wù)是建立greeting模型的初始值，這種模式就是說，它不需要擔(dān)心像$scope如何創(chuàng)建以及在那里找到它。
angularJs指令
angular最優(yōu)秀部分之一是你可以把你寫的模板當(dāng)成HTML。因為在框架的核心層，我們已經(jīng)包括了一個強(qiáng)大的DOM轉(zhuǎn)換引擎，可以讓你擴(kuò)展HTML語法，因此你才可以這樣做。
我們已經(jīng)在模板文件中看到了多個新的屬性，這些并不是HTML規(guī)范的一部分。示例中包括兩個大括號是用來數(shù)據(jù)綁定的，ng-controller是用來指定那個控制器來服務(wù)那個師徒，ng-model將一個輸入框綁定到模型部分。我們稱這些叫HTML擴(kuò)展指令。
angular帶有很多標(biāo)識符，幫助你為你的應(yīng)用程序定義視圖。這些標(biāo)識符可以定義我們常見的視圖作為模板。它們可以說明應(yīng)用程序如何工作的或者創(chuàng)建可重復(fù)使用的組件。
同時不局限于Angular自帶的標(biāo)識符。你可以寫你自己的來擴(kuò)展HTML模板，做任何你想做的事。
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
新聞熱點
疑難解答
