一直说要给大家整理一下Angular的小方法,今天正好有空就给大家来分享下
Angular.js:
官方网站:www.angularjs.org
*** 在用Angular时，只盯住"数据" ***
Angular和原生js数据在一般情况下不互通
angular两个概念：
1.双向绑定
数据->页面 数据一变，页面就跟着变
页面->数据 页面变了，数据也会跟着变
2.依赖注入
JS的函数：参数由调用决定的(定义没用)
ng的函数：参数由定义决定的
ng-指令:
ng-model 绑定数据源;
ng-init 初始值;
ng-app 引用模块 (必须有)
ng-controller 引用控制器
ng-repeat 循环 (ng-repeat循环出来的元素的事件，不能直接赋值，可以套个函数)
ng-click 点击事件 (想用什么事件去除on在前面在上ng-)
ng-bind 数据绑定 (不太好用,会覆盖原有的内容) 可用{{xxx}} 模板输出
ng-show 显示
ng-hide 隐藏
ng-src 如果不加ng-也可以出现效果,会报错404
ng-href 引用数据
ng-class 需要放数组[className,className]
ng-style 需要放json{width:200px,height:200px}
ng-clack 防止页面加载过慢时出现模板输出{{xxx}}样式
Angular模块:
angular.module('模板名字', [依赖模板])
.controller('控制器名字', function (依赖项){ //定义控制器
Code---------------
})
.filter('过滤器名字', function (){ //定义过滤器
return function (input, ){
return 结果;
};
})
.service(名字, function (){ //定义服务
Code--------------
})
.directive('名字',function (){ //定义指令
return {
restrict: '类型', //ECMA
template: '直接写模板',
templateUrl: '模板地址',
transclude: true/false, //嵌入原内容
replace:true/false //
};
})
});
Angular依赖项:
$scope
$http Angular中的交互
$http.get
$http.post
$http.jonsp
$interval Angular中的定时器
$timeout Angular中的定时器
controller: //控制器
继承
父controller里定义的东西，子controller能用
通信
父子级controller——特别简单，共享$scope
无关的controller——麻烦，方法：自定义依赖
filter: //过滤器
{{数据|filter:"参数"}} //输出模板的样式
↑ ↑
input arg
angular.module('名称',[]).filter('过滤器名称',function(){
return function(){
return 返回展示的数据;
}
})
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中的嵌套:
把原有的内容嵌入进来
1.transclude: true //当需要嵌入原有内容时在函数中添加;
2.占位符
标签 xxx<span ng-transclude></span>xxx
xxx<span ng-transclude>内容</span>xxx
直接用 xxx<ng-transclude></ng-transclude>xxx
xxx<ng-transclude>内容</ng-transclude>xxx
自定义依赖(通信)
route
App、网页：状态
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方式===
根据http协议的规定
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默认转码的函数改了
{params: {a: 12, b: 5}} => '{"params": {"a": 12, "b": 5}}' //标准的json;
{params: {a: 12, b: 5}} => 'a=12&b=5'; //转为服务器能识别的样式;
如何修改:
Angular.module('',[])
.config(['$httpProvider', ($httpProvider)=>{
//1.把angular默认content-type改了
$httpProvider.defaults.headers.post['content-type']='application/x-ww...'
//2.把angular默认转码的函数改了
$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数据变化时
$scope.s=[];
$scope.$watch('wd', ()=>{
$http.jsonp(url, {params: {
wd: $scope.wd, cb: 'JSON_CALLBACK'
}}).then((res)=>{
$scope.s=res.data.s;
}, ()=>{
alert('失败');
});
});
});
*注:因Angular版本修改会导致无法使用建议使用低版本;
喜欢的帮我点击下哦,我还会更新一些常用的小方法哦!
