前端MVC框架之 Angular

時間 2019-11-18

標籤前端 mvc 框架 angular 欄目 AngularJS 简体版

原文原文鏈接

1、什麼是Angular

jQuery，它屬於一種類庫(一系列函數的集合)，以DOM爲驅動核心；而Angular是一種 MVC 的前端框架，則是前端框架，以數據和邏輯爲驅動核心，它有着諸多特性，最重要的是：模塊化，雙向數據綁定，語義化標籤，依賴注入等。
MVC 開發模式：model（模型），view（視圖），controller（控制器）。php

2、模塊化

最大程度實現代碼複用

定義應用
爲HTML標籤添加 ng-app 屬性，代表整個文檔都是應用，也可指定標籤添加，該標籤包裹的全部內容都是應用的一部分（++注：沒有關聯相應模塊，必定不能賦值；但若是關聯相應模塊，必須賦值++）前端

定義模塊
提供一個全局對象Angular，用angular.module(參數1，參數2)方法定義模塊，輸出一個返回值。
第一個參數：跟ng-app的值一致；
第二個參數：數組。代表該模塊依賴其餘模塊，依賴不存在則寫 [ ]；
jquery

定義控制器（view和model的橋樑）

定義模塊輸出的返回值.controller(參數1，參數2)。
第一個參數：控制器名稱（++肯定與view的關聯++，在HTML標籤添加ng-controller：控制器名稱）；
第二個參數：爲一個數組，除了最後一個單元是函數，其他都是字符串，該參數代表控制器的依賴關係。

3、指令

經常使用內置指令json

1.ng-app 指定應用根元素，至少有一個元素指定了此屬性。後端

2.ng-controller 指定控制器跨域

3.ng-show 控制元素是否顯示，true顯示、false不顯示（經過display：none/block來控制）數組

4.ng-hide 控制元素是否隱藏，true隱藏、false不隱藏前端框架

5.ng-if 控制元素是否「存在」，true存在、false不存在（與ng-show區別：當爲false的時候，連同整個DOM節點都不存在）服務器

6.ng-src 加強圖片路徑app

7.ng-href加強地址

8.ng-class 控制類名 (後面可接對象,如ng-class="{done: true}")

9.ng-include 引入模板

10.ng-disabled 表單禁用

11.ng-readonly 表單只讀

12.ng-checked 單/複選框表單選中

13.ng-selected 下拉框表單選中
自定義指令
- directive

4、數據綁定

單向綁定

只能是模型數據向視圖傳遞（相似artTemplate模板引擎的工做方式）
相關指令：
- 經過 {{}} 或者 ng-bind 來實現模型數據向視圖模板的綁定，模型數據由一個內置服務$scope提供，它是個空對象，經過爲這個對象添加屬性或方法，即可以在相應的視圖模板裏被訪問。
- 這裏的 {{}} 是 ng-bind 的簡寫形式，區別在於經過 {{}} 綁定數據時會出現閃屏，添加添加 ng-cloak 也能夠解決「閃爍」現象。
  
  雙向綁定
視圖 -->傳到模型上 -->再傳回視圖
相關指令：
- ng-model
舉一個小例子：

<body ng-app>
    <input type="text" ng-model='mesg'>
    <h1>{{mesg}}</h1>
</body>

初始化模型（既初始化$scope）

ng-init （不多用）。

事件處理
無需顯式的獲取DOM元素即可添加事件
在原有事件前面添加前綴「ng」，而後以屬性的形式添加到HTML便籤中，例如：ng-click

數據處理
相關指令：
- ng-repeat: 能夠將數組或對象數據迭代到視圖模板中
- ng-switch 和 ng-switch-when 配合使用
  
  5、做用域
每一個controller下的$scope產生不一樣的做用域
根做用域：ng-app所在的標籤內

6、過濾器
內置過濾器
- currency[貨幣] 將數值格式化爲貨幣格式
- date 日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、時（H/h）、分（m）、秒（s）、毫秒（.sss），也能夠組合到一塊兒使用。
- filter 在給定數組中選擇知足條件的一個子集，並返回一個新數組，其條件能夠是一個字符串、對象、函數
- json 將Javascrip對象轉成JSON字符串。
- limitTo 取出字符串或數組的前（正數）幾位或後（負數）幾位
- lowercase 將文本轉換成小寫格式
- uppercase 將文本轉換成大寫格式
- number 數字格式化，可控制小位位數
- orderBy 對數組進行排序，第2個參數是布爾值可控制方向(正序或倒序)
自定義過濾器
- 經過模塊對象實例提供的filter方法自定義過濾器
總結
- 豎線調用，冒號傳值。
  
  7、依賴注入
