angularfire $firebaseObject is not defined

Question

I'm trying to build a firebase+angularfire application, however i'm unable to use angularfire because of this error. I'm able to connect to firebase and load angular without using angularfire.

ReferenceError: $firebaseObject is not defined Stack trace: @http://localhost:5000/scripts/controllers.js:5:13 invoke@http://localhost:5000/components/angular/angular.js:5003:16 $controllerInit@http://localhost:5000/components/angular/angular.js:10866:24 nodeLinkFn@http://localhost:5000/components/angular/angular.js:9746:35 compositeLinkFn@http://localhost:5000/components/angular/angular.js:9055:13 compositeLinkFn@http://localhost:5000/components/angular/angular.js:9058:13 compositeLinkFn@http://localhost:5000/components/angular/angular.js:9058:13 publicLinkFn@http://localhost:5000/components/angular/angular.js:8920:30 bootstrapApply/<@http://localhost:5000/components/angular/angular.js:1919:11 $eval@http://localhost:5000/components/angular/angular.js:18161:16 $apply@http://localhost:5000/components/angular/angular.js:18261:20 bootstrapApply@http://localhost:5000/components/angular/angular.js:1917:9 invoke@http://localhost:5000/components/angular/angular.js:5003:16 doBootstrap@http://localhost:5000/components/angular/angular.js:1915:5 bootstrap@http://localhost:5000/components/angular/angular.js:1935:12 angularInit@http://localhost:5000/components/angular/angular.js:1820:5 @http://localhost:5000/components/angular/angular.js:33367:5 trigger@http://localhost:5000/components/angular/angular.js:3431:5

controllers.js

angular.module('ghfzero',['firebase'])

.controller('testController', ['$scope',function($scope) {
        var ref = firebase.database().ref();
        var obj = $firebaseObject(ref);

        ref.set({
          first:"hello",
          last:"world"
        });

}])

index.html

<!DOCTYPE html>
<html lang="en" ng-app="ghfzero">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to Firebase Hosting</title>
</head>

<body>

    <h1>firebase working ok with angular prelims</h1>
    <form ng-controller="testController">
        <input type="text" name="test" ng-model="angtest">
        <input type="submit" value="add test">
        <h2>{{angtest}}</h2>
        <button ng-click="addMessage()">test db</button>
    </form>

    <script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
    <script>
        // Initialize Firebase
        var config = ......
            .........
        firebase.initializeApp(config);
    </script>
    <!--Firebase 3.0.0 and above require angularfire ver ^2.3.0!-->
    <!--Initializing Angular, Angular Ui Router, Angular Fire, jQuery!-->
    <script src="components/angular/angular.js"></script>
    <script src="components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="components/angularfire/dist/angularfire.js"></script>
    <script src="components/jquery/dist/jquery.js"></script>
    <script src="scripts/controllers.js"></script>

</body>

</html>

You have to inject $firebaseObject in your controller like .controller('testController', ['$scope','$firebaseObject'function($scope,$firebaseObject) — Vivz

user3201958 user3201958 · Accepted Answer · 2017-07-18T23:59:14

inject de $firebaseObject in controller like this:

... .controller('testController', function($scope, $firebaseObject) { ...

angularfire $firebaseObject is not defined

1 Answers