AnguarJS 第一天----Hello World


AngularJS是什么?

AngularJS是目前很火的前端JS框架之一, AngularJS的開發團隊將其描述為一種構建動態Web應用的結構化框架。它是完全使用JavaScript編寫的客戶端技術,其設計初衷是為了解決html構建web應用不足的缺陷,通過擴展html的語法,允許用戶更容易清楚的構建單頁面的應用。它主要包含四個核心思想:依賴注入、模塊化、雙向綁定、和語義化標簽。其中依賴注入和雙向綁定是其最大的創新點,相比於JQuery等其他框架, 用戶不必寫大量的代碼了。

AngularJS遵循MVC的設計的框架(也有人說是model-view-whatever框架),在Angular中扮演mode的角色被稱為作用域(scope),Html構建的視圖腳本則被稱為view,JavaScript函數定義自然充當控制器的角色。利用它,開發者可以將頁面的一部分封裝為一個應用,不強迫整個頁面使用AngularJs進行開發,這樣使得AngularJs可以和許多其他的web技術結合使用。

AngularJS HelloWorld

Angular JS入門和容易,到達中級水准需要對背后的原理有翻了解,到達專家級別需要大量的工程實踐經驗。作為初學者,我們先從一個Helloworld說起。代碼如下,代碼中包含入門的注釋:

<!DOCTYPE html>
<!--ng-app用於標識AngularJS的應用范圍,置於html標簽上表明整個單頁面應用在Ags的影響范圍內-->
<html ng-app>
<head>
    <title>HelloWorld APP</title>
    <!--引入AngularJS-->
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<!--ng-model指令將內部數據模型對象($scope)中的name屬性綁定到了文本輸入字段上,  這意味着無論在文本輸入字段中輸入了什么,都會同步到數據模型中。-->
<input ng-model="name" type="text" placeholder="Your name">
<!--使用{{}}將name包起來,以顯示¥scope中的name值-->
<h1>Hello {{ name }}</h1>
</body>
</html>

當我們在輸入框中輸入World, 在Hello之后會自動填充輸入框輸入的內容World.

本例中我們僅僅使用了十幾行的代碼就寫出了一個Helloworld應用,而且沒有使用java script代碼就創建出了實時視圖應用,自動數據綁定是實現這一功能的關鍵。自動數據綁定可以理解view是數據模型的映射,當客戶端的數據發生變化時,視圖實時反映出這種變化。

AngularJs通過臟檢查($digist)來實現數據變化更新機制,相比於通過在數據模型上綁定事件監聽的機制,這種方案更加高效。

Conclusion

今天學習了AngularJS的基本概念,通過一個helloworld實例來學習如何使用AngularJS構建一個簡單的AngularJS應用。快樂每一天。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM