Menu icon Foundation
Reading Data from Firebase and Angular

I'm working on a Foundation for Apps project. I've been able to incorporate an external API to it but can't get data from Firebase. I installed firebase and angularFire through the terminal by npm. Do i need to include 'firebase' in the application in app.js like:

angular.module('application', [
'ui.router',
'ngAnimate',
'firebase',

or anything in the $inject bellow?

Screenshot of JSON file: http://i.imgur.com/QQ5G5aF.png?1

app.js

  (function() {
   'use strict';

  angular.module('application', [
    'ui.router',
    'ngAnimate',
    'firebase',

    'foundation',
    'foundation.dynamicRouting',
    'foundation.dynamicRouting.animations'
  ])

  .controller("PostListCtrl", function($scope, $firebaseArray) {

  var ref = new Firebase("https://emailangular.firebaseio.com/posts");
  $scope.posts = $firebaseArray(ref);
  })

    .config(config)
    .run(run)
  ;

   config.$inject = ['$urlRouterProvider', '$locationProvider'];

   function config($urlProvider, $locationProvider) {
     $urlProvider.otherwise('/');

     $locationProvider.html5Mode({
       enabled:false,
       requireBase: false
     });

     $locationProvider.hashPrefix('!');
    }

   function run() {
     FastClick.attach(document.body);
    }

    })();
            

         

blog.html

---
name: blog
url: /blog
title: Blog
controller: PostListCtrl
---


<div class="post" ng-repeat="post in posts">

      <h3><a href="#">{{post.title}}</a></h3>
      <p>{{post.body}}</p>

</div>
            

         

firebaseFoundationangular

I'm working on a Foundation for Apps project. I've been able to incorporate an external API to it but can't get data from Firebase. I installed firebase and angularFire through the terminal by npm. Do i need to include 'firebase' in the application in app.js like:

angular.module('application', [
'ui.router',
'ngAnimate',
'firebase',

or anything in the $inject bellow?

Screenshot of JSON file: http://i.imgur.com/QQ5G5aF.png?1

app.js

  (function() {
   'use strict';

  angular.module('application', [
    'ui.router',
    'ngAnimate',
    'firebase',

    'foundation',
    'foundation.dynamicRouting',
    'foundation.dynamicRouting.animations'
  ])

  .controller("PostListCtrl", function($scope, $firebaseArray) {

  var ref = new Firebase("https://emailangular.firebaseio.com/posts");
  $scope.posts = $firebaseArray(ref);
  })

    .config(config)
    .run(run)
  ;

   config.$inject = ['$urlRouterProvider', '$locationProvider'];

   function config($urlProvider, $locationProvider) {
     $urlProvider.otherwise('/');

     $locationProvider.html5Mode({
       enabled:false,
       requireBase: false
     });

     $locationProvider.hashPrefix('!');
    }

   function run() {
     FastClick.attach(document.body);
    }

    })();
            

         

blog.html

---
name: blog
url: /blog
title: Blog
controller: PostListCtrl
---


<div class="post" ng-repeat="post in posts">

      <h3><a href="#">{{post.title}}</a></h3>
      <p>{{post.body}}</p>

</div>
            

         
Ken Mau about 4 years ago

Anyone has had this issue?

Rafi Benkual about 4 years ago
Ken Mau about 4 years ago

I took a look at that post and did some work arounds with it but still didn't pull up.
It doesn't tell me whether i should include it in in here:

angular.module('application', [
'ui.router',
'ngAnimate',
'firebase',

It says to add $stateProvided which I did

function config($urlProvider, $locationProvider, $stateProvider)

Also I made sure to include Firebase and AngularFire in my index file

<!-- Firebase -->
https://cdn.firebase.com/js/client/2.2.4/firebase.js

<!-- AngularFire -->
https://cdn.firebase.com/libs/angularfire/1.1.1/angularfire.min.js