AngularJS入門教程之Helloworld示例
本文實例講述了AngularJS入門教程之Helloworld示例。分享給大家供大家參考，具體如下：
什么是AngularJs？
angularjs是一個為動態(tài)WEB應用設計的結構框架。它能讓你使用HTML作為模板語言，通過擴展HTML的語法，讓你能更清楚、簡潔地構建你的應用組件。它的創(chuàng)新點在于，利用數(shù)據(jù)綁定和依賴注入，它使你不用再寫大量的代碼了。這些全都通過瀏覽器端的javascript實現(xiàn)，這也使得它能夠完美地和任何服務器技術結合。
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ù)響應。最終，模型層通知視圖層，已經發(fā)生改變，一邊更新顯示。
在Angluar應用中，視圖層就是DOM，控制器就是Javascript類，模型數(shù)據(jù)存儲在對象屬性中。
angularjs數(shù)據(jù)綁定
像jquery庫這種擴展到客戶端的模式，讓我們遵循相似的風格，但由于更新的能力，單獨地DOM的部分，而不是更新整個頁面。這里，我們合并HTML字符串和數(shù)據(jù)，然后通過元素上設置innerHTML將結構插入到我們想要的Dom中。
這一切都運行的相當好，但是你想將新數(shù)據(jù)插入到界面，或者改變基于用戶輸入的數(shù)據(jù)時，你需要做很多又不是價值不高的工作，來確保同時在界面和javascript屬性中獲取的數(shù)據(jù)正常的狀態(tài)。
但是，倘若我們有什么東西把這些工作都為我們做好了，同時不需要寫代碼？倘若我能僅僅聲明界面的某一部分映射到javascript的屬性，讓他們自動的同步？這種編程方式叫做數(shù)據(jù)綁定。我們在angular中包括這種功能，因為當編寫視圖和模型時，使用mvc來消除代碼那是非常棒的。移動數(shù)據(jù)從一個地方的絕大部分自動發(fā)生。
注：最上面的例子就能體現(xiàn)
依賴注入（DI）
$scope對象把數(shù)據(jù)綁定自動的傳遞給了我們。我們沒有必要通過調用任何函數(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。因為在框架的核心層，我們已經包括了一個強大的DOM轉換引擎，可以讓你擴展HTML語法，因此你才可以這樣做。
我們已經在模板文件中看到了多個新的屬性，這些并不是HTML規(guī)范的一部分。示例中包括兩個大括號是用來數(shù)據(jù)綁定的，ng-controller是用來指定那個控制器來服務那個師徒，ng-model將一個輸入框綁定到模型部分。我們稱這些叫HTML擴展指令。
angular帶有很多標識符，幫助你為你的應用程序定義視圖。這些標識符可以定義我們常見的視圖作為模板。它們可以說明應用程序如何工作的或者創(chuàng)建可重復使用的組件。
同時不局限于Angular自帶的標識符。你可以寫你自己的來擴展HTML模板，做任何你想做的事。
更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
- AngularJS 在同一個界面啟動多個ng-app應用模塊詳解
- AngularJS ng-app 指令實例詳解
- 基于AngularJS實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
- AngularJS控制器controller給模型數(shù)據(jù)賦初始值的方法
- AngularJS入門示例之Hello World詳解
- AngularJS打開頁面隱藏顯示表達式用法示例
- AngularJS入門教程之多視圖切換用法示例
- AngularJS入門教程之MVC架構實例分析
- AngularJs入門教程之環(huán)境搭建+創(chuàng)建應用示例
- AngularJS框架的ng-app指令與自動加載實現(xiàn)方法分析
相關文章
Angular5.0 子組件通過service傳遞值給父組件的方法
這篇文章主要介紹了Angular5.0 子組件通過service傳遞值給父組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了AngularJS指令與控制器之間的交互功能,結合實例形式分析了AngularJS控制器調用相關指令操作技巧,需要的朋友可以參考下2016-12-12
從?Angular?Route?中提前獲取數(shù)據(jù)的方法詳解
這篇文章主要介紹了從?Angular?Route?中提前獲取數(shù)據(jù),通過本文，你將學會使用?resolver，?在?Angular?App?中應用?resolver，應用到一個公共的預加載導航，本文給大家介紹的非常詳細，需要的朋友可以參考下2022-07-07
AngularJS入門教程之 XMLHttpRequest實例講解
本文主要講解 AngularJS XMLHttpRequest,這里給大家整理相關資料并提供實例代碼,有需要的小伙伴參考下2016-07-07
本文主要介紹AngularJS表單的知識，這里整理了表單的基礎知識和簡單的示例代碼，有需要的小伙伴可以參考下2016-08-08
這篇文章主要介紹了AngularJS路由刪除#符號解決的辦法的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
跨域傳輸Cookie是需要后臺和前臺同時做相關處理才能解決的，這篇文章主要介紹了Angularjs之如何在跨域請求中傳輸Cookie的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了AngularJs中ui.route的簡單應用,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output詳解(下)
這篇文章主要給大家介紹了關于Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章主要介紹了AngularJS實現(xiàn)的錨點樓層跳轉功能,涉及AngularJS事件響應實現(xiàn)錨點跳轉功能的相關操作技巧,需要的朋友可以參考下2018-01-01