AngularJS~大話開篇 - lori－IT工程師數位筆記本

文章出處

AngularJS是一款優秀的前端JS框架，已經被用于Google的多款產品當中。AngularJS有著諸多特性，最為核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入、等等。

前端一些術語

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

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

AngularJS的一些技術特點

使用雙大括號{{}}語法進行數據綁定；
使用DOM控制結構來實現迭代或者隱藏DOM片段；
支持表單和表單的驗證；
能將邏輯代碼關聯到相關的DOM元素上；
能將HTML分組成可重用的組件
雙向綁定（html影響代碼，代碼也影響html）
路由功能（單頁面實現類似多ＵＲＬ的功能）

MVVM的實現

將數據模型(data-model)關聯到視圖(UI)上，讓前臺開發人員可以很方便的去建立完整的頁面，數據可以使用測試數據，最后可以將獲取數據的部分抽象成一個個的API接口即可，而不需要真正等待后臺人員將程序開發完，前臺人員就可以對已經完成的功能進行測試了。

代表性的實例

<!doctype html>
<html ng-app>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body>
        Hello {{'World'}}!
    </body>
</html>

使用{{}}亂起來的代碼就是angularJS的代碼，使用引號括起來表示它是個字符串，下面看一下在網站上經常看到的代碼，如果你登陸了就顯示hellow yourname，否則就顯示

hello world，這是個很經典的例子

<!doctype html>
<html ng-app>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body>
        Your name: <input type="text" ng-model="yourname" placeholder="World">
        <hr>
        Hello {{yourname || 'World'}}!
    </body>
</html>