2013-09-11 3 views
1

나는 단순한 백엔드를 Angular app에 연결하고 Firebase를 사용하기로 결정했습니다.AngularJS Error : 알 수없는 제공 업체 : angularFireProvider <- angularFire

브라우저에로드 할 때 앱이 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 명령을 통해 표시를 참조하십시오.

그러나, 나는 (업/자스민 통해) 내 테스트를 실행할 때, 나는 오류가 점점 오전 :

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 

     })); 

후 : 여기

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)입니다 일부 인터넷 검색, 이것이 angularFire가 컨트롤러에 주입되는 방식과 관련이 있다고 생각합니다.

나는 다음과 같은 솔루션을 시도했다 :

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

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

둘 다 같은 오류가 날 떠났다.

의견을 보내 주시면 감사하겠습니다.

답변

3

시행 착오를 통해 파악했습니다.

앱이 초기화되면 firebase가 내 메인 모듈 ('nav')과 함께 주입됩니다.

그러나 테스트가 초기화되면 어떤 이유로 화재 진압이 시작되지 않습니다. 각 테스트 전에 수동으로 모듈로 주입하면 'unknownProvider'오류를 피할 수 있습니다.

대신 :

beforeEach(module('nav')); 

사용 :

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

it('...') 절을 진행하는 동안 컨트롤러 'angularFire'을 주입 할 수 있습니다이 방법을 촬영 : 나는했습니다

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

는 일반적으로 당신은 angularFire은과 같이 응용 프로그램/모듈에 nav.js에 주입하자 것이다 :

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

지금과 같은 탐색 모듈에 등록 할 것

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

하고 settingsController angularFire가 주입 됨

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

설정 등록기 'nav'앱을 사용하여 global이 아닌 'nav'앱에 angularFire를 삽입하십시오.

+1

이 접근법을 이전에 시도해 보았고 'nav : mo'에 주입 할 때 'Error : No module : angularFire' 오류를 확인했습니다. 노새. 그게 첫 번째 문제인 것 같습니다. 컨트롤러를 'nav'앱 (사용자가 가지고있는 것을 복사/붙여 넣기)에 등록되도록 변경할 수 있으며 여전히 동일한 오류가 발생합니다. '오류 : 알 수없는 공급자 : angularFireProvider <- angularFire' –

관련 문제