1.Angular框架-angular介紹與基本使用，MVC模式介紹

時間  2019-11-11
標籤 1.angular angular 框架 介紹 基本 使用 mvc 模式 欄目 AngularJS 简体版
原文   原文鏈接

1.1. AngularJS概述

Angular圖標

1.1.1. 介紹

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

MVC、模塊化(編程)、自動化雙向數據綁定、語義化標籤、指令、依賴注入等等。
  • 其餘前端框架： VueJS 、 Avalon 、 React 、 BackBone 、 KnockoutJS

1.1.2. Angular的核心特性

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

1.1.3. 原則

  • 不推崇開發人員手動操做DOM, 其底層仍是操做DOM
  • 解放雙手，簡化了HTML的操做（從DOM中解放出來）

1.1.4. 優點

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

1.1.5. 使用場景

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

1.2. SPA -單頁應用程序

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

  • 單頁面應用程序：html

    • SPA

  • 傳統多頁面應用程序：前端

    • 傳統web

1.2.1. 優點

  • 1 無刷新加載頁面，避免了沒必要要的跳轉和重複渲染
  • 2 更好的用戶體驗，讓用戶在web app感覺native app的速度和流暢
  • 3 減小了請求體積，節省流量，加快頁面響應速度

  • 4 能夠選擇性的保留狀態，如音樂網站，切換頁面時不會中止播放歌曲git

  • 傳統ajax的劣勢：angularjs

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

1.2.2. 劣勢

  • 不利於SEO，可是有其餘解決方案

1.2.3. 主要技術點

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

1.2.4. 實現思路

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

1.2.5. 實例和參考

1.3. AngularJS的基本使用

  • AngularJS 是自動執行的，只須要咱們告訴它要作什麼，在哪一個位置去作

1.3.1. 案例

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

1.3.2. 使用步驟

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

1.4. directive -指令

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

1.4.1. 指令是什麼

  • 將前綴爲 ng- 的屬性稱之爲指令，其做用是爲DOM元素綁定數據、添加事件 等
<input type="text" ng-model="userName">
  • 指令的值是一個：表達式

1.4.2. 指令的類型

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

1.4.3. 經常使用指令

1.4.3.1. ng-app

  • 做用：該指令用來啓動一個AngularJS應用
  • 理解：指定AngularJS應用程序管理的邊界，只有在ng-app內部的指令纔會起做用
  • 解釋：
ng-app 指令指定了應用的根元素，一般放置在頁面的根元素，也能夠是任意的元素
例如：body或html標籤

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

注意：每一個頁面中能夠出現屢次 `ng-app` 指令（不推薦！）
若是是多個須要手動引導：`angular.bootstrap()`

1.4.3.2. ng-click

  • 做用：用來指定DOM元素被點擊時執行的事件
  • 語法：ng-click="expression"
<button ng-click="val + 1"></button>

1.4.3.3. ng-model

  • 做用：綁定數據，在 input/select/textarea 標籤中使用
  • 說明：
ng-model指令將嘗試把屬性綁定到當前做用域中。
若是當前做用域中沒有該屬性，那麼AngluarJS會幫咱們隱式建立而且添加到當前做用域中。

1.4.3.4. ng-init （瞭解）

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

1.5. 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>

1.6. AngularJS的執行過程分析

  • 示例代碼：
<body ng-app>
    <input type="text" ng-model="user.name" />
    <p>Hello {{user.name}}</p>
</body>

1.6.1. 執行過程說明

  • 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 文本框值的變化會致使數據模型的變化，數據模型的變化也會致使表達式的變化

Angular執行過程說明

1.6.2. 案例強化

  • 加法計算器案例

1.7. 查看AngularJS的文檔

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

1.7.1. 離線文檔和在線文檔

1.8. module -模塊

  • 全部的其餘內容，都是基於模塊的，有模塊纔有其餘的內容！
模塊是一個容器包含了應用程序的不一樣組成部分，而且這些內容必需要依附於一個模塊
    例如：controllers, services, filters, directives, configs 等

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

