14 内置服务1

绝地灬酷狼 2022-05-26 00:59 212阅读 0赞

# 内置服务1 #

在Angular里面，services作为单例对象在需要到的时候被创建，只有在应用生命周期结束的时候（关闭浏览器）才会被清除。而controllers在不需要的时候就会被销毁了。

## Angular部分内置服务概览 ##

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>$window</code></td> 
   <td>封装window对象。</td> 
  </tr> 
  <tr> 
   <td><code>$document</code></td> 
   <td>对浏览器对象<code>window.document</code>的jqLite封装，主要操作DOM.<code>$document</code> 等效于 <code>angular.element(document)</code>，不过要注意两者的引用并不相等，并且，取0下标可以得到原生的document对象：<code>$document[0] === document</code>，即引用相等，因为是对浏览器的document对象的封装</td> 
  </tr> 
  <tr> 
   <td><code>$log</code></td> 
   <td>简单的打印日志的服务。默认实现安全的写入信息到浏览器的控制台（如果存在的话）。</td> 
  </tr> 
  <tr> 
   <td><code>$interval</code></td> 
   <td><code>window.setInterval</code>的Angular包装形式。</td> 
  </tr> 
  <tr> 
   <td><code>$timeout</code></td> 
   <td><code>window.setTimeout</code>的Angular包装形式</td> 
  </tr> 
  <tr> 
   <td><code>$rootScope</code></td> 
   <td>应用的根作用域</td> 
  </tr> 
  <tr> 
   <td><code>$http</code></td> 
   <td><code>$http</code>是Angular的一个核心服务，它有利于浏览器通过XMLHttpRequest 对象或者 JSONP和远程HTTP服务器交互。</td> 
  </tr> 
  <tr> 
   <td><code>$location</code></td> 
   <td><code>$location</code>服务解析浏览器地址中的url（基于<code>window.location</code>）并且使url在应用程序中可用。将地址栏中的网址的变化反映到<code>$location</code>服务和<code>$location</code>的变化反映到浏览器地址栏。</td> 
  </tr> 
  <tr> 
   <td><code>$anchorScroll</code></td> 
   <td>根据HTML5的规则，当调用这个函数时，它检查当前的url的hash值并且滚动到相应的元素。</td> 
  </tr> 
  <tr> 
   <td><code>$q</code></td> 
   <td>一个帮助处理异步执行函数的服务。当他们做完处理时，使用它们的返回值（或异常）。</td> 
  </tr> 
  <tr> 
   <td><code>$compile</code></td> 
   <td>编译一段HTML字符串或者DOM的模板， 产生一个将scope和模板连接到一起的函数。</td> 
  </tr> 
  <tr> 
   <td><code>$interpolate</code></td> 
   <td>将一个字符串编译成一个插值函数。HTML编译服务使用这个服务完成数据绑定。</td> 
  </tr> 
  <tr> 
   <td><code>$parse</code></td> 
   <td>将Angular表达式转换为函数。</td> 
  </tr> 
  <tr> 
   <td><code>$templateRequest</code></td> 
   <td><code>$templateRequest</code>服务运行进行安全检测，然后使用<code>$http</code>下载被提供的模板，成功后，将内容存储在<code>$templateCache</code>里。如果HTTP请求失败或HTTP请求的响应数据是空的，将抛出个<code>$compile</code>错误（通过设置该函数的第二个参数为true）。该注意的是，<code>$templateCache</code>的内容是可信的，所以调用<code>$sce.getTrustedUrl(tpl)</code>是省略的，当tpl的类型是字符串并且<code>$templateCache</code>具有匹配的项。</td> 
  </tr> 
  <tr> 
   <td><code>$templateCache</code></td> 
   <td>第一次使用模板，它被加载到模板缓存中，以便快速检索。你可以直接将模板标签加载到缓存中，或者通过<code>$templateCache</code>服务。</td> 
  </tr> 
  <tr> 
   <td><code>$sce</code></td> 
   <td><code>$sce</code> 服务是AngularJs提供的一种严格上下文转义服务。</td> 
  </tr> 
  <tr> 
   <td><code>$sceDelegate</code></td> 
   <td><code>$sceDelegate</code>是一个AngularJs为$sce服务提供严格的上下文转义服务的服务。</td> 
  </tr> 
  <tr> 
   <td><code>$animate</code></td> 
   <td><code>$animate</code>服务提供了基本的DOM操作功能如在DOM里插入、移除和移动元素，以及添加和删除类。这个服务是ngAnimate的核心服务，为CSS和Javascript提供了高档次的动画。</td> 
  </tr> 
 </tbody> 
</table>

## $log ##

`$log`服务很简单，就是更高级的`console.log`罢了，它提供5个方法：`log、warn、info、error、debug`

<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>

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

效果（浏览器F12打开控制台）：

![这里写图片描述][70]

## $timeout和$interval ##

`$timeout(fn, [delay], [invokeApply],[Pass]);`

`$interval(fn, delay, [count], [invokeApply], [Pass]);`

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>fn</td> 
   <td><code>function()=</code></td> 
   <td>一个将被延迟执行的函数。</td> 
  </tr> 
  <tr> 
   <td>delay</td> 
   <td><code>num</code></td> 
   <td>延迟的时间（毫秒）。</td> 
  </tr> 
  <tr> 
   <td>count</td> 
   <td><code>num</code></td> 
   <td>重复次数</td> 
  </tr> 
  <tr> 
   <td>invokeApply(可选)</td> 
   <td><code>boolean</code></td> 
   <td>如果设置为false，则跳过脏值检测，否则将调用$apply。</td> 
  </tr> 
  <tr> 
   <td>Pass(可选)</td> 
   <td><code>*</code></td> 
   <td>执行的函数的附加参数。</td> 
  </tr> 
 </tbody> 
</table>

$timeout(function() { 
    $scope.myHeader = "How are you today?";
    }, 2000);
    $interval(function() { 
    $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);

`$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);
    }]);
    // 正确的写法示例
    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方法，返回boolean

## $cacheFactory和$cacheFactory.Cache ##

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

`$cacheFactory.Cache`：一个用于存储和检索数据的缓存对象。主要使用`$http`和脚本指令来缓存模板和其他数据。

要得到一个缓存实例，用id来区分，比如我想取id为’firstCache’的缓存：

`var cache = $cacheFactory('firstCache');`

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>put(key,value);</td> 
   <td>在缓存对象中插入一个键值对(key,value)。<br> key：string类型，缓存对象中的值名称。<br>value：所有类型，缓存对象中的值。</td> 
  </tr> 
  <tr> 
   <td>get(key);</td> 
   <td>在缓存对象中通过指定key获取对应的值。如果不存在这个key的话，会返回undefined</td> 
  </tr> 
  <tr> 
   <td>remove(key);</td> 
   <td>在缓存对象中通过指定key删除对应的值。</td> 
  </tr> 
  <tr> 
   <td>removeAll();</td> 
   <td>删除缓存对象中所有的键值对。</td> 
  </tr> 
  <tr> 
   <td>destroy();</td> 
   <td>销毁这个缓存对象。</td> 
  </tr> 
  <tr> 
   <td>info();</td> 
   <td>获取缓存对象信息（id，size）。</td> 
  </tr> 
 </tbody> 
</table>

[70]: /images/20220526/de4fd3a523324f3896f7975350dd812a.png