$firebase undefined in AngularJS

Question

For some reason, $firebase is undefined when I try to use it. I'm pretty new to Angular, so I'm guessing there is just some disconnect in the way I split up my files. I can get all of the code to work properly if it's in just one HTML page, but I want to split it all up, as my app will have different pages.

controllers.js

angular.module('myApp.controllers', ['firebase']).
  controller('StoryController', [function($scope, $firebase) {
    var storiesRef = new Firebase(FIREBASE_URL);
    $scope.stories = $firebase(storiesRef);
    $scope.addStory = function(e) {
      if (e.keyCode != 13) return;
      $scope.stories.$add({title: $scope.title, text: $scope.text});
      $scope.text = "";
    }
  }]);

app.js

angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/stories', {templateUrl: 'partials/stories.html'});
  $routeProvider.when('/addStory', {templateUrl: 'partials/addStory.html', controller: 'StoryController'});
  $routeProvider.otherwise({redirectTo: '/'});
}]);

EDIT: Forgot to include the error.

TypeError: undefined is not a function
    at new <anonymous> (http://localhost:8000/app/js/controllers.js:8:22)
    at d (http://localhost:8000/app/lib/angular/angular.min.js:30:452)
    at Object.instantiate (http://localhost:8000/app/lib/angular/angular.min.js:31:80)
    at http://localhost:8000/app/lib/angular/angular.min.js:62:23
    at link (http://localhost:8000/app/lib/angular-route/angular-route.min.js:7:208)
    at F (http://localhost:8000/app/lib/angular/angular.min.js:49:345)
    at f (http://localhost:8000/app/lib/angular/angular.min.js:42:399)
    at http://localhost:8000/app/lib/angular/angular.min.js:42:67
    at http://localhost:8000/app/lib/angular/angular.min.js:43:299
    at z (http://localhost:8000/app/lib/angular/angular.min.js:47:23) <div ng-view="" class="ng-scope">

And I have included all the scripts I have at the end of my main template.

Is there any error output? Do you have included the necessary scripts? — Wottensprels
– Wottensprels, Commented Feb 2, 2014 at 10:50
Just added the error output, and yes, all the required scripts are included. Everything works just fine when it's all in one giant file. I'm just having trouble splitting it all up to make it manageable. — Lane Sawyer
– Lane Sawyer, Commented Feb 2, 2014 at 10:59

sidhuko · Accepted Answer · 2014-02-02 11:02:51Z

6

You're using inline dependencies but not defining them correctly;

controller('StoryController', ['$scope', '$firebase', function($scope, $firebase) {

Read more about dependency injection here; http://docs.angularjs.org/guide/di

answered Feb 2, 2014 at 11:02

sidhuko

3,3761 gold badge19 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lane Sawyer Over a year ago

I knew it was something simple! Thank you!

Collectives™ on Stack Overflow

$firebase undefined in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related