AngularJS 入門教程

時間 2019-12-10

原文原文鏈接

1.　　簡介：AngularJS是爲了克服HTML在構建應用上的不足而設計的。HTML是一門很好的爲靜態文本展現設計的聲明式語言，但要構建WEB應用的話它就顯得乏力了。因此我作了一些工做（你也能夠以爲是小花招）來讓瀏覽器作我想要的事。javascript

1)一般，咱們是經過如下技術來解決靜態網頁技術在構建動態應用上的不足：

　　類庫 - 類庫是一些函數的集合，它能幫助你寫WEB應用。起主導做用的是你的代碼，由你來決定什麼時候使用類庫。類庫有：jQuery等

　　框架 - 框架是一種特殊的、已經實現了的WEB應用，你只須要對它填充具體的業務邏輯。這裏框架是起主導做用的，由它來根據具體的應用邏輯來調用你的代碼。框架有：knockout、sproutcore等。

2)AngularJS使用了不一樣的方法，它嘗試去補足HTML自己在構建應用方面的缺陷。AngularJS經過使用咱們稱爲標識符(directives)的結構，讓瀏覽器可以識別新的語法。例如：

　　使用雙大括號{{}}語法進行數據綁定；

　　使用DOM控制結構來實現迭代或者隱藏DOM片斷；

　　支持表單和表單的驗證；

　　能將邏輯代碼關聯到相關的DOM元素上；

　　能將HTML分組成可重用的組件。

2.　　端對端解決方案：AngularJS試圖成爲WEB應用中的一種端對端的解決方案。這意味着它不僅是你的WEB應用中的一個小部分，而是一個完整的端對端的解決方案。這會讓AngularJS在構建一個CRUD（增長Create、查詢Retrieve、更新Update、刪除Delete）的應用時顯得很「執拗」（原文爲 opinionated,意指沒有太多的其餘方式）。可是，儘管它很「執拗」，它仍然能確保它的「執拗」只是在你構建應用的起點，而且你仍能靈活變更。AngularJS的一些出衆之處以下：

　　1)構建一個CRUD應用可能用到的所有內容包括：數據綁定、基本模板標識符、表單驗證、路由、深度連接、組件重用、依賴注入。

　　2)測試方面包括：單元測試、端對端測試、模擬和自動化測試框架。

　　3)具備目錄佈局和測試腳本的種子應用做爲起點。

3.　　AngularJS主要考慮的是構建CRUD應用。幸運的是，至少90%的WEB應用都是CRUD應用。可是要了解什麼適合用AngularJS構建，就得了解什麼不適合用AngularJS構建。如遊戲，圖形界面編輯器，這種DOM操做很頻繁也很複雜的應用，和CRUD應用就有很大的不一樣，它們不適合用AngularJS來構建。像這種狀況用一些更輕量、簡單的技術如jQuery可能會更好。

4.　　上面咱們大體瞭解了一下AngularJS的基本概念，下面咱們能夠經過一個Hello World實例來學習一下AngularJS：

首先咱們要下載好AngularJS，http://angularjs.org
而後打開一個文本編輯器（我使用的是HBuilder，這個工具仍是很方便的，你們能夠嘗試一下），建立一個HTML文件

<!DOCTYPE html>
<html ng-app><!--標記ng-app告訴AngularJS處理整個HTML頁並引導應用-->
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.min.js" ></script><!--載入AngularJS腳本-->
    </head>
    <body>
        Hello {{'World'}}!<!--使用雙大括號標記的內容是問候語中綁定的表達式-->
    </body>
</html>

5.　　AngularJS的雙向數據綁定：html

<!DOCTYPE html>
<html ng-app><!--標記ng-app告訴AngularJS處理整個HTML頁並引導應用-->
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.min.js"></script><!--載入AngularJS腳本-->
    </head>
    <body>
        你的名字: <input type="text" ng-model="yourname" placeholder="世界">
        <!--文本輸入指令<input ng-model="yourname" />綁定到一個叫yourname的模型變量。
            雙大括號標記將yourname模型變量添加到問候語文本。
            你不須要爲該應用另外註冊一個事件偵聽器或添加事件處理程序！
        -->
        <hr> 
        你好 {{yourname || '世界'}}!<!--這裏yourname的默認值是世界，當在文本框中輸入內容是，這裏的yourname會動態改變-->
    </body>
</html>

6.　　AngularJS應用的解析：描述AngularJS應用程序的三個組成部分，並解釋它們如何映射到模型-視圖-控制器設計模式（MVC設計模式）：java

模板(Templates)：模板是用HTML和CSS編寫的文件，展示應用的視圖。您可給HTML添加新的元素、屬性標記，做爲AngularJS編譯器的指令。 AngularJS編譯器是徹底可擴展的，這意味着經過AngularJS您能夠在HTML中構建您本身的HTML標記！
應用程序邏輯(Logic)和行爲(Behavior)：應用程序邏輯和行爲是您用JavaScript定義的控制器。AngularJS與標準AJAX應用程序不一樣，您不須要另外編寫偵聽器或DOM控制器，由於它們已經內置到AngularJS中了。這些功能使您的應用程序邏輯很容易編寫、測試、維護和理解。
模型數據(Data)：模型是從AngularJS做用域對象的屬性引伸的。模型中的數據多是Javascript對象、數組或基本類型，這都不重要，重要的是，他們都屬於AngularJS做用域對象。AngularJS經過做用域來保持數據模型與視圖界面UI的雙向同步。一旦模型狀態發生改變，AngularJS會當即刷新反映在視圖界面中，反之亦然。
AngularJS還提供了一些很是有用的服務特性：
- 底層服務包括依賴注入，XHR、緩存、URL路由和瀏覽器抽象服務。
- 您還能夠擴展和添加本身特定的應用服務。
- 這些服務可讓您很是方便的編寫WEB應用。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。