AngularJS常用服务($http、$location、$sce等)

原创 2016年08月09日 17:29:25

这篇博客,只是简单地说下AngularJS中的常用的系统(自带)服务。如果逻辑不清晰,就当作是一个参考手册吧,来查查用法什么的。
另外,附上一些参考网站:
AngularJS手册:http://man.hubwiz.com/manual/AngularJS(汇智网)
AngularJS常用服务:https://docs.angularjs.org/api/ng/service(AngularJS官方文档)

一、$http


$http是对Ajax(XHR)的封装。这里介绍3种用法。

1、GET请求的用法:

$http.get(url)
    .success(function (data) { 
        // 这里的data是一个object,是我们想要的数据部分,不包含状态码等
        // 成功的回调
    }).error(function (err) {
    // 出错的回调
});

2、POST请求的用法也差不多,只是多了参数:

var url = "...";
var postData = {
    id: "123",
    token: "x1234q3412fwdfw3r23"
};
$http.post(url, postData)
    .success(function (data) { 
        // 成功的回调
    }).error(function (err) {
    // 出错的回调
});

题外话:这里post请求的参数的数据类型,默认是“application/json”,而jQuery的post默认用的“application/x-www-form-urlencoded”。

3、jsonp:

如果不甚了解jsonp,可以看下这里:http://kb.cnblogs.com/page/139725/
简单来说,因为同源策略的存在,Ajax脚本不能跨域访问资源,所以我们只能把回调函数作为参数之一传给服务器,让服务器端返回数据的时候指定调用我们的回调函数。所以,我们只需要把回调函数写好就可以了,在这里,我们写在success中:

// 在jsonp中,url的最后必须严格带上“&callback=JSON_CALLBACK”,而且名字不能改
var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSON_CALLBACK";

$http.jsonp(url)
       .success(function (data) { // 在这里定义JSON_CALLBACK。其实与GET差不多
            console.log('jsonp:', data)
        })
        .error(function (err) {
            console.log('error', err);
        });

此外,put、delete等,可以直接看手册,这里就不多说了。而且,格式都是差不多的:
AngularJS手册

二、$location(配合$anchorScroll)


  • 简介:使用$location可以得到当前页面url的参数。用户对于Url做出的改变,会通知到$location中,而$location对Url的一些操纵也会反映到地址栏上面。

  • 方法:
    $location服务的方法

1、没有参数时,作为getter,获取url信息:

举个例子,以我测试的代码打开的url:
http://localhost:63342/test/templates/demo01.html#/hello?name=jk&age=10#helloworld

在controller中注入$location服务,打印出来各个方法(代码就不掩饰了,直接贴结果):
$location打印信息

2、有参数的时候,作为setter,(部分地)改变当前url:

上面我们看到,这些方法不填入参数的话,是作为getter使用。而其中有4个方法,当填入参数的时候可以作为url的setter来使用,并且返回该$location服务(以便链式调用),这4个方法可以从上面截图中看到:
- $location.url(urlValue)
- $location.path(pathValue)
- $location.hash(hashValue)
- $location.search(paramObj)

例子:

// 假定原来的完整url为:
// http://localhost:63342/test/templates/demo01.html#/tabs/chat?name=JK&age=10#noHash


var url = $location.url("url2").absUrl();
// 到这里变成:
// http://localhost:63342/test/templates/demo01.html#/url2


url = $location.path("path2")
    .search({
        name: "CL",
        age: 12
    })
    .hash('hash2')
    .absUrl();
// 到这里变成:
// http://localhost:63342/test/templates/demo01.html#/path2?name=CL&age=12#hash2

3、对$location.hash([id])的特别说明:

$location的hash方法填入一个DOM元素的id值,可以快速定位到该DOM元素。比如以下程序。
程序说明:设定5个div,通过点击5个列表项可以快速定位到这5个div:
demo01.html:

<div id="parent" ng-controller="firstController">

    <!--以下为5个列表项,可以点击,以改变hash值,定位到某个div块-->
    <ol>
        <li ng-repeat="id in [1,2,3,4,5]" ng-click="goTo('div'+id);">Go to div{{id}}</li>
    </ol>

    <!--以下为5个div块-->
    <div id="div1">This is div1.</div>
    <div id="div2">This is div2.</div>
    <div id="div3">This is div3.</div>
    <div id="div4">This is div4.</div>
    <div id="div5">This is div5.</div>
</div>

css文件就不贴出来了。以下是js文件
demo01_app.js:

