AngularJS開發下一代Web應用筆記（一）

時間 2019-11-17

標籤 angularjs 開發下一代 web 應用筆記欄目 AngularJS 简体版

原文原文鏈接

1、寫在最前html

AngularJS是Google推出的一款Web應用開發框架。它提供了一系列兼容性良好而且可擴展的服務，包括數據綁定、DOM操做、MVC設計模式和模塊加載等。前端

如今網上JS框架茫茫多，真不知道是到底要學習什麼框架，學習了這個框架，說不定還沒用在項目，又有更好的js框架出來了。前端就是不斷折騰新東西，生命在於折騰~web

是的，這麼多的前端框架，是否是真的都要學習？？答案固然不是，看所要完成的項目。這是帶個人前端前輩告訴我，具體使用什麼框架仍是不用框架，ajax

看項目需求，一切都以按時按質完成做爲選擇的標準。可是新的東西要學習，不學習就落後。後端

2、AngularJS的幾個重要概念有什麼設計模式

客戶端模板舉個栗子：hello.html數組

模型/視圖/控制器(MVC)瀏覽器

數據綁定前端框架

依賴注入服務器

路由管理

指令（Angular的靈魂）

示例：購物車（源碼在最後）

3、對這些概念的理解　　

插個曲，Angular最適合用來作單頁web應用。在百度上查了單頁web應用的概念。如表：

單頁web應用（qq音樂）

單頁Web應用（single page web application，SPA），就是隻有一張Web頁面的應用。

單頁應用程序 (SPA) 是加載單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。

瀏覽器一開始會加載必需的HTML、CSS和JavaScript，全部的操做都在這張頁面上完成，都由JavaScript來控制。所以，對單頁應用來講模塊化的開發和設計顯得至關重要。

優勢：

1).良好的交互體驗（用戶不須要從新曬新頁面，獲取數據都是經過ajax異步獲取）
2).良好的先後端分離
3).減輕服務器壓力（服務器只用出數據，不用管展現邏輯和頁面合成，吞吐能力會提升幾倍）

4)..共用一套後端程序代碼（不用修改後端程序代碼就能夠同時用於Web界面、手機、平板等多種客戶端）

缺點：

1).SEO難度較高
2).前進、後退管理（全部的頁面切換須要本身創建堆棧管理）
3).初次加載耗時多（代碼合併、CDN）

像遊戲開發，頻繁操做DOM也不適合使用Angular

客戶端模板
多頁面	單頁面
經過裝配和連接服務器上數據來建立HTML，而後將構建好的HTML頁面發送到瀏覽器。	Angular將模板和數據推送到瀏覽器中裝配他們，而後服務器角色只是爲模板提供靜態資源以及爲模板提供數據

模型/視圖/控制器(MVC)

M 代碼中清晰的分離數據管理 (模型 )

V 及給用戶呈現數據 (視圖 )

C 應用程序邏輯 (控制器 )

Angular中的
M 模型中的數據即是存儲在對象中的屬性 (屬性值
V 文檔對象模型 (DOM)
C 控制器是 JavaScript類

C和V之間的紐帶就是$scope

數據綁定	雙向綁定
ng-model	所謂的雙向綁定，無非是從界面的操做能實時反映到數據，數據的變動能實時展示到界面。

依賴注入

舉個栗子

程序運行過程當中，如需另外一個對象協做(調用它的方法、訪問他的屬性)時，無須在代碼中建立被調用者，而是依賴於外部容器的注入

在HelloController控制器中，$scope對象會把數據綁定自動傳遞給咱們；咱們不須要經過調用任何函數來建立他。只是經過將他防止在控制器的構造器中來請求它。

控制器helloController單詞首字母大寫

數據綁定
	該過程，沒有在輸入字段上註冊一個改變值的事件監聽器。

指令	Angular之能夠能夠編寫模板如HTML同樣，是由於框架核心包含了一個強大的DOM解析引擎。
擴展指令	例如：ng-controller。在HTML模板看到不屬於HTML規範的新屬性，這稱爲HTML擴展指令
自定義指令	本身定義本身須要的指令（聽說指令是Angular的靈魂）

附購物車源碼：

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>購物車</title>
    
</head>
<body ng-controller="CartController">
    <h1>Your order</h1>
    <div ng-repeat="item in items">
        <span>{{item.title}}</span>
        <input ng-model="item.quantity">
        <span>{{item.price | currency}}</span>
        <span>{{item.price * item.quantity | currency}}</span>
        <button ng-click="remove($index)">Remove</button>
    </div>

</body>
<script src="../assets/js/angular-1.3.0.js"></script>
<script>
function CartController($scope){

    // currency是過濾器，用來轉換文本

    // $index參數   包含了它在ng-repeat的索引值

    //splice()   arrayObject.splice(index,howmany,item1,.....,itemX)

    // 定義一個一維數組存放對象
    $scope.items = [
        {title: 'Paint pots',quantity:8,price:3.95},
        {title: 'Polka dots',quantity:17,price:12.95},
        {title: 'Pebbles',quantity:5,price:6.95}
    ];

    $scope.remove = function(index){
        $scope.items.splice(index,1);
    }

}
</script>
</html>