快捷導(dǎo)航

AngularJS入門教程之Helloworld示例

更新時(shí)間：2016年12月25日 11:38:40 作者：小小平凡世界

這篇文章主要介紹了AngularJS入門教程之Helloworld示例,結(jié)合Helloworld入門示例分析了AngularJS的功能、原理、MVC框架、數(shù)據(jù)綁定與相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了AngularJS入門教程之Helloworld示例。分享給大家供大家參考，具體如下：

什么是AngularJs？

angularjs是一個(gè)為動(dòng)態(tài)WEB應(yīng)用設(shè)計(jì)的結(jié)構(gòu)框架。它能讓你使用HTML作為模板語言，通過擴(kuò)展HTML的語法，讓你能更清楚、簡潔地構(gòu)建你的應(yīng)用組件。它的創(chuàng)新點(diǎn)在于，利用數(shù)據(jù)綁定和依賴注入，它使你不用再寫大量的代碼了。這些全都通過瀏覽器端的javascript實(shí)現(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>

這個(gè)例子其實(shí)展示了angularjs的數(shù)據(jù)雙向綁定，

左邊為數(shù)據(jù)單向綁定圖解，通常是要你管jquery，backbone這類框架，右邊為angularjs數(shù)據(jù)雙向綁定。

模型視圖控制器（MVC）

MVC背后的核心概念就是，你在你的代碼之間明確分離管理數(shù)據(jù)（模型），應(yīng)用程序邏輯（控制器），并將數(shù)據(jù)給用戶（視圖）。

視圖從模型中獲取數(shù)據(jù)展示給用戶。當(dāng)用戶通過點(diǎn)擊或者輸入和應(yīng)用程序進(jìn)行交互時(shí)，控制器通過改變模型中的數(shù)據(jù)響應(yīng)。最終，模型層通知視圖層，已經(jīng)發(fā)生改變，一邊更新顯示。

在Angluar應(yīng)用中，視圖層就是DOM，控制器就是Javascript類，模型數(shù)據(jù)存儲(chǔ)在對(duì)象屬性中。

angularjs數(shù)據(jù)綁定

像jquery庫這種擴(kuò)展到客戶端的模式，讓我們遵循相似的風(fēng)格，但由于更新的能力，單獨(dú)地DOM的部分，而不是更新整個(gè)頁面。這里，我們合并HTML字符串和數(shù)據(jù)，然后通過元素上設(shè)置innerHTML將結(jié)構(gòu)插入到我們想要的Dom中。

這一切都運(yùn)行的相當(dāng)好，但是你想將新數(shù)據(jù)插入到界面，或者改變基于用戶輸入的數(shù)據(jù)時(shí)，你需要做很多又不是價(jià)值不高的工作，來確保同時(shí)在界面和javascript屬性中獲取的數(shù)據(jù)正常的狀態(tài)。

但是，倘若我們有什么東西把這些工作都為我們做好了，同時(shí)不需要寫代碼？倘若我能僅僅聲明界面的某一部分映射到j(luò)avascript的屬性，讓他們自動(dòng)的同步？這種編程方式叫做數(shù)據(jù)綁定。我們?cè)赼ngular中包括這種功能，因?yàn)楫?dāng)編寫視圖和模型時(shí)，使用mvc來消除代碼那是非常棒的。移動(dòng)數(shù)據(jù)從一個(gè)地方的絕大部分自動(dòng)發(fā)生。

注：最上面的例子就能體現(xiàn)

依賴注入（DI）

$scope對(duì)象把數(shù)據(jù)綁定自動(dòng)的傳遞給了我們。我們沒有必要通過調(diào)用任何函數(shù)來創(chuàng)建它。我們只是要求把它放到HelloController構(gòu)造函數(shù)中。

在后續(xù)學(xué)習(xí)中，我們發(fā)現(xiàn)，scope并不是我們唯一需要的。如果我們需要數(shù)據(jù)綁定它到用戶瀏覽器指定的URL地址中，我們需要在構(gòu)造函數(shù)中，添加一個(gè)scope并不是我們唯一需要的。如果我們需要數(shù)據(jù)綁定它到用戶瀏覽器指定的URL地址中，我們需要在構(gòu)造函數(shù)中，添加一個(gè)location對(duì)象，就這樣：

function HelloController($scope,$location){
  $scope.greeting={text:'Hello'}
  //使用$location 在這
}

通過Angular的依賴注入系統(tǒng)，我們可以得到這種效果。依賴注入允許我們遵循一種開發(fā)風(fēng)格，這種開發(fā)風(fēng)格中，不是創(chuàng)建依賴，我們的類僅僅添加他們需要的。

這個(gè)遵循了一個(gè)叫迪米特法則的設(shè)計(jì)模式，也被稱作最少知識(shí)法則。由于HelloController的任務(wù)是建立greeting模型的初始值，這種模式就是說，它不需要擔(dān)心像$scope如何創(chuàng)建以及在那里找到它。

angularJs指令

angular最優(yōu)秀部分之一是你可以把你寫的模板當(dāng)成HTML。因?yàn)樵诳蚣艿暮诵膶?，我們已?jīng)包括了一個(gè)強(qiáng)大的DOM轉(zhuǎn)換引擎，可以讓你擴(kuò)展HTML語法，因此你才可以這樣做。

我們已經(jīng)在模板文件中看到了多個(gè)新的屬性，這些并不是HTML規(guī)范的一部分。示例中包括兩個(gè)大括號(hào)是用來數(shù)據(jù)綁定的，ng-controller是用來指定那個(gè)控制器來服務(wù)那個(gè)師徒，ng-model將一個(gè)輸入框綁定到模型部分。我們稱這些叫HTML擴(kuò)展指令。

angular帶有很多標(biāo)識(shí)符，幫助你為你的應(yīng)用程序定義視圖。這些標(biāo)識(shí)符可以定義我們常見的視圖作為模板。它們可以說明應(yīng)用程序如何工作的或者創(chuàng)建可重復(fù)使用的組件。

同時(shí)不局限于Angular自帶的標(biāo)識(shí)符。你可以寫你自己的來擴(kuò)展HTML模板，做任何你想做的事。

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: