亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

AngularJS入門教程之Helloworld示例

 更新時間：2016年12月25日 11:38:40   作者：小小平凡世界  
這篇文章主要介紹了AngularJS入門教程之Helloworld示例,結(jié)合Helloworld入門示例分析了AngularJS的功能、原理、MVC框架、數(shù)據(jù)綁定與相關使用技巧,需要的朋友可以參考下

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

什么是AngularJs？

angularjs是一個為動態(tài)WEB應用設計的結(jié)構框架。它能讓你使用HTML作為模板語言，通過擴展HTML的語法，讓你能更清楚、簡潔地構建你的應用組件。它的創(chuàng)新點在于，利用數(shù)據(jù)綁定和依賴注入，它使你不用再寫大量的代碼了。這些全都通過瀏覽器端的javascript實現(xiàn)，這也使得它能夠完美地和任何服務器技術結(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表達式 -->
  <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ù)（模型），應用程序邏輯（控制器），并將數(shù)據(jù)給用戶（視圖）。

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

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

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

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

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

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

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

依賴注入（DI）

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

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

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

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

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

angularJs指令

angular最優(yōu)秀部分之一是你可以把你寫的模板當成HTML。因為在框架的核心層，我們已經(jīng)包括了一個強大的DOM轉(zhuǎn)換引擎，可以讓你擴展HTML語法，因此你才可以這樣做。

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

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

同時不局限于Angular自帶的標識符。你可以寫你自己的來擴展HTML模板，做任何你想做的事。

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

希望本文所述對大家AngularJS程序設計有所幫助。

相關文章

最新評論