AngularJS~大話開篇

時間 2019-11-08

標籤 angularjs 大話開篇欄目 AngularJS 简体版

原文原文鏈接

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

前端一些術語

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

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

AngularJS的一些技術特色app

使用雙大括號{{}}語法進行數據綁定；
使用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>