Angularjs 常用服务 $http $location
$anchorScroll $cacheFactory $timeout $interval $sce
学习要点：
1. Angularjs 中的 $http 服务
2. Angularjs 中的 $location $anchorScroll 服务
3. Angularjs 中的 $cacheFactory 服务
4. Angularjs 中的 $timeout $interval 服务
5. $sce 服务 浏览器简析 html 标签
1． Angularjs 中的 $http 服务
$http get 实例
$http.get(url,{params:{id:‘5‘}}) .success(function(response) {
$scope.names = response;
}).error(function(data){
//错误代码
});
$http post 实例：
var postData={text:‘这是 post 的内容‘};
var config={params:{id:‘5‘}}
$http.post(url,postData,config) .success(function(response) {
$scope.names = response;
}).error(function(data){
//错误代码
});
$http Jsonp 实例：
myUrl =
"http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSON_
CALLBACK";
$http.jsonp(myUrl).success(
function(data){
$scope.portalcate = data.result;
}
).error(function(){
alert(‘shibai‘);
});
2. Angularjs 中的 $location $anchorScroll 服务
$location 服务解析地址栏中的 URL（基于 window.location），让你在应用代码中
能获取到。改变地址栏中的 URL 会反应$location 服务中，反之亦然。
$location 服务:
1. 暴露当前地址栏的 URL，这样你就能
获取并监听 URL。
改变 URL。
2.当出现以下情况时同步 URL
改变地址栏
点击了后退按钮（或者点击了历史链接）
点击了一个链接
3.一系列方法来获取 URL 对象的具体内容用（ protocol, host, port, path, search,
hash） .formatDate
$location 不会做
当浏览器的 URL 改变时，不会重新加载整个页面。如果想要重新加载整个页面，
需要使用$window.location.href。
内置方法：
absUrl( )：只读；根据在 RFC 3986 中指定的规则，返回 url，带有所有的片段。
hash( )：读、写；当带有参数时，返回哈希碎片；当在带有参数的情况下，改变
哈希碎片时，返回$location。
host( )：只读；返回 url 中的主机路径。
path( )：读、写；当没有任何参数时，返回当前 url 的路径；当带有参数时，改
变路径，并返回$location。（返回的路径永远会带有/）
port( )：只读；返回当前路径的端口号。
protocol( )：只读；返回当前 url 的协议。
replace( )：如果被调用，就会用改变后的 URL 直接替换浏览器中的历史记录，而
不是在历史记录中新建一条信息，这样可以阻止『后退』。
search( )：读、写；当不带参数调用的时候，以对象形式返回当前 url 的搜索部分。
url( )：读、写；当不带参数时，返回 url；当带有参数时，返回$location。
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#parent div{ width:300px; height:500px; border:1px #000 solid; margin:20px;}
#parent ul{ width:200px; position:fixed; top:0; right:0;}
</style>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module(‘myApp‘,[]);
m1.controller(‘FirstControl‘,[‘$scope‘,‘$location‘,‘$anchorScroll‘,function($scope,$loc
ation,$anchorScroll){
$scope.change = function(id){
//console.log(id);
$location.hash(id);
$anchorScroll();
};
}]);
</script>
</head>
<body>
<div id="parent" ng-controller="FirstControl">
<ul>
<li ng-repeat="id in [1,2,3,4,5]"
ng-click="change(‘div‘+id)">{{id}}aaaaaaaaaa</li>
</ul>
<div ng-repeat="id in [1,2,3,4,5]" ng-attr-id="div{{id}}">{{id}}</div>
</div>
</body>
</html>
3. Angularjs 中的 $cacheFactory 服务
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#parent div{ width:300px; height:500px; border:1px #000 solid; margin:20px;}
#parent ul{ width:200px; position:fixed; top:0; right:0;}
</style>
<script src="../angular.min.js"></script>
<script>
var m1 = angular.module(‘myApp‘,[]);
m1.controller(‘Aaa‘,[‘$scope‘,‘$cacheFactory‘,‘$log‘,function($scope,$cacheFactory,$l
og){
$log.error(‘hello‘);
var cache = $cacheFactory(‘myCache‘);
cache.put(‘name‘,‘hello‘);
cache.put(‘age‘,‘20‘);
cache.put(‘job‘,‘it‘);
}]);
m1.controller(‘Bbb‘,[‘$scope‘,‘$cacheFactory‘,‘$log‘,function($scope,$cacheFactory,$l
og){
var cache = $cacheFactory.get(‘myCache‘);
console.log(cache.get(‘name‘));
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
</div>
<div ng-controller="Bbb">
</div>
</body>
</html>
4. Angularjs 中的 $timeout $interval
$timeout(function(){
$scope.name = ‘123‘;
},1100);
$ inteval(function(){
$scope.name = ‘123‘;
},1100);
$timeout.cancel(promise)
5. Angularjs 中的 $sce 服务
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstController">
{{name}}
<div ng-bind-html="detailContent()"></div>
</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller(‘firstController‘,function($scope,$timeout,$sce,$http){
$scope.name = ‘hello‘;
$scope.text = ‘<h1>hello</h1>‘;
var myUrl =
"http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=338&callback=J
SON_CALLBACK";
$http.jsonp(myUrl).success(
function(data){
//$scope.portalDetail = data.result[0];
$scope.detailContent = function() {
return $sce.trustAsHtml(data.result[0].content);
};
}
).error(function(){
alert(‘失败‘);
});
});
</script>
</body>
</html> </body>
</html>