1.8.1. 建立模塊

  • 語法：var app = angular.module(moduleName, []);
  • 做用：建立一個模塊，讓AngluarJS對整個內容進行模塊化管理
  • 說明：模塊也能夠被建立屢次，但不多這麼作
  • 示例：
// 第一個參數：模塊名稱，字符串
// 第二個參數：數組，用來添加當前模塊的依賴項
var app = angular.module("firstApp", ["otherModuleName"]);

1.8.2. 獲取模塊

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

1.9. controller -控制器

  • 須要配合ng-controller指令來使用

1.9.1. 建立控制器

  • 語法：app.controller(ctrlName, callback);
  • 做用：建立一個控制器，控制器必須出如今某個模塊下
  • 示例：
app.controller("DemoController", function($scope) {
    // $scope 至關於當前的數據模型
});

1.9.2. 控制器的做用

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

1.9.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來講，參照原型式繼承：子節點繼承自父節點

1.10. 數據綁定方式

1.10.1. 雙向數據綁定

  • 通常經過 ng-model 指令實現
  • 概述：
數據模型的值發生改變，就會致使頁面值的改變；頁面值的改變，也會致使數據模型中值的改變，
這種相互影響的關係就是雙向數據綁定。

1.10.2. 單向數據綁定

  • 通常經過 {{}} 表達式來實現
  • 概述：數據模型的值發生改變，致使頁面的值發生改變

1.11. MVC 與 MVVM

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

1.11.1. 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 重用，因此大大提升了代碼的可重用性。

1.11.2. MVVM

  • 是由 MVC 模式演變出來的！
  • 組成：
M: model 模型，至關於 User（構造函數）
V: view 視圖， ng-app 管理的頁面
VM: ViewModel 視圖模型 在Angular中就是：$scope

1.11.2.1. ViewModel

  • 1 $scope實際就是MVVM模式中的VM（視圖模型）
  • 2 Angular中大量的使用$scope, 蓋過了C（控制器）的概念，因此不少人將其稱爲MVVM框架
  • 3 不要深究究竟是什麼類型（MVC/MVVM），重要的是學會使用。
  • 4 MVW ===> "Model View Whatever"
  • 5 MVVM 首先出如今 微軟的WPF 中

1.11.3. 案例：用戶註冊

1.11.3.1. localStorage 的基本使用

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

1.11.3.2. 參考

1.12. $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;
    });
});

1.13. 啓動NG的方式

  • 1 經過 ng-app 指令啓動
  • 2 手動啓動：angular.bootstrap(document, ['MyModule'])
// 等待文檔加載完成後，啓動 angular
angular.element(document).ready(function() {
    angular.bootstrap(document, ['MyModule']);
});

1.14. 其餘

1.14.1. 多個app

  • 注意：不推薦在同一個頁面中建立多個 ng-app
  • 注意：ng只會找到第一個 ng-app 而且啓動，若是啓動其餘的，須要手動啓動
<div ng-app="FirstApp"></div>
<div ng-app="SecondApp"></div>

1.15. 框架和庫的區別

1.15.1. Library

  • jQuery is a library， Angular is a framework
  • jQuery是API的集合，封裝DOM操做，提升開發效率
使用jQuery的思路：
1 想要獲取元素，我調用 $(selector)
2 元素綁定事件，我調用 .on()
3 進行什麼DOM操做，我調用什麼方法完成

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

1.15.2. Framework

  • 框架規定了一種編程方式
  • 使用框架的時候，由框架控制一切，咱們只須要按照規則寫代碼
Angular提供了一套完整的解決方案，全部的流程都設定好了
咱們只須要按照流程規則，把咱們的代碼進行填坑。

1.15.3. 主要區別是：

  • 控制反轉，框架中控制整個流程的是框架
  • You call Library, Framework calls you.
  • 好萊塢原則：Don't call us, we'll call you.

1.16. 其餘資料

1.16.1. angular代碼風格

1.16.2. 模塊化

1.16.3. 參考網站

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程