目录
AngularJS学习笔记
其它服务
日志
ng 提供 $log 这个服务用于向终端输出相关信息:
- error()
- info()
- log()
- warn()
angular.module('app', [], angular.noop) .controller('TestCtrl', function($scope){ $log.error('error'); $log.info('info'); $log.log('log'); $log.warn('warn'); });
缓存
ng 提供了一个简单封装了缓存机制 $cacheFactory ,可以用来作为数据容器:
var TestCtrl = function($scope, $cacheFactory){ $scope.cache = $cacheFactory('s_' + $scope.$id, {capacity: 3}); $scope.show = function(){ console.log($scope.cache.get('a')); console.log($scope.cache.info()); } $scope.set = function(){ $scope.cache.put((new Date()).valueOf(), 'ok'); } }
调用时,第一个参数是 id ,第二个参数是配置项,目前支持 capacity 参数,用以设置缓存能容留的最大条目数。超过这个个数,则自动清除较旧的条目。
缓存实例的方法:
- info() 获取 id , size 信息
- put(k, v) 设置新条目
- get(k) 获取条目
- remove(k) 删除条目
- removeAll() 删除所有条目
- destroy() 删除对本实例的引用
$http 的调用当中,有一个 cache 参数,值为 true 时为自动维护的缓存。值也可以设置为一个 cache 实例。
计时器
$timeout 服务是 ng 对 window.setTimeout() 的封装,它使用 promise 统一了计时器的回调行为:
angular.module('app', [], angular.noop) .controller('TestCtrl', function($scope){ var p = $timeout(function(){console.log('haha')}, 5000); p.then(function(){console.log('x')}); //$timeout.cancel(p); });
使用 $timeout.cancel() 可以取消计时器。
表达式函数化
$parse 这个服务,为 js 提供了类似于 Python 中 @property 的能力:
angular.module('app', [], angular.noop) .controller('TestCtrl', function($scope){ $scope.get_name = $parse('name'); $scope.show = function(){console.log($scope.get_name($scope))} $scope.set = function(){$scope.name = '123'} });
$parse 返回一个函数,调用这个函数时,可以传两个参数,第一个作用域,第二个是变量集,后者常用于覆盖前者的变量:
var get_name = $parse('name'); var r = get_name({name: 'xx'}, {name: 'abc'}); console.log(r);
$parse 返回的函数,也提供了相应的 assign 功能,可以为表达式赋值(如果可以的话):
var get_name = $parse('name'); var set_name = get_name.assign; var r = get_name({name: 'xx'}, {name: 'abc'}); console.log(r); var s = {} set_name(s, '123'); var r = get_name(s); console.log(r);
模板单独使用
ng 中的模板是很重要,也很强大的一个机制,自然少不了单独运用它的方法。不过,即使是单独使用,也是和 DOM 紧密相关的程度:
- 定义时必须是有 HTML 标签包裹的,这样才能创建 DOM 节点
- 渲染时必须传入 $scope
之后使用 $compile 就可以得到一个渲染好的节点对象了。当然, $compile 还要做其它一些工作,指令处理什么的。
angular.module('app', [], angular.noop) .controller('TestCtrl', function($scope){ $scope.a = '123'; $scope.set = function(){ var tpl = $compile('上一篇: 工具函数 下一篇: 自定义模块和服务hello {{ a }}
'); var e = tpl($scope); $element.append(e); } });