前端MVC框架之 Angular
一、什么是Angular
- jQuery，它屬于一種類庫(一系列函數的集合)，以DOM為驅動核心；而Angular是一種 MVC 的前端框架，則是前端框架，以數據和邏輯為驅動核心，它有著諸多特性，最重要的是：模塊化，雙向數據綁定，語義化標簽，依賴注入等。
MVC 開發模式：model（模型），view（視圖），controller（控制器）。
二、模塊化
最大程度實現代碼復用
定義應用
為HTML標簽添加 ng-app 屬性，表明整個文檔都是應用，也可指定標簽添加，該標簽包裹的所有內容都是應用的一部分（++注：沒有關聯相應模塊，一定不能賦值；但如果關聯相應模塊，必須賦值++）
定義模塊
- 提供一個全局對象Angular，用angular.module(參數1，參數2)方法定義模塊，輸出一個返回值。
- 第一個參數：跟ng-app的值一致；
第二個參數：數組。表明該模塊依賴其他模塊，依賴不存在則寫 [ ]；
定義控制器（view和model的橋梁）
- 定義模塊輸出的返回值.controller(參數1，參數2)。
- 第一個參數：控制器名稱（++確定與view的關聯++，在HTML標簽添加ng-controller：控制器名稱）；
- 第二個參數：為一個數組，除了最后一個單元是函數，其余都是字符串，該參數表明控制器的依賴關系。
三、指令
常用內置指令
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 增強圖片路徑
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
- directive
四、數據綁定
單向綁定
- 只能是模型數據向視圖傳遞（類似artTemplate模板引擎的工作方式）
- 相關指令：
- 通過 {{}} 或者 ng-bind 來實現模型數據向視圖模板的綁定，模型數據由一個內置服務$scope提供，它是個空對象，通過為這個對象添加屬性或方法，便可以在相應的視圖模板里被訪問。
這里的 {{}} 是 ng-bind 的簡寫形式，區別在于通過 {{}} 綁定數據時會出現閃屏，添加添加 ng-cloak 也可以解決“閃爍”現象。
雙向綁定
- 視圖 -->傳到 模型上 -->再傳回視圖
- 相關指令：
- ng-model
- 舉一個小例子：
初始化模型（既初始化$scope）
ng-init （很少用）。
事件處理
- 無需顯式的獲取DOM元素便可添加事件
在原有事件前面添加前綴“ng”，然后以屬性的形式添加到HTML便簽中，例如：ng-click
數據處理
- 相關指令：
- ng-repeat: 可以將數組或對象數據迭代到視圖模板中
ng-switch 和 ng-switch-when 配合使用
五、作用域
- 每個controller下的$scope產生不同的作用域
根作用域：ng-app所在的標簽內
六、過濾器
- 內置過濾器
- currency[貨幣] 將數值格式化為貨幣格式
- date 日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、時（H/h）、分（m）、秒（s）、毫秒（.sss），也可以組合到一起使用。
- filter 在給定數組中選擇滿足條件的一個子集，并返回一個新數組，其條件可以是一個字符串、對象、函數
- json 將Javascrip對象轉成JSON字符串。
- limitTo 取出字符串或數組的前（正數）幾位或后（負數）幾位
- lowercase 將文本轉換成小寫格式
- uppercase 將文本轉換成大寫格式
- number 數字格式化，可控制小位位數
- orderBy 對數組進行排序，第2個參數是布爾值可控制方向(正序或倒序)
- 自定義過濾器
- 通過模塊對象實例提供的filter方法自定義過濾器
- 總結
豎線調用，冒號傳值。
七、依賴注入
- 通過注入的方式解決依賴問題，通過回調函數的參數來實現。
- 常見AngularJS內置服務：$http、$http、$location、$timeout、$rootScope
- 分類：
- 行類式
推斷式（不建議使用，代碼壓縮后，參數無法找到，無法找到依賴）
八、服務
- 內置服務
- $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
- $http 向服務器端發起異步請求（注意前后端言行（接收/發送）一致）
自定義服務
九、模塊加載
- 配置塊
- 通過config來實現對服務的配置（也可以更改一些服務的默認設置）,AngularJS絕大多數服務都有對應的provider。例如：$route 對應的$routeProvider(配置路由)
- 運行塊
特殊：run方法 還是最先執行的。 案例：比如驗證用戶是否登錄，未登錄則不允許進行任何其它操作。
十、路由
- 功能：一個應用由若干個個視圖組成，然后呢，根據不同的業務邏輯展示不同的視圖給用戶。
- 理解
- 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，可以傳遞參數給后臺或其他。
轉載于:https://www.cnblogs.com/ddd-bcz/p/6649276.html
總結
以上是生活随笔為你收集整理的前端MVC框架之 Angular的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 搭建samba映射网络驱动器
- 下一篇： 学习微信公众号oauth2.0