使用angularjs1.x构建前台开发框架（六）——service的引用

在基于angularjs的项目中，不同路由使用的相同函数（或变量）通常都会被定义成服务。而在angularjs1.x版本中，常用的服务包括service、factory和provider，三者的功能大致相同（service和factory完全相同，provider与其他两者稍有不同，服务之间的差异以及如何构造一个服务会在后面的章节说明），下面就以service为例来说明一下在开发过程中如何引用服务。

在此之前，我们先来回忆一下在上一章中的掩膜服务：

1.构造掩膜服务：

/**
* Created by 李庆 on 2016/11/5.
*/
define(["jquery"],function($){
var service = function(){
//代码省略
};
return new service;
});

2.引用和使用掩膜服务：
/**
* Created by 李庆 on 2016/10/6.
*/
define([,"../../../framework/service/maskService"],function(maskService){
var c2Controller = function($scope){
//代码省略

$scope.getData = function(){
maskService.show("get data");
//代码省略
}
};
return c2Controller;
});

为什么这里要特别说明一下掩膜服务呢？因为掩膜服务实际上和angularjs的服务完全不同，掩膜服务实质上就是符合AMD规范的javascript代码的引用（不用angularjs的项目在代码里也可以这么玩）。

接下来介绍如何使用angularjs的service来实现掩膜服务（重构之前的掩膜服务）：

首先，掩膜服务（msaskService.js）不再返回一个对象，而是直接返回函数：

/**
* Created by 李庆 on 2016/11/5.
*/
define(["jquery"],function($){
var service = function(){
//代码省略
};
return service;
});

最后是return service，而不是之前的return new service。

然后在框架module（framework.js）中引用和注册掩膜服务：

/**
* Created by 李庆 on 2016/10/6.
*/
define(["angular","angular-ui-router","../framework/config/frameworkConfig",
"../framework/controller/frameworkCtrl","../framework/service/maskService"],
function(angular,router,frameworkConfig,frameworkCtrl,maskService){
var dependency = [
"ng",
"ui.router",
frameworkConfig.name
];
var framework = angular.module("framework",dependency);
framework.controller("frameworkCtrl",frameworkCtrl);
framework.service("maskService",maskService);
return framework;
}
)

差异如下图：



接下来是掩膜服务的引用和使用：

/**
* Created by 李庆 on 2016/10/6.
*/
define(["jquery","../../../framework/service/httpService"],function($,httpService){
var c2Controller = ["$scope","maskService",function($scope,maskService){
$scope.test = function(){
console.log("enter controller");
};

$scope.getData = function(){
maskService.show("get data");
$.ajax({
"type":"GET",
"contentType":"application/json;charset=UTF-8",
//修改前为"url":"mock/test.json",
"url":httpService.getUrl("GET","/nova/test.json"),
"success":function(data){
console.log(JSON.stringify(data));
setTimeout(function(){
maskService.hide();
},6000);
},
"error":function(data){
console.log("error");
}
});
}
}];
return c2Controller;
});

差异如下图：



最后访问index.html，选择c2路由，点击request按钮触发掩膜，可以看到掩膜的显示和前一章相同，说明掩膜服务注册为service使用功能仍然正常。那么问题来了，既然功能完全相同，注册为框架service引用相比javascript代码的引用有什么优势呢？

1.当javascript代码文件路径发生变化时不用在所有引用服务的地方调整依赖路径（仅需在框架内调整）；

2.引用服务时无需声明冗长的完整依赖路径（代码简洁）。

另外，细心的同学一定发现了当服务作为javascript代码引用时返回的是一个new出来的对象，而注册到框架中时返回的则是一个函数（即不能new，直接返回），如果注册到框架中时返回的也是一个new出来的对象就会抛出如下异常——会提示注册的不是一个函数：



这表示注册的service在使用时已经在module内部被实例化了，这样就无需我们自己再实例化了。

以上就是一个简单的angularjs的service的引用例子，所有的service都可以按这个方式来引用。