AngularJS -入門1

AngularJS概述

介紹

簡稱：ng
Angular是一個MVC框架

AngularJS 誕生於2009年，由 Misko Hevery 等人創建，後爲Google所收購。
是一款優秀的前端JS框架，已經被用於Google的多款產品當中。
AngularJS有着諸多特性，最爲核心的是：

MVC、模塊化(編程)、自動化雙向數據綁定、語義化標籤、指令、依賴注入等等。

其他前端框架： Vue 、 Avalon 、 React 、 BackBone 、 KnockoutJS

Angular的核心特性

指令、MVC、模塊化、雙向數據綁定

原則

不推崇開發人員手動操作DOM, 其底層還是操作DOM
解放雙手，簡化了HTML的操作（從DOM中解放出來）
如果要在 angular 中操作DOM，就通過 angular 的自定義指令來實現

優勢

Angular 最大程度的減少了頁面上的 DOM 操作
讓 JavaScript 開發專注業務邏輯
代碼結構更合理
維護成本更低
通過簡單的指令把頁面結構和數據結合
通過自定義指令實現組件化編程

使用場景

AngularJS主要考慮的是構建 CRUD 應用，一般是：單頁面的應用程序。

SPA -單頁應用程序

SPA： Single Page Application
介紹：

單頁Web應用（single page application，SPA），就是隻有一個Web頁面的應用，
是加載單個HTML頁面，並在用戶與應用程序交互時動態更新該頁面的Web應用程序。

單頁面應用程序：
傳統多頁面應用程序：

優勢

1 無刷新加載頁面，避免了不必要的跳轉和重複渲染
2 更好的用戶體驗，讓用戶在web app感受native app的速度和流暢
3 減少了請求體積，節省流量，加快頁面響應速度
4 可以選擇性的保留狀態，如音樂網站，切換頁面時不會停止播放歌曲
傳統ajax的劣勢：

1 ajax請求不會留下歷史記錄
2 用戶無法直接通過URL直接進入指定頁面
3 ajax對SEO不友好

劣勢

不利於SEO，但是有其他解決方案

主要技術點

1 ajax
2 錨點的使用（window.location.hash #）
3 hashchange 事件

實現思路

監聽錨點值變化的事件，根據不同的錨點值，請求相應的數據
1 錨點（#）原本用作頁面內部進行跳轉，定位並展示相應的內容
2 NG中，錨點被用作請求不同資源的標識，請求數據並展示內容

實例和參考

AngularJS的基本使用

AngularJS 是自動執行的，只需要我們告訴它要做什麼，在哪個位置去做，本篇博客是基於angular1的

案例

1 Hello World案例
2 文本框的值加1案例

使用步驟

1 引入 NG 的js文件
2 設置 ng-app 指令
3 給文本框添加 ng-model 指令
4 給按鈕添加 ng-click 指令

directive -指令

AngularJS 有一套完整的、可擴展的、用來幫助 Web 應用開發的指令集
指令是DOM元素上的一些標記，讓NG給DOM元素添加一些特殊的行爲
指令包含：內置指令和自定義指令

指令是什麼

將前綴爲 ng- 的屬性稱之爲指令，其作用是爲DOM元素綁定數據、添加事件等

<input type="text" ng-model="userName">

指令的值是一個：表達式

指令的類型

屬性（A）、元素（E）、類（C）、註釋（M）

常用指令

ng-app

作用：該指令用來啓動一個AngularJS應用
理解：指定AngularJS應用程序管理的邊界，只有在ng-app內部的指令纔會起作用
解釋：

ng-app 指令指定了應用的根元素，通常放置在頁面的根元素，也可以是任意的元素
例如：body或html標籤

應用程序運行時，會自動執行邊界內部的其他指令。
標記的範圍儘可能小，提高性能

注意：每個頁面中可以出現多次 `ng-app` 指令（不推薦！）
如果是多個需要手動引導：`angular.bootstrap()`

ng-click

作用：用來指定DOM元素被點擊時執行的事件
語法：ng-click="expression"

<button ng-click="val + 1"></button>

ng-model

作用：綁定數據，在 input/select/textarea 標籤中使用
說明：

ng-model指令將嘗試把屬性綁定到當前作用域中。
如果當前作用域中沒有該屬性，那麼AngluarJS會幫我們隱式創建並且添加到當前作用域中。

ng-init （瞭解）

作用：初始化屬性的值
語法：ng-init="uName='Jack'"

expression -表達式

介紹：是一些JavaScript的代碼片段主要被用在插值綁定或者直接作爲指令的屬性值

