Angular 簡介
什么是 AngularJS
- 一款非常優(yōu)秀的前端高級 JS 框架
- 最早由 Misko Hevery 等人創(chuàng)建
- 2009 年被 Google 公式收購，用于其多款產(chǎn)品
- 目前有一個全職的開發(fā)團隊繼續(xù)開發(fā)和維護這個庫
- 有了這一類框架就可以輕松構(gòu)建 SPA 應(yīng)用程序
- 輕松構(gòu)建 SPA（單一頁面應(yīng)用程序）
- 單一頁面應(yīng)用程序：
- 只有一個頁面（整個應(yīng)用的一個載體）
- 內(nèi)容全部是由AJAX方式呈現(xiàn)出啦的
- 其核心就是通過指令擴展了 HTML，通過表達式綁定數(shù)據(jù)到 HTML。
為什么使用 AngularJS
- 更少的代碼远豺，實現(xiàn)更強勁的功能
- 將一些以前在后臺開發(fā)中使用的思想帶入前端開發(fā)
- 帶領(lǐng)當前市面上的框架走向模式化或者架構(gòu)化
AngularJS 的核心特性
- MVC
- 模塊化
- 自動化雙向數(shù)據(jù)綁定
- 指令系統(tǒng)
相關(guān)鏈接
- http://www.apjs.net/
- http://www.angularjs.cn/
- http://docs.angularjs.cn/api
- https://material.angularjs.org
- http://angular-ui.github.io/
Angular 上手
安裝 Angular
-
下載 Angular.js 的包
-
使用 CDN 上的 Angular.js
-
使用 Bower 安裝
bower install angular -
使用 NPM 安裝
npm install angular 每種方式安裝包泌神，本質(zhì)都是將angular的庫下載到當前文件夾中
angular中最重要的概念是指令（directive）
ng-model 是雙向數(shù)據(jù)綁定的指令，效果就是將當前元素的value屬性和模型中的user.name建立綁定關(guān)系
JS: BOM DOM ES
使用總結(jié)
運行官方文檔
CDN的優(yōu)勢
Content Delivery Network
- 快
- 節(jié)省自己服務(wù)器的帶寬壓力和流量
Angular 基礎(chǔ)概念
MVC 思想
什么是 MVC 思想
- 將應(yīng)用程序的組成劃分為三個部分：Model View Controller
- 控制器的作用就是初始化模型用的赔癌，組織調(diào)度相應(yīng)的處理模型须鼎；
- 模型就是用于存儲數(shù)據(jù)的,處理數(shù)據(jù)與業(yè)務(wù)邏輯
- 視圖用于以有好的方式向用戶展現(xiàn)數(shù)據(jù)
優(yōu)勢：每個模塊分工明確鲸伴，職責清晰，復(fù)用晋控。
目的：模塊化和復(fù)用
- 登陸案例
- 模型
- 我們數(shù)據(jù)庫中所有用戶的信息
- 接受控制器傳來的用戶名和密碼進行校驗的業(yè)務(wù)邏輯并返回true/false
- 控制器
- 接受用戶在界面上填寫的用戶名和密碼
- 將用戶名和密碼交給模型
- 視圖
- 給用戶呈現(xiàn)一個表單
- 接受用戶輸入內(nèi)容汞窗，并將其提交給控制器
- 根據(jù)控制器返回的數(shù)據(jù)，響應(yīng)用戶頁面
模塊（Module）
//創(chuàng)建一個名字叫MyApp的模塊赡译，第二個參數(shù)指的是該模塊依賴哪些模塊
var myApp = angular.module("MyApp",[]),
- 建立模塊仲吏，通過ng-app指令指定不同的模塊，劃分應(yīng)用程序結(jié)構(gòu)，對頁進行業(yè)務(wù)上的劃分蜘矢；模塊間相互獨立
- 也可以將重復(fù)使用的指令或過濾器之類的做成模塊便于使用
- angular.module方法傳遞兩個參數(shù)才是創(chuàng)建模塊狂男，一個參數(shù)是獲取模塊
- 便于協(xié)同分工和維護
控制器（Controller）
angular.mdule ('OneApp',[])
.controller('HelloController',[
'$scope',
function($scope){
$scope.p={
name:'zhangsan'
};
}
]);
控制器的三種職責
- 為應(yīng)用中的模型設(shè)置初始狀態(tài)
- 通過$scope對象把數(shù)據(jù)模型或函數(shù)行為暴露給視圖
-監(jiān)視模型的變化综看，做出相應(yīng)的動作
例如
$scope.$watch('totalCart',calculateDiscount)
watch只能監(jiān)視$scope中已有的屬性
視圖模型（$scope）
- 視圖和控制器之間的橋梁
- 用于在視圖和控制器之間傳遞數(shù)據(jù)
- 利用$scope暴露數(shù)據(jù)模型（數(shù)據(jù)品腹、行為）
表達式（Expression）
作用
把 數(shù)據(jù)綁定到html上
語法
寫在雙大括號內(nèi){{expression}}
包含文字，運算符红碑，變量
與JavaScript表達式對比
單向數(shù)據(jù)綁定
雙向數(shù)據(jù)綁定
Angular 指令系統(tǒng)
ng-app指令
angular找到第一個ng-app過后就不會再找,手動的讓第二個div被myApp2管理
angular.bootstrap(document.querySelector('[ng-app="myApp2"]'),['myApp2']);
也可以通過模塊依賴關(guān)系舞吭，創(chuàng)建一個總模塊，依賴其他多個模塊
angular.module('myApp', ['myApp1', 'myApp2']);
ng-bind指令
ng-bind指令在綁定的值包含HTML時會轉(zhuǎn)義析珊，為了安全（跨站腳本攻擊）,需要引入sanitize.js,并且該模塊要添加依賴ngSanitize模塊羡鸥。
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
使用自定義的模塊才可以依賴別的包里面定義模塊，angular定義的默認模塊沒有依賴任何
angular.module('myApp', ['ngSanitize']);
ng-model指令
用于綁定應(yīng)用程序數(shù)據(jù)到html控制器（input select text）的值忠寻，可以將輸入的值與angularJS創(chuàng)建的變量綁定惧浴。
ng-repeat指令
ng-class指令
ng-show /ng-hide指令
ng-link/ng-src指令
自定義指令
過濾器filter
作用
常見的過濾器有
date過濾器
主要用于時間格式的轉(zhuǎn)換
limitTo過濾器
filter過濾器
filter過濾器會根據(jù)設(shè)置的檢索數(shù)據(jù)過濾未匹配到的數(shù)據(jù)內(nèi)容，也可以通過設(shè)置檢索條件為一個對象奕剃，實現(xiàn)在指定屬性中檢索
通過自定義一個比較函數(shù)衷旅，在前臺為filter指定的第二個參數(shù)實現(xiàn)
json過濾器
可以將一個對象以json形式解析，利用它纵朋，我們可以在界面上直觀的查看一些對象的成員柿顶，這也是調(diào)試的好辦法。
自定義過濾器
實現(xiàn)自定義數(shù)據(jù)格式轉(zhuǎn)換
Form表單
Form表單-----驗證
Form表單-----驗證規(guī)則
服務(wù)（service）
創(chuàng)建服務(wù)
通過模塊的service方法創(chuàng)建一個服務(wù)
內(nèi)置服務(wù)——$http
此服務(wù)是AngularJS中處理AJAX的服務(wù)
請求數(shù)據(jù)方式$http.jsonp(url).success(function(res){}
