AngularJS DI之依赖注解(annotation)解析

起初发现这个问题是在写controller的部分,看别人的code的时候,发现第二个参数可以是一个array,前面先把所有的service排序好,最后再放一个构建函数上去,函数的参数也和前面的service保持一致的order.

再之后发现,这种用法普遍存在在angularjs的框架中。经过一段时间的学习,发现这是一个跟DI(依赖注入)普遍相关的一个问题。

DI贯穿于Angular整个框架之中,渗透到它的各个components或者block中。比如各种components(service,directive, filter)的定义都会使用DI,而controller同样也是。

在使用DI的时候,需要进行Dependency Annotation(依赖注解),而使用的最多的方法就是inline array annotation. 也就是我最开始发现的那种用法。

比如对一个controller进行依赖注入的最自然的方法是下面这样:

app.controller("MyCtrl", function($scope, $http, MyService) {});

但是按照annotation的方法来看,需要把它变成下面这个样子:

app.controller("MyCtrl", ["$scope", "$http", "MyService", function($scope, $http, MyService) {}]);

那么annotation存在的必要性是什么呢?

其实最关键的原因在于,“minification”会让DI失效而无法正常工作。要想正在明白这个问题,就需要理解minification到底是什么?

所谓minification就是对于正在需要上线工作的js code来说,为了减小源代码文件的大小,会对source code 进行简化,在保证功能的前提下,删除不必要的空格、换行之类的格式符号。

而一般来说这个过程是通过一些比较流行的JS minifier来做的,而有些minifier除了处理空格这种操作之外,还会采取更进一步的操作,会改变函数名的长度,变得短一些,达到minification的效果。

比如下面这个函数,

function add(firstNumber, secondNumber) {
    return firstNumber + secondNumber;
}

 

会被转换成:

function add(a, b) {return a+b};

对于angular来说,注入的service都是hardcode的,名字变了之后,估计就跪了。

而依赖注解就是通过array内部的match来手动解决这个问题。

custom directive的命名匹配规则解析

AngularJS支持在app中创建custom directive,这样能够对一些view上面的反复出现的功能进行封装和复用。

创建简单directive的方法也比较容易,通过app.directive的方法就行,这个方法接收两个参数,第一个是directive的名字,第二个是一个函数:用来定义directive的具体行为。

例如下面这个最简单的case

var app = angular.module('myapp', []);

app.directive('helloWorld', function() {
  return {
      restrict: 'AE',
      replace: 'true',
      template: '<h3>Hello World!!</h3>'
  };
});

创建了一个名为helloWorld的directive, 而在HTML中使用的方法是:

<div hello-world></div>

但是这里有一个问题,在HTML元素中使用的名字是hello-world,跟上面定义的名字并不完全一致。起初比较困惑,在网络上也找不到这里面的对应关系。稍早之前,在读一篇关于directive的文章的时候,发现了具体的说法,其实也就跟猜测的一样,就是一种匹配的规则。

Note:

While matching directives, Angular strips the prefix x- or data- from element/attribute names. Then it converts - or : delimited strings to camelCase and matches with the registered directives. That’s why we have used the helloWorld directive as hello-world in the HTML.

就是说,会把HTML tag里面的名字进行转换,把-或者:这样的分隔符去掉,然后把各个字符串按照camelCase的模式进行拼接,再跟directive方法定义的指令进行匹配。

 

利用AngularJS开发空气质量检测Web App

5月份的时候基本都在忙这个东西,之前曾用Python Flask框架作了一个简单版本的,这次换了方法,使用angularjs框架作了一个纯前端的web app,添加了更多的功能,比如一段时间内的空气质量指数趋势,这个部分的话,主要是数据展示了,调用了一个第三方的插件.另外整个前端的效果作了更多的设计,不同的panel之间实现了更多的动态设计.

之后会继续发一个贴,对其中的技术关键点做一些解析,先放一个动图上来,看看整体的效果.

aqi