從JS角度，使用運算符和數據 連接起來的有 結果 的代碼就是：表達式
注意：不帶分號

例如：
可以使用 console.log(); 打印出來， 或者
    console.log( expression );
可以用作 賦值運算符 的右值
    var test = expression;

<p>{{user.name}}</p>
<p>{{1 + 8}}</p>
<p>{{"hello" + "world"}}</p>

<div ng-click="sayHi()"></div>

AngularJS的執行過程分析

示例代碼：

<body ng-app>
    <input type="text" ng-model="user.name" />
    <p>Hello {{user.name}}</p>
</body>

執行過程說明

1 ng-app告訴AngularJS讓它來管理 body內部的代碼
2 ng-app指令創建了一個對象，對象中包含了AngularJS的相關內容，例如：數據模型
3 ng-model指令查詢數據模型中有沒有 user 對象以及name屬性，沒有則創建
4 創建user對象以及name屬性，並初始化name值爲：空字符串
5 表達式 {{user.name}} 從數據模型中查找有沒有該數據，如果有就取出來，並展示
6 ng-model和{{}} 中的 user.name 指向的是數據模型中同一個數據
7 文本框值的變化會導致數據模型的變化，數據模型的變化也會導致表達式的變化

案例強化

加法計算器案例

查看AngularJS的文檔

目標：學會查看官方文檔資料

離線文檔和在線文檔

module -模塊

所有的其他內容，都是基於模塊的，有模塊纔有其他的內容！

模塊是一個容器包含了應用程序的不同組成部分，並且這些內容必須要依附於一個模塊
    例如：controllers, services, filters, directives, configs 等

模塊是應用程序的組成單元，例如：登錄模塊、註冊模塊、商品列表模塊 等，這些模塊
組合在一起構成了一個完整的應用程序。

創建模塊

語法：var app = angular.module(moduleName, []);
作用：創建一個模塊，讓AngluarJS對整個內容進行模塊化管理
說明：模塊也可以被創建多次，但很少這麼做
示例：

// 第一個參數：模塊名稱，字符串
// 第二個參數：數組，用來添加當前模塊的依賴項
var app = angular.module("firstApp", ["otherModuleName"]);

獲取模塊

語法：var app = angular.module(moduleName);
作用：獲取指定的模塊

controller -控制器

需要配合ng-controller指令來使用

創建控制器

語法：app.controller(ctrlName, callback);
作用：創建一個控制器，控制器必須出現在某個模塊下
示例：

app.controller("DemoController", function($scope) {
    // $scope 相當於當前的數據模型
});

控制器的作用

1 初始視圖中使用的數據，是存儲數據的容器
2 通過$scope對象把數據模型或函數行爲暴露給視圖
3 監視模型的變化，做出相應的邏輯處理

$scope的說明

1 $scope是控制器和視圖之間的橋樑，用於在控制器和視圖之間傳遞數據
2 推薦：給 $scope 添加數據應該使用對象，而不是作爲其屬性
2 在控制器中暴露數據模型（數據和行爲），在視圖中通過指令或表達式來使用
- 對比：局部變量
4 注意：$scope這個名稱必須這麼寫！
5 $scope 是在控制器創建的時候，被注入進去的

1 ng 在使用的時候，頁面中只要有 ng-app 就會創建一個 scope，名字是：$rootScope
2 $scope 是 HTML（視圖）背後的“男人” ---->
    視圖：女人，負責美（展示）
    $scope：男人，負責提供美的資源（數據）
3 所有的控制器都繼承自 $rootScope 
4 繼承是按照：原型式繼承 來實現
5 對於HTML來說，參照原型式繼承：子節點繼承自父節點

數據綁定方式

雙向數據綁定

一般通過 ng-model 指令實現
概述：

數據模型的值發生改變，就會導致頁面值的改變；頁面值的改變，也會導致數據模型中值的改變，
這種相互影響的關係就是雙向數據綁定。

單向數據綁定

一般通過 {{}} 表達式來實現
概述：數據模型的值發生改變，導致頁面的值發生改變

MVC 與 MVVM

優勢：代碼分離（視圖代碼、控制器代碼），職責分離，解耦
目的：解決應用程序展示結構、業務邏輯之間的緊耦合關係，實現模塊化和複用
提高了代碼的結構和可維護性，但是不會提高代碼執行的效率

MVC介紹

MVC（Model–view–controller）是一種軟件架構模式，
把軟件系統分爲三個基本部分：模型（Model）、視圖（View）和控制器（Controller）。

MVC是一種應用程序的設計思想（不是設計模式）

