一直說要給大家整理一下Angular的小方法,今天正好有空就給大家來分享下
Angular.js:
官方網(wǎng)站:www.angularjs.org
*** 在用Angular時夕冲，只盯住"數(shù)據(jù)" ***
Angular和原生js數(shù)據(jù)在一般情況下不互通
angular兩個概念：
1.雙向綁定
數(shù)據(jù)->頁面 數(shù)據(jù)一變乓序，頁面就跟著變
頁面->數(shù)據(jù) 頁面變了原献，數(shù)據(jù)也會跟著變
2.依賴注入
JS的函數(shù)：參數(shù)由調(diào)用決定的(定義沒用)
ng的函數(shù)：參數(shù)由定義決定的
ng-指令:
ng-model 綁定數(shù)據(jù)源;
ng-init 初始值;
ng-app 引用模塊 (必須有)
ng-controller 引用控制器
ng-repeat 循環(huán) (ng-repeat循環(huán)出來的元素的事件廉邑，不能直接賦值，可以套個函數(shù))
ng-click 點擊事件 (想用什么事件去除on在前面在上ng-)
ng-bind 數(shù)據(jù)綁定 (不太好用,會覆蓋原有的內(nèi)容) 可用{{xxx}} 模板輸出
ng-show 顯示
ng-hide 隱藏
ng-src 如果不加ng-也可以出現(xiàn)效果,會報錯404
ng-href 引用數(shù)據(jù)
ng-class 需要放數(shù)組[className,className]
ng-style 需要放json{width:200px,height:200px}
ng-clack 防止頁面加載過慢時出現(xiàn)模板輸出{{xxx}}樣式
Angular模塊:
angular.module('模板名字', [依賴模板])
.controller('控制器名字', function (依賴項){ //定義控制器
Code---------------
})
.filter('過濾器名字', function (){ //定義過濾器
return function (input, ){
return 結(jié)果;
};
})
.service(名字, function (){ //定義服務
Code--------------
})
.directive('名字',function (){ //定義指令
return {
restrict: '類型', //ECMA
template: '直接寫模板',
templateUrl: '模板地址',
transclude: true/false, //嵌入原內(nèi)容
replace:true/false //
};
})
});
Angular依賴項:
$scope
$http Angular中的交互
$http.get
$http.post
$http.jonsp
$interval Angular中的定時器
$timeout Angular中的定時器
controller: //控制器
繼承
父controller里定義的東西慨畸，子controller能用
通信
父子級controller——特別簡單莱坎，共享$scope
無關(guān)的controller——麻煩，方法：自定義依賴
filter: //過濾器
{{數(shù)據(jù)|filter:"參數(shù)"}} //輸出模板的樣式
↑ ↑
input arg
angular.module('名稱',[]).filter('過濾器名稱',function(){
return function(){
return 返回展示的數(shù)據(jù);
}
})
directive:
directive中的ECMA
1.元素型 自定義元素(標簽) //Element;
<aaa-slider>
<aaa-slider-item src="1.png"/>
<aaa-slider-item src="2.png"/>
<aaa-slider-item src="3.png"/>
</aaa-slider>
2.class型 //Class;
3.屬性型 自定義屬性 //Attribute;
<aaa-dialog abc-drag="true">
<aaa-button type="ok" value="確定"/>
<aaa-button type="cancel" value="取消"/>
</aaa-dialog>
4.注釋型 //Comment;
directive中的嵌套:
把原有的內(nèi)容嵌入進來
1.transclude: true //當需要嵌入原有內(nèi)容時在函數(shù)中添加;
2.占位符
標簽 xxx<span ng-transclude></span>xxx
xxx<span ng-transclude>內(nèi)容</span>xxx
直接用 xxx<ng-transclude></ng-transclude>xxx
xxx<ng-transclude>內(nèi)容</ng-transclude>xxx
自定義依賴(通信)
route
App寸士、網(wǎng)頁：狀態(tài)
Angualr中的$http:
$http.get
===GET方式===
兩種寫法：
1.字符串模板
$http.get(`xxx?asf=sdf`).then(Fn);
2.params傳參
$http.get('url', {params: {xxx},responseType:'json'}).then(Fn,Fn); //需要加data
$http.get('url', {params: {xxx},responseType:'json'}).success(Fn).error(Fn); //直接使用
$http.post
===POST方式===
根據(jù)http協(xié)議的規(guī)定
GET方式：1種編碼方式 urlencoded編碼
weibo.php?a=12&b=5
POST方式：3種編碼方式
Content-Type:application/x-www-form-urlencoded
1.把angular默認content-type改了
改成服務器認識的urlencoded編碼
2.把angular默認轉(zhuǎn)碼的函數(shù)改了
{params: {a: 12, b: 5}} => '{"params": {"a": 12, "b": 5}}' //標準的json;
{params: {a: 12, b: 5}} => 'a=12&b=5'; //轉(zhuǎn)為服務器能識別的樣式;
如何修改:
Angular.module('',[])
.config(['$httpProvider', ($httpProvider)=>{
//1.把angular默認content-type改了
$httpProvider.defaults.headers.post['content-type']='application/x-ww...'
//2.把angular默認轉(zhuǎn)碼的函數(shù)改了
$httpProvider.defaults.transformRequest=function (data){
data=>{params: {}}
data.params => 'a=12&b=5'
return str;
};
}])
.controller('',function (){
//Code
})
$http.jonsp
如何使用:
Angular.module('', [])
.controller('', ($scope, $http)=>{
$scope.wd='';
var url='自己找一個jsonp接口';
//當wd數(shù)據(jù)變化時
$scope.s=[];
$scope.$watch('wd', ()=>{
$http.jsonp(url, {params: {
wd: $scope.wd, cb: 'JSON_CALLBACK'
}}).then((res)=>{
$scope.s=res.data.s;
}, ()=>{
alert('失敗');
});
});
});
*注:因Angular版本修改會導致無法使用建議使用低版本;
喜歡的幫我點擊下哦,我還會更新一些常用的小方法哦!
