Using resolve in meanjs

Question

I have seen various examples of how to use "resolve" to load data before activating a controller (e.g. https://github.com/angular-ui/ui-router/wiki), but I cannot understand how to incorporate this into the MeanJS architecture.

Here is a popular question/answer: Delaying AngularJS route change until model loaded to prevent flicker

I am unsure if the "resolve" option should be added in mymodule.client.routes.js and/or how to structure/inject the pre-loaded service into the controller arguments.

Any advice on how to transform the example to fit with MeanJS?

Using angular version 1.2.26

-- Update --

I tried removing data-ng-controller="MyController" from the view and instead setting the controller directly in the mymodule.client.routes.js alongside the "resolve" option. That seems to fix injecting the resolved object into the controller, but changes the MeanJS architecture. Is this the right/only approach?

Answer 1

What i have figured out (based on another stackoverflow answer) is to have things set up like this:

View:

<section data-ng-controller="ArticlesController">
  <!-- accessing article variable resolved in routes stateProvider -->
</section>

Controller:

'use strict';

angular.module('articles').controller('ArticlesController', ['$scope',
    function($scope) {
        /*
         * Whatever methods/variables/binds etc. you need.
         * Also you can access $scope.article because it is already resolved 
         */
    }
]);

Routes (that's the point):

$stateProvider.
    state('article', {
        url: '/v/:path',
        templateUrl: 'modules/articles/views/article.client.view.html',
        resolve: {
            article: function($stateParams, Articles) {
                return Article.get({
                    path: $stateParams.path
                }).$promise;
            }
        },
        controller: function($scope, article) {
            $scope.article = article;
        }
    }).

So you resolve article object, save it in $scope through stateProvider controller and then you can use it both in your view and ArticlesController because they share the same scope.

Hope it will help. (also I hope this is not far away from the best possible solution in current MEANjs state of evolution)

Answer 2

Do not specify controllers inside the view. Instead, assign controllers when defining routes as per https://github.com/angular-ui/ui-router/wiki

e.g. /public/modules/articles/config/articles.client.routes.js:

angular.module('articles').config(['$stateProvider',
    function($stateProvider) {
        // Articles state routing
        $stateProvider.
        state('listArticles', {
            url: '/articles',
            templateUrl: 'modules/articles/views/list-articles.client.view.html',
            controller: 'ArticlesController',
            resolve: {
                UnitTypes:  function($http){
                    return $http({method: 'GET', url: '/unit-types'});
                },
            },
        }
    }
]);

Answer 3

I was just having trouble with this very issue this morning.

Core Route Configuration (core.client.routes.js)

Here's my core config function for my main route:

$stateProvider.state('home', {
                url: '/',
                templateUrl: 'templates/main.client.view.html',
                controller:'MainCtrl',
                resolve: {
        initialData: function(mainControllerInitialData) {
            return mainControllerInitialData();
        }
    }
        });

*a note: make sure your services are named in camelCase and not PascalCase; otherwise your default task(s) in your taskrunner (i'm using gulp) will go wonky

Service that is returned in the resolve method as a promise (mainControllerInitialData.service.js)

here's the service itself:

 'use strict';
    var ser = angular.module('mean')
    .factory('mainControllerInitialData', function(queryPrismicDocument, $q) {
        return function() {


             var qpd = queryPrismicDocument;

             var restaurantMenu = qpd.query('[[:d = at(document.type, "restaurantMenu")]]', 'restaurantMenu');

             console.log('i am MainControllerInitialData.service.js');




            return $q.all([restaurantMenu]).then(function(results){
                return {
                    restaurantMenu: results[0]
                };
            });
        };
    });

Main Controller (main.controller.js)

here's the controller that is listed in the route configuration ("MainCtrl") that I am injecting the values into via the resolve method

'use strict';

angular.module('core')
  .controller('MainCtrl', ['$scope','initialData',function ($scope,  initialData) {
    console.log('i am MainCtrl...');

    console.log('i am at the top of the pack');
    console.log('i am initialData:');
    console.log(initialData);

    $scope.restaurantMenu = initialData.restaurantMenu[0];




  }]);