Model 進行數據的存儲和數據的處理方法（CRUD）
View 展示數據
- 在Angluar中，View指的是在頁面中被 ng-app 指令包裹的HTML代碼
Controller 是應用程序中處理用戶交互的部分
- 通常控制器負責從視圖讀取數據，控制用戶輸入，並向模型發送數據，是數據和視圖的橋樑

例如：移動端和PC端兩個View，共享同一個Model
在MVC設計模式中， Model 響應用戶請求並返回響應數據，
View 負責格式化數據並把它們呈現給用戶，業務邏輯和表示層分離，
同一個 Model 可以被不同的 View 重用，所以大大提高了代碼的可重用性。

MVVM

是由 MVC 模式演變出來的！
組成：

M: model 模型，相當於 User（構造函數）
V: view 視圖， ng-app 管理的頁面
VM: ViewModel 視圖模型 在Angular中就是：$scope

ViewModel

1 $scope實際就是MVVM模式中的VM（視圖模型）
2 Angular中大量的使用$scope, 蓋過了C（控制器）的概念，所以很多人將其稱爲MVVM框架
3 不要深究到底是什麼類型（MVC/MVVM），重要的是學會使用。
4 MVW ===> “Model View Whatever” MV*
5 MVVM 首先出現在微軟的WPF 中

案例：用戶註冊

localStorage 的基本使用

getItem(keyName)：讀取，參數類型：string
setItem(keyName, keyValue)：設置，參數類型：string

參考

$watch -監聽數據

語法：$scope.$watch(attrName, callback, flag);
作用：監聽$scope中數據模型的變化，無法監視其他的數據（例如，普通變量）
注意：調用$watch方法時，會立即被調用一次。

app.controller("demoController", function($scope) {
    $scope.name = "jack";

    // 參數一：表示監聽的$scope中的屬性名稱，類型爲：字符串
    // 參數二：表示數據變化執行的回調函數，有兩個參數分別是：當前值與變化之前的值
    // 參數三：比較方式，false：表示比較引用；true：表示比較值。默認值爲false
    $scope.$watch("name", function(curValue, oldValue) {
        // 只要被監聽的數據發生變化，就會指定該回調函數中的代碼！

        // 略過第一次執行
        if(curValue === oldValue) return;
    });
});

啓動NG的方式

1 通過 ng-app 指令啓動
2 手動啓動：angular.bootstrap(document, ['MyModule'])

// 等待文檔加載完成後，啓動 angular
angular.element(document).ready(function() {
    angular.bootstrap(document, ['MyModule']);
});

其他

多個app

注意：不推薦在同一個頁面中創建多個 ng-app
注意：ng只會找到第一個 ng-app 並且啓動，如果啓動其他的，需要手動啓動

<div ng-app="FirstApp"></div>
<div ng-app="SecondApp"></div>

框架和庫的區別

Library

jQuery is a library， Angular is a framework
jQuery是API的集合，封裝DOM操作，提高開發效率

使用jQuery的思路：
1 想要獲取元素，我調用 $(selector)
2 元素綁定事件，我調用 .on()
3 進行什麼DOM操作，我調用什麼方法完成

總結：你告訴jQuery你要做的操作，jQuery就能幫你做好。
      **在使用庫的過程中，開發人員是 控制者**

Framework

框架規定了一種編程方式
使用框架的時候，由框架控制一切，我們只需要按照規則寫代碼

Angular提供了一套完整的解決方案，所有的流程都設定好了
我們只需要按照流程規則，把我們的代碼進行填坑。

angular入門1

AngularJS -入門1

AngularJS概述

介紹

Angular的核心特性

原則

優勢

使用場景

SPA -單頁應用程序

優勢

劣勢

主要技術點

實現思路

實例和參考

AngularJS的基本使用

案例

使用步驟

directive -指令

指令是什麼

指令的類型

常用指令

ng-app

ng-click

ng-model

ng-init （瞭解）

expression -表達式

AngularJS的執行過程分析

執行過程說明

案例強化

查看AngularJS的文檔

離線文檔和在線文檔

module -模塊

創建模塊

獲取模塊

controller -控制器

創建控制器

控制器的作用

$scope的說明

數據綁定方式

雙向數據綁定

單向數據綁定

MVC 與 MVVM

MVC介紹

MVVM

ViewModel

案例：用戶註冊

localStorage 的基本使用

參考

$watch -監聽數據

啓動NG的方式

其他

多個app

框架和庫的區別

Library

Framework

主要區別是：

其他資料

angular代碼風格

模塊化

參考網站