angular簡(jiǎn)介
- angular是一個(gè)框架，諸多類(lèi)庫(kù)的集合，以數(shù)據(jù)和邏輯為核心；
MVC
- modal-view-controller 模型-視圖-控制器
- 模型：服務(wù)端專(zhuān)門(mén)處理后臺(tái)傳入的數(shù)據(jù)；一般指操作數(shù)據(jù)庫(kù)
- 控制器：將服務(wù)端處理好的數(shù)據(jù)傳給前端； 連接模型和視圖的橋梁；
- 視圖：將內(nèi)容、數(shù)據(jù)呈現(xiàn)給；HTML展示
- 使用mvc框架，會(huì)更高效，易于管理和高效
AngularJS應(yīng)用
- 在任意DOM元素上使用一個(gè)屬性 ng-app,就可以定義一個(gè)AngularJS的應(yīng)用；
- ng-app屬性所有的DOM元素所包含的所有子元素都屬于應(yīng)用的一部分；
- 引用了angular框架下，會(huì)引入一個(gè)全局對(duì)象，angular；
- 在此對(duì)象下有若干對(duì)象，其中angular.module()可以實(shí)例化一個(gè)對(duì)象；
-
angular.module('App',[])兩個(gè)參數(shù)：- 1：模塊化名稱
- 2：依賴;[]暫時(shí)不依賴任何對(duì)象
- 控制器
App.controller()兩個(gè)參數(shù)- 1：名稱
- 2：依賴;
- 關(guān)于依賴，依賴的數(shù)組里，最后一個(gè)單元必須是一個(gè)函數(shù)
App.controller('DemoCtrl',[’$scope‘,function($scope){}])
- $scope 就是我們所需要的 M；
angular的內(nèi)置指令
- ng-show 是通過(guò) display：none 和 display：block來(lái)決定顯示和隱藏的
- ng-if 如果ng-if='false',那么在HTML中就沒(méi)有了這個(gè)DOM節(jié)點(diǎn)了；
- ng-class 值得類(lèi)型可以是對(duì)象，并且此對(duì)象的屬性是真是存在的類(lèi)樣式，屬性值決定了此屬性是否應(yīng)用，true為應(yīng)用，false不應(yīng)用
ng-class={box:true,red:true}為應(yīng)用box這個(gè)類(lèi)樣式 -
ng-include = “'aside.html'”;需要將aside.html用''包裹起來(lái)的；- 瀏覽器端 JS不能夠讀取本地文件，因?yàn)闉g覽器JS是運(yùn)行在客戶端的，出于安全考慮，是不允許讀取用戶磁盤(pán)文件的；
- ng-include是通過(guò)ajax發(fā)出請(qǐng)求，得到數(shù)據(jù)的；
- 表單禁用
disabled,只要屬性存在，不管是什么值，都表示禁用-
input type='text' disabled 或者disabled=''true/false；只要存在都是禁用 - 在angular中，
ng-disabled = 'true'表單禁用；ng-disabled = 'false'表單應(yīng)用
-
- 無(wú)值屬性:都可以進(jìn)行設(shè)置屬性值；
- ng-disabled
- ng-readonly
- ng-checked
- ng-selected
- ng-src 和 ng-href ;如果在HTML中直接寫(xiě)src=《path》，雖然在解析完成后地址會(huì)加載，但是會(huì)先報(bào)錯(cuò)；
Angular自定義指令
- angular是一個(gè)模塊實(shí)例
- .controller()來(lái)定義一個(gè)模塊
- .directive()來(lái)自定義屬性；
<p cls></p>
//自定義指令結(jié)構(gòu)
App.directive('cls',function(){
//return 回來(lái)是一個(gè)對(duì)象或者是函數(shù)，通常情況下都是對(duì)象
return {
//E : element DOM元素
//C: class
//M: mark:注釋
//A:attribute 屬性
restrict:"A",
replace:"true",//模板中的標(biāo)簽會(huì)將HTML中的標(biāo)簽進(jìn)行替換
template:"<h1>這是通過(guò)自定義指令添加的內(nèi)容</h1>"，
}
})
AngualrJS 雙向數(shù)據(jù)綁定
通過(guò)表單元素添加 ng-model 屬性；
ng-bind
-
花括號(hào)(使用《》代替)
- 《》是ng-bind的簡(jiǎn)寫(xiě)
<input type="text" ng-model='name'>//input可以直接獲取module中的$scope.name的值 <h1 ng-bind='name'></h1> <h2>《name》</h2> 只有表單元素才可以從視圖向模型傳送數(shù)據(jù)
AngularJS數(shù)據(jù)處理
-
ng-switch = "item"===ng-switch on = "item" - 閃爍問(wèn)題處理，可以添加 ng-cloak指令
<h1 ng-cloak>《name》</h1>; - angular 的遍歷
<li ng-repeat='item in lists'>{{item}}</li>
//或者是
<li ng-repeat='item in lists'>
<span ng-bind='item'></span>
</li>
小知識(shí)點(diǎn)
- 觸發(fā)臟值檢測(cè)
scope.$digest();監(jiān)聽(tīng)視圖中的數(shù)據(jù)改變；ng-click事件內(nèi)部中自動(dòng)封裝了這個(gè)檢測(cè)，也可以手動(dòng)添加； - form 表單有默認(rèn)的submit事件，通過(guò)回車(chē)就可以觸發(fā)；。form中如果有action，那么在submit之后，action也會(huì)重新發(fā)送一次請(qǐng)求，會(huì)刷新頁(yè)面，所以，當(dāng)使用submit提交數(shù)據(jù)時(shí)，可以將默認(rèn)的action刪除；
<form ng-submit='show()'>
<h1>todos</h1>
<input class="new-todo" ng-model='msg' placeholder="What needs to be done?" autofocus>
</form>
//angularJS通過(guò)ng-model將V與M進(jìn)行綁定；
//所以input中的value值就等于$scope.msg; 所以實(shí)際上$scope.msg = $('input').val();只不過(guò)這一步是AngularJS內(nèi)部做的；
//所以`$scope.msg=""`就直接將input的val值置空了；
- AngularJS 遍歷，獲取當(dāng)前元素的index值
<ul class="todo-list">
<li ng-repeat="item in tabs ">//item可以獲取當(dāng)前元素
<div class="view">
<input ng-click="change($index)" class="toggle" type="checkbox"> //$index 代表當(dāng)前元素所對(duì)應(yīng)的index值
<label>《item.tab》</label>
<button class="destroy"></button>
</div>
</li>
</ul>
- 在angular中，涉及到通過(guò)判斷而決定某個(gè)樣式顯示或隱藏時(shí)，盡量通過(guò) ng-class="{attr:flag}"來(lái)決定，不用再在js中進(jìn)行if判斷了；
作用域
- 根作用于
ng-app="App"所處的作用域
過(guò)濾器
- 在AngularJS中使用過(guò)濾器格式化展示數(shù)據(jù)，在“《》”中使用"|"來(lái)調(diào)用過(guò)濾器，使用“：”傳遞參數(shù)；
- 價(jià)格過(guò)濾器
《price|currency:'￥'：1》;冒號(hào)后面是傳參數(shù)，多個(gè)參數(shù)多個(gè)冒號(hào)鏈接，：1表示表劉一個(gè)小數(shù)； - 時(shí)間過(guò)濾器
《now | date:"yyyy-MM-dd hh:mm:ss"》 - 控制排序方向
《list | orderBy:"score":"true"》true為反向排序，false為正向排序，默認(rèn)為false； - 常用內(nèi)置過(guò)濾器
依賴注入
- 采用 ‘注入’ 的方式可以解決開(kāi)發(fā)過(guò)程中的依賴的關(guān)系，成為依賴注入；
- 一般 注入是通過(guò) ‘參數(shù)’ 的形式實(shí)現(xiàn)的；
-
$http同$scope一樣，也是AngularJS內(nèi)置的功能。可以提供發(fā)送異步請(qǐng)求的功能；
服務(wù)（重點(diǎn)）
-
$AngularJS內(nèi)置的服務(wù)；ng-AngularJS 內(nèi)置的指令； - 常見(jiàn)的內(nèi)置服務(wù)：需要在依賴中寫(xiě)入，然后才可以使用
- $scope
- $interval
- $timeout
- $log
- $http
$log 服務(wù) 調(diào)試信息的輸出
$log.error('這是一個(gè)錯(cuò)誤');
$log.warn('這個(gè)一個(gè)警告');
$log.log('這是一個(gè)console.log');
$log.debug('這是一個(gè)調(diào)試');
$log.info('這是一個(gè)普通內(nèi)容');
$timeout和 $interval
- $timeout 服務(wù)，延時(shí)顯示數(shù)據(jù)，$interval 服務(wù)：計(jì)時(shí)器
App.controller('DemoCtrl',['$timeout','$log','$interval',function ($timeout,$log,$interval) {
//$timeout是一個(gè)函數(shù)
//延時(shí)3秒后顯示內(nèi)容;
$timeout(function () {
$log.info('我哈哈哈,我等了3秒')
},3000);
var i = 0;
$interval(function () {
$log.info(i++);
},1000)
}])
$http 專(zhuān)門(mén)發(fā)起異步請(qǐng)求
- 2、在PHP中 $_POST 是專(zhuān)門(mén)接收 formData格式數(shù)據(jù)的，即“Content-Type:application/x-www-form-urlencoded”; 但是不能接收 Content-Type：application/json;
- 3、當(dāng)headers為“Content-Type:application/x-www-form-urlencoded”時(shí)，上傳的data格式為
data:"name=itcast&age=11"; - 4、當(dāng)headers為
“Content-Type:application/json”時(shí)，傳遞的參數(shù)格式為：data:{"name":"itcast","name":18};
AngularJS $http總結(jié)
- $http發(fā)送請(qǐng)求的方式有3種：method：“get”/"post"/'jsonp';
- 參數(shù)的傳遞方式為：params:
get方式請(qǐng)求
- "get"方式發(fā)送請(qǐng)求時(shí)，正常發(fā)送；參數(shù)以params:{name:'lisi',age:18}發(fā)送;
- 不管以什么方式傳遞參數(shù)，內(nèi)部都會(huì)轉(zhuǎn)換成 ？name=lisi&age=18的形式
- 在PHP中將傳入的參數(shù)以json對(duì)象的形式輸出
$http({
url:'./example.php',
method:'get',
params:{name:'lisi',age:18},
}).success(function (data) {
console.log(data);
})
//在PHP中代碼：
$name = $_GET['name'];
$age = $_GET['age'];
$array = ['name'=>$name,'age'=>$age];
//var_dump($array);
//將傳遞的參數(shù)放到數(shù)組中,并將數(shù)組轉(zhuǎn)換成json對(duì)象格式進(jìn)行輸出;
echo json_encode($array);
//結(jié)果為：{name: "lisi", age: "18"}
post方式請(qǐng)求
- “post”請(qǐng)求，需要注意兩點(diǎn)
設(shè)置請(qǐng)求頭：headers:“Content-Type:application/x-www-form-urlencoded”；
-
參數(shù)以data傳遞form data，data：“name=lisi&age=17”；請(qǐng)求頭與參數(shù)必須保持一致；
//post請(qǐng)求 $http({ url: './example.php', method: 'post', data: 'name=lisi&age=17', headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (data) { console.log(data); })
JSONP 的原理
前端傳遞一個(gè)實(shí)現(xiàn)定義好的函數(shù)名，給服務(wù)端，然后服務(wù)端接收這個(gè)函數(shù)名并拼湊一個(gè)“（）”，并返回，前端就接收到了 這個(gè)函數(shù)的調(diào)用；
在jQuery中，我們不寫(xiě)callback的明細(xì)，ajax會(huì)自動(dòng)幫我們生成一個(gè)，jQuery+序列號(hào)+時(shí)間戳等；但是在angularJS中，他們有幫我們封裝，所以必須手動(dòng)加上；
$http({
url:'./example.php',
method:'jsonp',
params:{
//callback必須用'JSON_CALLBACK'進(jìn)行占位，后端返回回調(diào)函數(shù)：angular.callbacks._0(lisi)；這個(gè)回調(diào)函數(shù)的結(jié)果就是success時(shí)的data數(shù)據(jù)；
callback:'JSON_CALLBACK',
name:'lisi',
age:17
}
}).success(function (data) {
console.log(data);
})
自定義服務(wù)，$service和$factory
- App.controller(); 內(nèi)置控制器
- App.directive(); 內(nèi)置指令
- App.filter(); 內(nèi)置過(guò)濾器
- App.factory(); 內(nèi)置服務(wù)
- App.service(); 內(nèi)置服務(wù)
- App.config(); 配置塊
- App.run(); 運(yùn)行塊
配置塊和運(yùn)行塊
- App.config():一個(gè)參數(shù)，為數(shù)組；[]；App.config([]);
App.config(['$logProvider','$filterProvider',function ($logProvider,$filterProvider) {
//通過(guò)$logProvider對(duì)$log進(jìn)行配置;
$logProvider.debugEnabled(false);
$filterProvider.register('capitalize',function () {
return function (input) {
return (input[0].toUpperCase() + input.slice(1));
}
})
}]);
//這樣在配置好之后，在HTML中就可以直接使用‘capitalize’服務(wù)了
<p ng-controller='DemoCtrl'> 《name | capitalize》</p>
運(yùn)行塊
- $rootScope: AngularJS的根作用域，可定于全局變量
App.run(['$rootScope',function ($rootScope) {
$rootScope.name = '順治';
}])
//這個(gè)name在此文件中的任何一個(gè)控制器中都可以使用；
路由
- 路由是URL地址與程序的映射關(guān)系；通過(guò)調(diào)整地址的變化，可以‘調(diào)用或執(zhí)行’ 某一具體的程序；
- SPA：single page application 單頁(yè)面展示所有功能；
- 多頁(yè)面最明顯的一個(gè)缺點(diǎn)就是每次更新頁(yè)面都要進(jìn)行刷新，不能得到很好的用戶體驗(yàn)；
- AngularJS的路由是建立在單頁(yè)面的基礎(chǔ)之上的；
-
onhashchange:檢測(cè)地址欄中地址的變化，綁在window上的 - PHP中：
file_get_contents('./views/'.$hash.'.html');獲取文件中的內(nèi)容 - 錨鏈接就是點(diǎn)斷的路由，就是地址與程序的映射關(guān)系；
路由的配置
- 路由經(jīng)過(guò)設(shè)置才能使用
- 模塊需要依賴路由
var Music = angular.module('Music',['ngRoute']);
<nav>
//錨點(diǎn)中有參數(shù)的時(shí)候，不會(huì)影響到路由；?
<a href="#!/login?name=小明">登錄</a> //地址必須寫(xiě)成 #！/的形式
<a href="#!/register">注冊(cè)</a>
</nav>
<!-- ng-view 是一個(gè)占位符-->
<div ng-view></div>
var App = angular.module('App',['ngRoute']);
//路由是需要配置才能使用;
App.config(['$routeProvider',function ($routeProvider) {
//兩個(gè)參數(shù)path 和 route
//第一個(gè)參數(shù):路由
//第二個(gè)參數(shù)是路由的配置
$routeProvider.when('/register',{
//template:"<h1>首頁(yè)</h1>",簡(jiǎn)單的內(nèi)容
templateUrl:'./views/register.html' //可以引入U(xiǎn)RL地址
//為當(dāng)前視圖文件分配控制器;
controller:'RegisterCtrl',
}).when('/login',{
//template:"<h1>登錄</h1>",
templateUrl:'./views/login.html'
}).otherwise({
//如果都不符合,可以設(shè)置默認(rèn)值
redirectTo:'/register'
})
}])
App.controller('RegisterCtrl',['$scope',function ($scope) {
$scope.title = '注冊(cè)';
}])
//然后在register.html頁(yè)面中就可以直接進(jìn)行數(shù)據(jù)綁定 <h1>《title》</h1>;
可以使用路由，也就是說(shuō)開(kāi)發(fā)者可以根據(jù)地址的變化執(zhí)行不同的業(yè)務(wù)邏輯；路由需要 配置 后才能被使用；
使用when方法監(jiān)聽(tīng)地址的變化，然后處理相應(yīng)的邏輯；
-
參數(shù)傳遞可以有兩種方式，一種方式是通過(guò)地址傳參：
地址傳參：其格式為?key1=val&key2=val2;.when('/login?name=lisi&age=17')
通過(guò)路由傳參: 路由/:參數(shù)名
?。?！注意：地址的格式（/login/:name/:pass）必須與路由的格式（#!/login/小明/12345）完全保持一致，一一對(duì)應(yīng)；
<a href="#!/login/小明/12345">登錄</a> .when('/login/:name/:pass',{ //template:"<h1>登錄</h1>", templateUrl:'./views/login.html' })- 獲取路由中傳遞的參數(shù)
var parameter = $routeParams;
