1.Angular框架-angular介紹與基本使用，MVC模式介紹
阿新 • • 發佈：2017-07-08
就會 web javascrip 點擊 技術分享 fig page 格式 存儲
1.1. AngularJS概述
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應用程序。
-
單頁面應用程序：
-
傳統多頁面應用程序：
1.2.1. 優勢
- 1 無刷新加載頁面，避免了不必要的跳轉和重復渲染
- 2 更好的用戶體驗，讓用戶在web app感受native app的速度和流暢
- 3 減少了請求體積，節省流量，加快頁面響應速度
-
4 可以選擇性的保留狀態，如音樂網站，切換頁面時不會停止播放歌曲
-
傳統ajax的劣勢：
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. 實例和參考
- SPA - 百度百科
- 一種SPA（單頁面應用）架構
- 網易雲音樂
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 文本框值的變化會導致數據模型的變化，數據模型的變化也會導致表達式的變化
1.6.2. 案例強化
- 加法計算器案例
1.7. 查看AngularJS的文檔
- 目標：學會查看官方文檔資料
1.7.1. 離線文檔和在線文檔
- AngularJS官方文檔
- ng中文文檔 - 1
- ng中文文檔 - 2
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代碼
- 在Angluar中，View指的是在頁面中被
- 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)：讀取，參數類型：stringsetItem(keyName, keyValue)：設置，參數類型：string
1.11.3.2. 參考
- localStorage - MDN
- localStorage的基本使用
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代碼風格
- johnpapa/angular-styleguide
1.16.2. 模塊化
- 樂高
- 樂高-機器人
1.16.3. 參考網站
- 百度CDN
- 開源中國在線工具
1.Angular框架-angular介紹與基本使用，MVC模式介紹