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); } });
上一篇: 下一篇: