CODEWITHSUNDEEP
javascriptangularjsfirebaseangularfire
Lane Sawyer
Lane Sawyer

Reputation: 369

$firebase undefined in AngularJS

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.

Upvotes: 1

Views: 1217

Answers (1)

sidhuko
sidhuko

Reputation: 3376

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

Upvotes: 6

Related Questions