您的位置：首页 > Web前端 > JavaScript

Angular.js（六）

2017-07-24 19:05 141 查看

$http服务详解：和ajax原理很像，写法类似

var m1 = angular.module('myApp',[]);
m1.controller('A',['$scope','$http','$timeout',function($scope,$http,$timeout){
var timer = null;
$scope.data = [];
$scope.change = function(name){
$timeout.cancel(timer);    // 清除相关的定时器
timer = $timerout(function(){   // 500毫秒后开启定时器
$http({
method : 'JSONP',  // 采用jsonp的方式
url : 'http://..........?wd = '+ name + '&cb=JSON_CALLBACK'   // 数据传输的地址
}).success(function(data){
$scope.name = data.s  // 返回值在data.s下面
}).error(function(err){
console.log(err);
});
},500);
}
}])

<body ng-controller="A">
<input type="text" ng-model="name" ng-keyup="change(name)">  // 键盘抬起时 触发事件
<input type="button" value="搜索" ng-click = 'change(name)'> // 点击搜索的时 触发事件
<ul>
<li ng-repeat="list in data">{{ list }}</li>
</ul>
</body>

$location ：对原生JS中的location进行封装处理

hash（），path（），search（）既可以获取值，也能设置值

port（端口号），host（主机名），protocol（协议）只能获取，不能设置值

var m1 = angular.module('myApp',[]);
m1.controller('A',['$scope','$location',function($scope,$location){
// 输出的地址是地址栏中编码后的地址，当地址栏中的地址发生改变时，控制台会得到一个编码后的网址
//var a = $location.absUrl();
//$location.hash('hello');    // 设置哈希值
//var a = $location.hash();   // 输出的就是设置的哈希值
//$location.path('aaa');      // 设置路径，后退可以查看到以前的路径，有利于做路由操作，可以查看历史记录
//$location.path('aaa').replace(); // 清除之前的路径，后退查看不到以前的路径（一般用不上）
//var a = $location.path();
//$location.search({'age':10}); // 在地址栏中设置信息
//var a = $location.search();   // 输出的就是年龄信息
console.log(a)	;
}])

$anchorScroll：锚点跳转

var m1 = angular.module('myApp',[]);
m1.controller('A',['$scope','$anchorScroll','$location',function($scope,$anchorScroll,$location){
$scope.data = ['1','2','3','4','5','6'];
$scope.change = function(id){
$location.hash(id);
// $anchorScroll();   // 解决在同一的锚点不能跳转的问题,手动跳转
}
}])

<div ng-controller="A" class="box">
<ul>
<li ng-repeat="id in data" ng-click = "change('div'+id)">{{id}}0000000000000</li> // 把id传给change
</ul>
<div ng-repeat="id in data" ng-attr-id="div{{id}}">div{{id}}</div>
</div>

$cacheFactory ：缓存操作

var m1 = angular.module('myApp',[]);
m1.controller('A',['$scope','$cacheFactory',function($scope,$cacheFactory){
var cache = $cacheFactory('myCache',{capacity:2});   // 限制缓存的条数，如果数据多余两条，只会留下最后两条数据
cache.put('name','hello');   // cache.put 添加数据
cache.put('age','20');
cache.put('sex','男');
console.log(cache.info());  // 打印数据包括 id capacity size(代表有几条数据)
console.log(cache.get('sex'));  // 获取信息
cache.remove('age');   //移出信息
console.log(cache.info());
}])

$log的用法

var m1 = angular.module('myApp',[]);
m1.controller('A',['$scope','$log',function($scope,$log){
$log.log('hello');     // 与console.log用法一样
$log.error('hello');   // 报错
$log.warn('hello');    // 警告
$log.info('hello');    // 信息
}])

$log的供应商

var m1 = angular.module('myApp',[]);
m1.config(['$logProvider',function($logProvider){
$logProvider.debugEnabled(true);    // 当为true时，$log.debug可以显示提示信息，当为false时，$log.debug不会显示提示信息

}]);
m1.controller('A',['$scope','$log',function($scope,$log){
$log.debug('hello');
}]);

$interpolate ：插值服务

在textarea中输入{{name}}时，输出的是input中的value值也就是name所对应的属性值，案例：

var m1 = angular.module('myApp',[]);
m1.controller('A',['$scope','$interpolate',function($scope,$interpolate){
$scope.$watch('area',function(newVal){
if(newVal){
var temp = $interpolate(newVal);
$scope.showText = temp({name:$scope.name})
}
})
}])

<div ng-controller="A" class="box">
<input type="text" ng-model="name">
<textarea ng-model="area">
</textarea>
<p>{{showText}}</p>
</div>

$q ：就是promise的实现方式，也就是对异步操作进行功能扩展

$q.defer().resolve：成功

$q.defer().reject：失败

$q.defer().notify：通知

then()：监听（成功或者失败）

var m1 = angular.module('myApp',[]);
m1.controller('A',['$scope','$q',function($scope,$q){
var a = $q.defer()  // 创建了一个延迟对象
function show(){
setTimeout(function(){    // 开启一个定时器
a.reject();       // 让这个延迟失败
},2000)
return a.promise;
}
show().then(function(){           // 监听看返回的是成功还是失败
alert('success');         // 成功弹出 success
},function(){
alert('fail');            // 失败弹出 fail
})
}])

Provider：供应商（服务的相关初始配置操作，大多数服务都有供应商）

改变差值的初始化配置

var m1 = angular.module('myApp',[]);
m1.config(['$interpolateProvider',function($interpolateProvider){
$interpolateProvider.startSymbol('@@');  // 改变头部的符号
$interpolateProvider.endSymbol('@@')     // 改变尾部的符号

}]);
m1.controller('A',['$scope','$interpolate',function($scope,$interpolate){
$scope.name = "hello";
}]);

<div ng-controller="A">
<p>@@name@@</p>    // 只有当@@ name @@ ，才会被输出
</div>

$anchorScrollProvider：自动跳转服务的供应商

例如上面的锚点链接跳转的例子，如果对$anchorScrollProvider进行初始化配置，如下代码，就不会完成锚点链接跳转，除非在controller服务中，手动跳转（红色字）

var m1 = angular.module('myApp',[]);
m1.config(['$anchorScrollProvider',function($anchorScrollProvider){
$anchorScrollProvider.disableAutoScrolling();    // 禁止自动跳转
}]);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angular.js 框架模块化

相关文章推荐

新的分享

章节导航