經過注入的方式解決依賴問題，經過回調函數的參數來實現。
常見AngularJS內置服務：$http、$http、$location、$timeout、$rootScope
分類：
- 行類式
- 推斷式（不建議使用，代碼壓縮後，參數沒法找到，沒法找到依賴）
  
  8、服務
內置服務
- $Timeout 和 $interval與原生JS區別，不須要每次手動開啓髒值檢查，即$scope.$digest()
- 是對原生JS的封裝
- 常見內置服務：
  - $http 向服務器端發起異步請求（注意先後端言行（接收/發送）一致）
    - post的請求方式：對應數據用data，
    - post要有個請求頭headers，這裏headers的值用{}括起來，angularJS默認是'application/json'。發送請求頭有兩種格式來傳送數據（注意：php中$_POST[ ]只能接收formData格式數據的application/x-www-form-urlencoded這一種格式的數據）
      - 'Content-Type', 'application/x-www-form-urlencoded'，該格式發送的參數爲字符串key=value格式，例如"username=zhangsan".
      - 'Content-Type', 'application/json'，該格式發送的參數爲json格式，例如{"username"："zhangsan"}
    - get的請求方式：對應數據用params，ps:服務器端接收$_GET[]，在success中打印$log.info(ret)能夠檢查數據是否傳到服務器。
    - 1.5.8以前的版本，回調函數用success()，error()；1.6版本以後的版本用then()
    - 跨域
      - jsonp 用一句話歸納，前端發送一個事先定義好的函數名給服務端，服務端接收這個函數名並拼湊「（）」，並返回；前端就接收了一個函數的調用
      - method: "jsonp" ,params:{ callback:"JSON_CALLBACK" },其中JSON_CALLBACK爲臨時定義的函數名發給服務端，讓服務端替換(注:1.6以後不需寫這個)；在jquery中，自動幫你傳了，因此不用這一步。
  - $log 打印調試信息($log.log()、$log.error()、$log.warn()、$log.debug()、$log.info())
  - $filter 在控制器中格式化數據
  - $Timeout 和 $interval
自定義服務

9、模塊加載
配置塊
- 經過config來實現對服務的配置（也能夠更改一些服務的默認設置）,AngularJS絕大多數服務都有對應的provider。例如：$route 對應的$routeProvider(配置路由)
運行塊
- 特殊：run方法仍是最早執行的。案例：好比驗證用戶是否登陸，未登陸則不容許進行任何其它操做。
  
  10、路由
功能：一個應用由若干個個視圖組成，而後呢，根據不一樣的業務邏輯展現不一樣的視圖給用戶。
理解
- SPA：Single Page Application 單頁面應用
- 連接使用錨點
- 單一頁面原理：單頁面經過hashchange事件監聽錨點的變化，實現不一樣錨點準備找到對應的視圖
路由: AngularJS基於單一頁面原理進行封裝，將錨點變化封裝成路由，這也是與後端路由的根本區別
路由的使用：
- 需引入angular-route.js文件
- 實例化模塊，傳入依賴（路由名稱爲：ngRoute）
- 配置路由（config、$routeProvider、when（條件））
- 佈局模板（用ng-view指令，路由匹配的視圖會渲染到該區域）
路由的參數：
- 兩種方法匹配路由：when和otherwise，when能夠調用屢次。otherwise做爲when的補充，參數只有一個。
- when有兩個參數
  - 參數1：是個字符串，表明當前url的hash值；例如：「/：type」
  - 參數2：是一個對象，配置當前路由參數，如視圖、控制器
    - template：字符串形式視圖模板
    - templateUrl：引入外部視圖模板
    - controller：視圖模板所屬控制器，做用之一：經過http請求向後臺要數據
    - redirectTo：跳轉到其餘路由例如：「/2」；
- 獲取路由參數，在控制器中注入$routeParams，能夠傳遞參數給後臺或其餘。