CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerresolve
lakhassane
lakhassane

Reputation: 141

Multiple views, multiple resolve but for one controller in AngularJS

I have 2 views that share the same controller. In each one of this view I used resolve to retrieve some date before displaying it. Then I inject it in my controller (so I inject two dependancy for each view).

But the problem is when I go from a view to another, the console display an error because it doesn't see the dependancy from the other view. This is my route configuration

 .state('ambassade', {
                url: '/mot_ambassadeur',
                views: {
                    "@": {
                        templateUrl: "pages/GestionAmbassade/mot_ambassadeur.html",
                        controller: "GestionAmbassadeController",
                        resolve: {
                            informationsAmbassade: function(GestionAmbassadeService) {
                                return GestionAmbassadeService.getMotAmbassadeurService();
                            }
                        }
                    }
                }
            })
            .state('personnel', {
                url: '/personnel',
                views: {
                    "@": {
                        templateUrl: "pages/GestionAmbassade/personnel.html",
                        controller: "GestionAmbassadeController",
                        resolve: {
                            personnelAmbassade: function(GestionAmbassadeService) {
                                return GestionAmbassadeService.getPersonnelService();
                            }
                        }
                    }
                }
            })

This is my controller, the 2 injections are informationsAmbassade and personnelAmbassade :

 .controller('GestionAmbassadeController', function ($rootScope, $scope, $injector, $sce,
                                                        informationsAmbassade,
                                                        personnelAmbassade) {

        $scope.getMotAmbassadeur = function () {
            if (localStorage.getItem("lang") == "fr") {
                $scope.motAmbassadeur = $sce.trustAsHtml(informationsAmbassade.contents[0].translation.fr_fr.contenu);
                $scope.load = true;
            }
            $scope.photoAmbassadeur = informationsAmbassade.contents[0].content.path;

        };

        $scope.getPersonnel = function () {
            $scope.Personnels = [];
            if (localStorage.getItem("lang") == "fr") {
                for (var i = 0; i < personnelAmbassade.contents.length; i++) {
                    //if ( angular.isDefined(res.contents[i].type) && res.contents[i].type.nom == 'personnel' )
                    $scope.Personnels.push({
                        nom: $sce.trustAsHtml(personnelAmbassade.contents[i].translation.fr_fr.contenu),
                        poste: $sce.trustAsHtml(personnelAmbassade.contents[i].translation.fr_fr.titre)
                    });
                }
                $scope.load = true;
            }
        };

So when I go to ambassade route it doesn't see the personnalAmbassade injection and vice-versa. I know I can use the two resolves for each state but this is what I'm avoiding for performance purpose. Can someone help me figure out this "issue".

Upvotes: 0

Views: 555

Answers (3)

lakhassane
lakhassane

Reputation: 141

Thank you guys. Both answers solved the problem (I tried them :D). But I think the first one is more suitable because in the second one when I have too many pages for the same controller it will be a little slower than the first answer.

But both still works. Thank you.

edit : when I said the first one I was talking about Bob Brinks answered. It moves down when he edited it.

Upvotes: 1

Bob Brinks
Bob Brinks

Reputation: 1392

You should see the inject in the controller as an Interface from more object orientated languages.

So name it something like entityService and make it so both services you are trying to inject have a method of the same name that you can call from the controller. (Or in your case 'contents' arrays)

.controller('GestionAmbassadeController', function ($rootScope, $scope, $injector, $sce,entityService) {

Then in the resolve put: 

entityService: return GestionAmbassadeService.getPersonnelService();

or

entityService:  return GestionAmbassadeService.getMotAmbassadeurService();

Depending on the controller instance.

Edit: It doesn't seem like a good idea to have the same controller for both states it this case. You will only be able to use one of the two defined scope functions anyway. So it would be beter to just have separate controllers.

Upvotes: 1

Ganbin
Ganbin

Reputation: 2064

You should create a top abstract state to resolve your datas, then you are sure to load the right dependencies (both of them) when you are in your controller.

.state('app', {
    abstract:true,
    template:'<div ui-view></div>',
    resolve:{
        informationsAmbassade: function(GestionAmbassadeService) {
            return GestionAmbassadeService.getMotAmbassadeurService();
        },
        personnelAmbassade: function(GestionAmbassadeService) {
            return GestionAmbassadeService.getPersonnelService();
        }
    }
}
.state('app.ambassade', {
    url: '/mot_ambassadeur',
    views: {
        "@": {
            templateUrl: "pages/GestionAmbassade/mot_ambassadeur.html",
            controller: "GestionAmbassadeController"
            }
        }
    }
})
.state('app.personnel', {
    url: '/personnel',
    views: {
        "@": {
            templateUrl: "pages/GestionAmbassade/personnel.html",
            controller: "GestionAmbassadeController"
        }
    }
})

Upvotes: 0

Related Questions