angular.module('myDemo', [])

    .controller('firstController', ['$scope', '$location', '$anchorScroll', function ($scope, $location, $anchorScroll) {

        $scope.goTo = function (id) {
            if (id !== $location.hash()) { // 如果hash值改变了
                $location.hash(id);        // 就用hash方法,定位到那个div
            } else {             // 如果hash值没有改变
                $anchorScroll(); // 就显式调用$anchorScroll()来重新定位
            }
        }
    }]);

效果(gif):
hash

   这里为什么要用到$anchorScroll这个服务呢?通过测试我发现,如果每次都只调用hash方法来定位元素的话,会出现这么一种情况,使得$location的hash()方法是无效的:(为了可以随时跳转,我把5个可点击的列表项的position属性设成“fixed”,即固定在屏幕的某个位置)当我点击“Go to div1”的时候跳到了div1,此时Url中的hash值是“##div1”,到这里没问题。但这时候,如果我滚动屏幕到最底端,大概到达div5的位置的时候再点击“Go to div1”,是不能再跳转到div1块的,因为hash值没有改变,$location.hash()这个方法是“无效”的。所以,这种情况就要请$anchorScroll服务出来了,它负责这种特殊情况下的跳转,而它在这里也只简单地调用了一下方法而已。

三、$cacheFactory


1、介绍:

$cacheFactory是应用程序一个会话(Session)中的缓存服务,以key-value对的方法存储一些临时数据。它跟浏览器本地缓存localStorage是不一样的。$cacheFactory在用户删除当前会话(比如强制刷新页面)之后,缓存的数据就被清空了。

2、用法:

(1)首先,要得到一个缓存实例,用id来区分,比如我想取id为’firstCache’的缓存:

var cache = $cacheFactory('firstCache');

(2)添加kv对,put方法:

cache.put(key, value);

(3)获取,get方法:

cache.get(key); // 如果不存在这个key的话,会返回undefined

(4)添加kv对,put方法:

cache.put(key, value);

(5)删除,remove和removeAll:

cache.remove(key); // 删除某个kv对
cache.removeAll(); // 删除该缓存的全部kv对

(6)删除该缓存实例,destroy:

cache.destroy(); // 把当前缓存删除掉

cache.put(key, value); // 错误!不能再访问该缓存,要重新生产一个实例出来

四、$timeout、$interval


1、介绍:

$timeout和$interval是AngularJS自带的服务,跟原生js中的setTimeout和setInterval函数的用法基本是一样的。但是有两个不一样的地方需要注意一下:

  • 区别一:
    原生js中的两个函数,如果在AngularJS中使用并且在回调函数中需要使用$scope服务的话,我们需要用$angular.$apply把回调函数包起来,因为这里setTimeout函数被AngularJS当作是外部函数了。就像这样:
// 错误的写法示例(使用setTimeout却没有用$apply):
angular.module('myDemo', [])

    .controller('firstController', ['$scope', function ($scope) {

        setTimeout(function () {
            console.log('before');  // 正常输出before
            $scope.name = "My name have been changed."; // 这一句不被执行
            console.log('after');   // 正常输出after
        }, 2000);
    }]);
// 正确的写法示例
angular.module('myDemo', [])

    .controller('firstController', ['$scope', function ($scope) {

        setTimeout(function () {
            console.log('before');  // 正常输出before
            $scope.$apply(function () {
                $scope.name = "My name have been changed.";  // 正确显示
            });
            console.log('after');   // 正常输出after
        }, 2000);
    }]);

所以,在AngularJS中,最好不要用setTimeout或setInterval,而是用那两个AngularJS系统服务。

  • 区别二:取消的方式不大一样,比如timeout:
// setTimeout
var id = setTimeout(func, 2000); // 返回该timeout的id
clearTimeout(id);                // 使用clearTimeout
// $timeout服务
var promise = $timeout(f, 2000); // 返回一个promise对象
$timeout.cancel(promise);        // 还是要使用服务,它的cancel方法

2、用法:(上面有啦~)

五、$document


1、介绍、用法:

$document是对浏览器对象window.document的jqLite封装,主要操作DOM(虽然一般来说不建议在AngularJS中操作DOM)。其实,$document就等同于AngularJS中提供的另一种服务element,它也是用来把原生的DOM元素封装成jqLite对象,即有:

$document 等效于 angular.element(document),不过要注意两者的引用并不相等

并且,取0下标可以得到原生的document对象:

$document[0] === document,即引用相等,因为是对浏览器的document对象的封装

六、$log


$log服务很简单,就是更高级的console.log罢了,它提供5个方法:

  • log
  • warn
  • info
  • error
  • debug

是不是跟Android原生中的Log差不多呢^_^?
官方实例:
html:

