最近我使用AngularJS和ES6创建了一个新项目。这是我第一个ES6项目,我很满意它的导入语句。以前我必须使用AngularJS依赖注入来在我的应用程序逻辑中使用不同的服务。现在我可以使用ES6 import
轻松导入不同的服务。问题在于,我是否允许编写非Angular服务并使用import
导入,还是必须按照Angular服务(或工厂)格式编写它们,并使用依赖注入进行导入?
最近我使用AngularJS和ES6创建了一个新项目。这是我第一个ES6项目,我很满意它的导入语句。以前我必须使用AngularJS依赖注入来在我的应用程序逻辑中使用不同的服务。现在我可以使用ES6 import
轻松导入不同的服务。问题在于,我是否允许编写非Angular服务并使用import
导入,还是必须按照Angular服务(或工厂)格式编写它们,并使用依赖注入进行导入?
my-service.service.js
export default class MyService {
constructor() {
this.items = [''];
}
getItem() {
return this.items;
}
}
MyService.$inject = ['SomeOtherService'];
index.js
中。import angular from 'angular';
import MyService from './my-service.service';
angular.module('myApp')
.service('MyService', MyService);
$http = injector('$http')
// injector.js
let cache = {}
/**
* Use example:
* import injector from 'injector.js'
* $http = injector('$http')
*
* @param dependency {string}
*/
export function injector (dependency) {
return cache.hasOwnProperty(dependency)
? cache[dependency]
: cache[dependency] = angular.element(document).injector().get(dependency)
}
重要提示!injector()函数必须在文档准备好之后才能运行。通常情况下是这样的,但如果不是这样,将会在injector(injector.js)中出现错误“无法读取未定义的'get'属性”。解决方案是在文档准备好之后简单地进行注入:
import { injector } from '../injector.js'
let $http;
angular.element(document).ready(() => {
$http = injector('$http')
})