Question

我一直试图将一个简单的后端连接到我的Angular应用程序，并决定使用Firebase，在过去的应用程序中使用过它们。

当我在浏览器中加载Firebase时，应用程序会正确加载Firebase，但是我遇到了通过业力进行单元测试失败的墙。

我已为“设置”屏幕初始化了指令和控制器，允许您为应用设置自定义域名。

以最简单的形式，它看起来像这样（see full source）：

settingsController = function($scope, $element, $log, angularFire) {
    var domain = $scope.domain = "";
    var placeholder = $scope.placeholder = "e.g. www.strummer.io";
    console.log(angularFire);
    $scope.log = $log;
};

nav.directive('settings', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: { domain: '@' },
        controller: settingsController,
        templateUrl: 'static/nav/settings.html',
        replace: true
    };
});

在浏览器中加载时，我看到angularFire对象通过console.log命令显示。

然而，当我运行我的测试（通过karma / jasmine）时，我收到错误：

Error: Unknown provider: angularFireProvider <- angularFire
        at Error (<anonymous>)
        at /Users/dickason/code/strummer/builder/static/lib/angular.js:2696:15
        at Object.getService [as get] (/Users/dickason/code/strummer/builder/static/lib/angular.js:2824:39)
        at /Users/dickason/code/strummer/builder/static/lib/angular.js:2701:45
        at getService (/Users/dickason/code/strummer/builder/static/lib/angular.js:2824:39)
        at invoke (/Users/dickason/code/strummer/builder/static/lib/angular.js:2842:13)
        at Object.instantiate (/Users/dickason/code/strummer/builder/static/lib/angular.js:2874:23)
        at /Users/dickason/code/strummer/builder/static/lib/angular.js:4759:24
        at /Users/dickason/code/strummer/builder/static/lib/angular.js:4338:17
        at forEach (/Users/dickason/code/strummer/builder/static/lib/angular.js:138:20)
    Error: Declaration Location
        at window.jasmine.window.inject.angular.mock.inject (/Users/dickason/code/strummer/builder/static/lib/angular-mocks.js:1744:25)
    at null.<anonymous> (/Users/dickason/code/strummer/builder/static/nav/nav.spec.js:158:13)
    Error: Circular dependency:
        at Error (<anonymous>)
        at getService (/Users/dickason/code/strummer/builder/static/lib/angular.js:2817:17)
        at invoke (/Users/dickason/code/strummer/builder/static/lib/angular.js:2842:13)
        at Object.instantiate (/Users/dickason/code/strummer/builder/static/lib/angular.js:2874:23)
        at /Users/dickason/code/strummer/builder/static/lib/angular.js:4759:24
        at null.<anonymous> (/Users/dickason/code/strummer/builder/static/nav/nav.spec.js:170:20)
        at Object.invoke     (/Users/dickason/code/strummer/builder/static/lib/angular.js:2864:28)
        at workFn (/Users/dickason/code/strummer/builder/static/lib/angular-    mocks.js:1758:20)

以下是有问题的测试设置（see full source）：

describe("directive: settings", function() {
        var scope;

        // Setup DOM
        var html, element, compiled;
        beforeEach(function() {
            html = '' +
            '<settings></settings>' +

            inject(function($compile, $rootScope) {
                scope = $rootScope;
                element = angular.element(html);
                compiled = $compile(element)(scope);
                scope.$digest();
            });
        });


        // Setup Controller
        var ctrl;
        beforeEach(inject(function($controller) {
            ctrl = $controller('settingsController', {$scope: scope, $element: null});
        }));

        it("Should retrieve the domain from the datastore", inject(function($controller, $rootScope) {
            // Test Controller

        }));

经过一些谷歌搜索后，我怀疑这与angularFire注入控制器的方式有关。

我尝试过以下解决方案：

settingsController.$inject = ['$scope', '$element', '$log', 'angularFire'];

和

settingsController = ['$scope', '$element', '$log', 'angularFire', function($scope, $element, $log, angularFire) { ... }];

这两个都给我留下了同样的错误。

任何建议都将不胜感激。

Answer 1

通过一些试验和错误计算出来。

当应用程序初始化时，firebase将与我的主模块（'nav'）一起注入。

然而，当初始化测试时，firebase由于某种原因不会被注入。通过在每次测试之前手动将其作为模块注入，可以避免“unknownProvider”错误。

而不是：

beforeEach(module('nav'));

使用：

beforeEach(module('nav', 'firebase'));

采用这种方法可以在每个it('...')子句中在控制器中注入'angularFire'：

it("Should retrieve the domain from the datastore", inject(function($controller, $rootScope, angularFire) {

Answer 2

通常你会让angularFire在nav.js中注入app / module，如下所示：

var nav = angular.module('nav', ['angularFire']);

和您的settingsController

settingsController = function($scope, $element, $log, angularFire) { }

将使用angularFire注入

将

注册到导航模块

nav.controller('settingsController', ['$scope', '$element', '$log', 'angularFire',
    function settingsController($scope, $element, $log, angularFire) {
        // Your code goes here
    }
]);

如果您使用'nav'应用程序注册settingsController而不是将其设置为全局，并将angularFire注入'nav'应用程序，该怎么办？

AngularJS错误：未知提供者：angularFireProvider＆lt; - angularFire

2 个答案: