current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I've been experimenting a little with Angular.js lately. As part of this I created a very simple set of controllers with an ng-view and templates to trigger depending on the route requested. I'm using angularFireCollection just to grab an array from Firebase. This works fine in the thumbnailController which does not form part of the ng-view.

My problem is that in addition to the data flowing into the thumbnailController, I also need the two other controllers to be able to access the data. I initially simply set the data to either be part of $rootScope or to have the ng-view as a child of the div in which the thumbnailController is set.

However, the issue from that perspective is that each sub-controller presumably attempts to set the data in the template before it is actually available from Firebase.

The solution appears to be using resolve as per the answer to this question angularFire route resolution. However, using the below code (and also referencing angularFireCollection) I get an error message of angularFire being an unknown provider. My understanding is the code below should be sufficient, and I would also add that the usage of angularFireCollection in thumbnailController works fine as I say.

I also experimented with injecting angularFire/aFCollection directly into the controllers using .$inject however a similar issue arose in terms of it being considered an unknown provider.

If possible could someone advise on what the issue may be here?

var galleryModule = angular.module('galleryModule', ['firebase']);

galleryModule.config(['$routeProvider', 'angularFire', function($routeProvider,  angularFire){
$routeProvider.
    when('/', {
        controller: initialController,
        templateUrl: 'largeimagetemplate.html',
        resolve: {images: angularFire('https://mbg.firebaseio.com/images')}
    }).
    when('/view/:id', {
        controller: mainimageController,
        templateUrl: 'largeimagetemplate.html',
        resolve: {images: angularFire('https://mbg.firebaseio.com/images')}
    }).
    otherwise({
        redirectTo: '/'
});
}]);

galleryModule.controller('thumbnailController', ['$scope', 'angularFireCollection',       function($scope, angularFireCollection){
    var url = 'https://mbg.firebaseio.com/images';
    $scope.images = angularFireCollection(url);
}]);

function initialController($scope,images){
    $scope.largeurl = images[0].largeurl;
}


function mainimageController($scope, images, $routeParams){
  $scope.largeurl = images[$routeParams.id].largeurl;
}
share|improve this question

1 Answer 1

up vote 1 down vote accepted

I got the chance to dig into this a little bit - it seems like regular services cannot be used in .config sections. I'd instantiate angularFire in the controller instead of using resolve, for example:

galleryModule
.value("url", "https://mbg.firebaseio.com/images")
.controller('thumbnailController', ['$scope', 'angularFireCollection', 'url',
    function($scope, angularFireCollection, url) {
        $scope.images = angularFireCollection(url);
    }])
.controller('initialController', ['$scope', 'angularFire', 'url',
    function($scope, angularFire, url) {
        angularFire(url, $scope, 'images').then(function() {
            $scope.largeurl = $scope.images[0].largeurl;
        });
    }])
.controller('mainimageController', ['$scope', 'angularFire', '$routeParams', 'url',
    function($scope, angularFire, $routeParams, url){
        angularFire(url, $scope, 'images').then(function() {
            $scope.largeurl = $scope.images[$routeParams.id].largeurl;
        });
    }]);

This is not ineffecient, since the data is only loaded once from the URL by Firebase, and all subsequent promises will be resolved almost immediately with data already at hand.

I would like to see angularFire work with resolve in the $routeProvider, however. You can use this method as a workaround until we figure out a more elegant solution.

share|improve this answer
    
I think this should be a workaround, however, my understanding (which is likely to be wrong) is that controllers can only be recognised in the routeProvider mechanism if they are defined as separate functions. Using the above method results in an error message for me (but this is likely to be due to my rank amateurishness so I've accepted your answer and much obliged for looking at this). Will be following AF's progress & thanks for a great product. –  Michael Jul 11 '13 at 22:06
    
What error do you get? The code above should generally work (if not exactly, I didn't actually run it). Be sure to post back if you aren't able to find the cause! –  Anant Jul 11 '13 at 22:26
    
Hey, thanks for the reply. I get 'initialController is not defined from galleryModule'. Perhaps the router goes to use the initialController before the controller module has instantiated the controller in question? Apologies if the terminology is incorrect. –  Michael Jul 11 '13 at 22:39
    
Ah, when controllers are defined using the .controller form, you have to identify them as a string in the router as per the answer at stackoverflow.com/questions/11211999/… - all working now! Thanks again. –  Michael Jul 12 '13 at 6:25
    
Glad it's working now! –  Anant Jul 12 '13 at 18:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.