<div ng-controller="LogController">
    <p>Reload this page with open console, enter text and hit the log button...</p>
    <label>Message:
        <input type="text" ng-model="message"/>
    </label>
    <button ng-click="$log.log(message)">log</button>
    <button ng-click="$log.warn(message)">warn</button>
    <button ng-click="$log.info(message)">info</button>
    <button ng-click="$log.error(message)">error</button>
    <button ng-click="$log.debug(message)">debug</button>
</div>

js:

angular.module('myDemo', [])
    .controller('LogController', function ($scope, $log) {
        $scope.$log = $log;
    });

效果(浏览器F12打开控制台):
这里写图片描述

七、$sce


1、介绍

“sce”指的是“Strict Contextual Escaping”,它是默认开启的,负责拒绝一些不安全的行为,比如加载不同源的资源等等。但是有时候,我们又需要加载一些特定的资源,我们就得使用$sce的一些方法,来为这些资源和AngularJS系统之间建立信任。

2、用法

$sce有以下常用方法:

  • $sce.trustAsHtml(…):将一段html文本视为安全
  • $sce.trustAsUrl(…)
  • $sce.trustAsResourceUrl(…)
  • $sce.trustAsJs(…)

举个例子,假如我要显示(可以理解成渲染,相当于Android SDK中的WebView)一段html文本表示的内容,我们需要遵循以下步骤:

  1. 在html模板中用“ng-bind-html”属性来绑定一个model(变量);
  2. 在js中注入$sce服务,并且使用方法$sce.trustAsHtml(…),把信任后的值赋给该model。

例子:
html:

<div ng-controller="LogController">

    <!--这里不能用ng-bind,因为是渲染一段html文本,而不是显示简单的数据-->
    <div ng-bind-html="results"></div>
</div>

controller.js:

angular.module('myDemo', [])
    .controller('LogController', function ($scope, $http, $sce) {

        // 随便定义一段html文本
        var txt = "<h1>Hello world!</h1>";

        // 这里不能直接$scope.results = txt,否则会报错显示“不安全”
        $scope.results = $sce.trustAsHtml(txt);
    });

效果:
sce效果图

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

.png与.jpg的图片格式的区别?以及它们分别应用场景?

一、.jpg/jpeg格式的图片(jpg全名:jpeg) JPG(或是JPEG): 优点:(1)占内存小,网页加载速度快; (2)主要用于摄影作品或者写实作品(或是其他细节、色彩丰富的图片)或大...

html 5新增结构标签

一、aside元素 aside元素被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。(特殊的section) 在article元素之外...

『AngularJS』$location 服务介绍(1)

简介 $location服务解析在浏览器地址栏中的URL(基于window.location)并且让URL在你的应用中可用。改变在地址栏中的URL会作用到$location服务,同样的,改变$l...

深究AngularJS——$sce的使用

为什么要要$sce?因为angularJS里好些地方,比如路径默认是个字符串,不会认为是路径,从而访问不到我们需要的东西,那么我们就可以通过$sce告诉angualrJS这个路径,这样是很安全滴。它有...

angular中的ng-bind-html指令和$sce服务

angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model。但在我们的项目当中会遇到这样的情况,后台返回的数据中带有...

AngularJS中的$http、$q服务和promise对象的联系

一、介绍:$http服务是AngularJS系统自带的,可以用来进行网络通信、获取远程服务器的数据。要记住的是,$http是对浏览器XMLHttpRequest的封装,也就是说,它其实是Ajax。首先...

AngularJs $http 请求服务

AngularJs $http 请求服务 $http $http是Angular的一个核心服务,它有利于浏览器通过XMLHttpRequest 对象或者 JSONP和远程HTTP服务器...
  • ganle
  • ganle
  • 2016年10月25日 18:01
  • 278

AngularJS中的 $http服务

$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。 它是一个特殊的内置服务,主要用于进行异步数据请求的功能实现; 使用格式: $http({ metho...

AngularJS下$http服务Post方法传递json参数

如何使用Angularjs $http服务以POST方法向服务器传递json对象数据。
  • Rotbing
  • Rotbing
  • 2017年03月06日 15:06
  • 1922

AngularJS内置服务$http的使用——用户权限管理实例

1.实现目标: 选择用户角色,自动勾选权限。 2. (1)MySQL数据库的建立 (2)ng-repeat指令显示用户权限 (3)ng-checked指令控制用户权限 3.实例 (1)MySQL数据...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJS常用服务($http、$location、$sce等)
举报原因:
原因补充:

(最多只允许输入30个字)