前端MVC框架之 Angular
一、什么是Angular
- jQuery，它屬于一種類庫(一系列函數(shù)的集合)，以DOM為驅動核心；而Angular是一種 MVC 的前端框架，則是前端框架，以數(shù)據(jù)和邏輯為驅動核心，它有著諸多特性，最重要的是：模塊化，雙向數(shù)據(jù)綁定，語義化標簽，依賴注入等。
MVC 開發(fā)模式：model（模型），view（視圖），controller（控制器）。
二、模塊化
最大程度實現(xiàn)代碼復用
定義應用
為HTML標簽添加 ng-app 屬性，表明整個文檔都是應用，也可指定標簽添加，該標簽包裹的所有內容都是應用的一部分（++注：沒有關聯(lián)相應模塊，一定不能賦值；但如果關聯(lián)相應模塊，必須賦值++）
定義模塊
- 提供一個全局對象Angular，用angular.module(參數(shù)1，參數(shù)2)方法定義模塊，輸出一個返回值。
- 第一個參數(shù)：跟ng-app的值一致；
第二個參數(shù)：數(shù)組。表明該模塊依賴其他模塊，依賴不存在則寫 [ ]；
定義控制器（view和model的橋梁）
- 定義模塊輸出的返回值.controller(參數(shù)1，參數(shù)2)。
- 第一個參數(shù)：控制器名稱（++確定與view的關聯(lián)++，在HTML標簽添加ng-controller：控制器名稱）；
- 第二個參數(shù)：為一個數(shù)組，除了最后一個單元是函數(shù)，其余都是字符串，該參數(shù)表明控制器的依賴關系。
三、指令
常用內置指令
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區(qū)別：當為false的時候，連同整個DOM節(jié)點都不存在）
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
四、數(shù)據(jù)綁定
單向綁定
- 只能是模型數(shù)據(jù)向視圖傳遞（類似artTemplate模板引擎的工作方式）
- 相關指令：
- 通過 {{}} 或者 ng-bind 來實現(xiàn)模型數(shù)據(jù)向視圖模板的綁定，模型數(shù)據(jù)由一個內置服務$scope提供，它是個空對象，通過為這個對象添加屬性或方法，便可以在相應的視圖模板里被訪問。
這里的 {{}} 是 ng-bind 的簡寫形式，區(qū)別在于通過 {{}} 綁定數(shù)據(jù)時會出現(xiàn)閃屏，添加添加 ng-cloak 也可以解決“閃爍”現(xiàn)象。
雙向綁定
- 視圖 -->傳到 模型上 -->再傳回視圖
- 相關指令：
- ng-model
- 舉一個小例子：
初始化模型（既初始化$scope）
ng-init （很少用）。
事件處理
- 無需顯式的獲取DOM元素便可添加事件
在原有事件前面添加前綴“ng”，然后以屬性的形式添加到HTML便簽中，例如：ng-click
數(shù)據(jù)處理
- 相關指令：
- ng-repeat: 可以將數(shù)組或對象數(shù)據(jù)迭代到視圖模板中
ng-switch 和 ng-switch-when 配合使用
五、作用域
- 每個controller下的$scope產生不同的作用域
根作用域：ng-app所在的標簽內
六、過濾器
- 內置過濾器
- currency[貨幣] 將數(shù)值格式化為貨幣格式
- date 日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、時（H/h）、分（m）、秒（s）、毫秒（.sss），也可以組合到一起使用。
- filter 在給定數(shù)組中選擇滿足條件的一個子集，并返回一個新數(shù)組，其條件可以是一個字符串、對象、函數(shù)
- json 將Javascrip對象轉成JSON字符串。
- limitTo 取出字符串或數(shù)組的前（正數(shù)）幾位或后（負數(shù)）幾位
- lowercase 將文本轉換成小寫格式
- uppercase 將文本轉換成大寫格式
- number 數(shù)字格式化，可控制小位位數(shù)
- orderBy 對數(shù)組進行排序，第2個參數(shù)是布爾值可控制方向(正序或倒序)
- 自定義過濾器
- 通過模塊對象實例提供的filter方法自定義過濾器
- 總結
豎線調用，冒號傳值。
七、依賴注入
- 通過注入的方式解決依賴問題，通過回調函數(shù)的參數(shù)來實現(xiàn)。
- 常見AngularJS內置服務：$http、$http、$location、$timeout、$rootScope
- 分類：
- 行類式
推斷式（不建議使用，代碼壓縮后，參數(shù)無法找到，無法找到依賴）
八、服務
- 內置服務
- $Timeout 和 $interval與原生JS區(qū)別，不需要每次手動開啟臟值檢查，即$scope.$digest()
- 是對原生JS的封裝
- 常見內置服務：
- $http 向服務器端發(fā)起異步請求（注意前后端言行（接收/發(fā)送）一致）
- post的請求方式：對應數(shù)據(jù)用data，
- post要有個請求頭headers，這里headers的值用{}括起來，angularJS默認是'application/json'。發(fā)送請求頭有兩種格式來傳送數(shù)據(jù)（注意：php中$_POST[ ]只能接收formData格式數(shù)據(jù)的application/x-www-form-urlencoded這一種格式的數(shù)據(jù)）
- 'Content-Type', 'application/x-www-form-urlencoded'，該格式發(fā)送的參數(shù)為字符串key=value格式，例如"username=zhangsan".
- 'Content-Type', 'application/json'，該格式發(fā)送的參數(shù)為json格式，例如{"username"："zhangsan"}
- get的請求方式：對應數(shù)據(jù)用params，ps:服務器端接收$_GET[]， 在success中打印$log.info(ret)可以檢查數(shù)據(jù)是否傳到服務器。
- 1.5.8之前的版本，回調函數(shù)用success()，error()；1.6版本之后的版本用then()
- 跨域
- jsonp 用一句話概括，前端發(fā)送一個事先定義好的函數(shù)名給服務端，服務端接收這個函數(shù)名并拼湊“（）”，并返回；前端就接收了一個函數(shù)的調用
- method: "jsonp" ,params:{ callback:"JSON_CALLBACK" },其中JSON_CALLBACK為臨時定義的函數(shù)名發(fā)給服務端，讓服務端替換(注:1.6之后不需寫這個)；在jquery中，自動幫你傳了，所以不用這一步。
- $log 打印調試信息($log.log()、$log.error()、$log.warn()、$log.debug()、$log.info())
- $filter 在控制器中格式化數(shù)據(jù)
- $Timeout 和 $interval
- $http 向服務器端發(fā)起異步請求（注意前后端言行（接收/發(fā)送）一致）
自定義服務
九、模塊加載
- 配置塊
- 通過config來實現(xiàn)對服務的配置（也可以更改一些服務的默認設置）,AngularJS絕大多數(shù)服務都有對應的provider。例如：$route 對應的$routeProvider(配置路由)
- 運行塊
特殊：run方法 還是最先執(zhí)行的。 案例：比如驗證用戶是否登錄，未登錄則不允許進行任何其它操作。
十、路由
- 功能：一個應用由若干個個視圖組成，然后呢，根據(jù)不同的業(yè)務邏輯展示不同的視圖給用戶。
- 理解
- SPA：Single Page Application 單頁面應用
- 鏈接使用錨點
- 單一頁面原理：單頁面通過hashchange事件監(jiān)聽錨點的變化，實現(xiàn)不同錨點準備找到對應的視圖
- 路由: AngularJS基于單一頁面原理進行封裝，將錨點變化封裝成路由，這也是與后端路由的根本區(qū)別
- 路由的使用：
- 需引入angular-route.js文件
實例化模塊，傳入依賴（路由名稱為：ngRoute）
配置路由（config、$routeProvider、when（條件））
布局模板（用ng-view指令，路由匹配的視圖會渲染到該區(qū)域）
- 路由的參數(shù)：
- 兩種方法匹配路由：when和otherwise，when可以調用多次。otherwise作為when的補充，參數(shù)只有一個。
- when有兩個參數(shù)
- 參數(shù)1：是個字符串，代表當前url的hash值；例如：“/：type”
- 參數(shù)2：是一個對象，配置當前路由參數(shù)，如視圖、控制器
- template：字符串形式視圖模板
- templateUrl：引入外部視圖模板
- controller：視圖模板所屬控制器，作用之一：通過http請求向后臺要數(shù)據(jù)
- redirectTo：跳轉到其他路由 例如：“/2”；
- 獲取路由參數(shù)，在控制器中注入$routeParams，可以傳遞參數(shù)給后臺或其他。
轉載于:https://www.cnblogs.com/ddd-bcz/p/6649276.html
總結
以上是生活随笔為你收集整理的前端MVC框架之 Angular的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 搭建samba映射网络驱动器
- 下一篇： 2017年html5行业报告,云适配发布