初始化角度应用程序后激活$ httpMock [英] Activate $httpMock after angular app has been initialized
问题描述
我希望能够在我的angularJS应用中打开和关闭$ httpBackend模拟.
I want to be able to turn on and off a $httpBackend mock in my angularJS app.
这意味着我想按需/懒惰地注入$ httpBackend. 能够再次打开和关闭它也很好.
That means I want to inject the $httpBackend lazily/on demand. It would also be nice to be able to turn it on and off again.
例如,为从CMS预览的AngularJS应用提供输入数据.
For example to provide input data for an AngularJS app that is being previewed from a CMS.
下面的代码仅在将ngMockE2E移至普通依赖项并以标准方式将$ httpBackend注入我的工厂时有效.
The below code does only work if I move the ngMockE2E to an ordinary dependency, and inject $httpBackend to my factory the standard way.
代码对配置文件中的所有调用设置upp $ httpBackend,然后对所有响应进行响应...
The code sets upp $httpBackend on all calls from a config file, and then responds to all of them...
const registerCalls = () => {
const injectormock = angular.injector(['ngMockE2E']); //lazy load not working as expected
const $httpBackend = injectormock.get('$httpBackend'); //lazy load not working as expected.
//Pass through for resources:
$httpBackend.whenGET(/.*.html/).passThrough();
$httpBackend.whenGET(/.*.json/).passThrough();
//API calls should be mocked:
const apiCalls = {};
for (var call in apiConfig) {
if ({}.hasOwnProperty.call(apiConfig, call)) {
const callConfig = apiConfig[call];
const url = angular.isDefined(callConfig.regex) ? callConfig.regex : callConfig.url();
if (callConfig.method === 'GET') {
apiCalls[call] = $httpBackend.whenGET(url);
} else if (callConfig.method === 'POST') {
apiCalls[call] = $httpBackend.whenPOST(url);
}
}
}
return apiCalls;
}
const success = function() {
const apiCalls = registerCalls();
for (var call in apiConfig) {
let response = {};
if (angular.isDefined(apiConfig[call].response)) {
response = apiConfig[call].response();
}
apiCalls[call].respond(200, response);
}
};
如何设置$ httpBackend,以便在AngularJS应用运行时可以激活/停用它?
How can I setup the $httpBackend so that it can be activated/deactivated while the AngularJS app is running?
推荐答案
Angular服务是在第一次注入时延迟实例化的单例.如果$httpBackend
的注入是在应用程序引导程序上执行的(通常是使用$http
的情况),则无法模拟服务.
Angular services are singletons that are lazily instantiated on first injection. If the injection of $httpBackend
is performed on application bootstrap (which is usually the case when $http
is used), it's not possible to mock a service.
通过angular.injector
获取E2E $httpBackend
版本是显而易见的,但是这样做的方法错误.这将导致拥有使用其自己的核心服务单例($browser
等)的新注射器实例.
Getting E2E $httpBackend
version through angular.injector
is obvious but wrong way to do this. This will result in having new injector instance that uses its own core service singletons ($browser
, etc).
干净的方法是通过angular.mock.e2e
全局,如此示例所示.它将在一次-mocks.js已加载.关键是装饰$httpBackend
(这是一个函数),以包装原始和E2E实现,并有条件地使用它们.
The clean way to do this is through angular.mock.e2e
global, as shown in this example. It will be available once angular-mocks.js is loaded. The point is to decorate $httpBackend
(which is a function) to wrap both original and E2E implementations and use them conditionally.
可以这样做:
angular.module('mockableHttp', [])
.decorator('$httpBackend', function ($injector, $delegate) {
var $httpBackendOriginal = $delegate;
var $httpBackendE2E = $injector.invoke(angular.mock.e2e.$httpBackendDecorator, null, {
$delegate: $delegate
});
function $httpBackend() {
var $httpBackendImplementation = $httpBackend.isMocking
? $httpBackendE2E
: $httpBackendOriginal;
return $httpBackendImplementation.apply(this, arguments);
}
return Object.assign($httpBackend, $httpBackendE2E, {
enableMocking: function() {
$httpBackend.isMocking = true;
},
disableMocking: function() {
$httpBackend.isMocking = false;
}
});
});
在应用模块中加载了mockableHttp
的位置(在生产环境中可以完全排除在外),并且使用$httpBackend.enableMocking()
激活了HTTP模拟.
Where mockableHttp
is loaded in app module (can be totally excluded in production) and HTTP mocks are activated with $httpBackend.enableMocking()
.
这篇关于初始化角度应用程序后激活$ httpMock的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!