meanjs - 在meanjs中使用resolve

Question

我已经看到了如何在激活控制器之前使用“resolve”加载数据的各种示例（例如https://github.com/angular-ui/ui-router/wiki），但我不明白如何将其合并到MeanJS 架构。

这是一个流行的问题/答案：Delaying AngularJS route change until model loaded to prevent flicker

我不确定是否应该在 mymodule.client.routes.js 中添加“resolve”选项和/或如何将预加载的服务构造/注入到控制器参数中。

关于如何转换示例以适应 MeanJS 的任何建议？

使用角度版本 1.2.26

- 更新 -

我尝试从视图中删除 data-ng-controller="MyController" ，而是直接在 mymodule.client.routes.js 中的“resolve”选项旁边设置控制器。这似乎修复了将解析的对象注入控制器，但改变了 MeanJS 架构。这是正确/唯一的方法吗？

Answer 1

我发现（基于另一个stackoverflow答案）是这样设置的：

看法：

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

控制器：

'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 
         */
    }
]);

路线（这就是重点）：

$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;
        }
    }).

因此，您解析article对象，通过 stateProvider 将其保存在 $scope 中controller，然后您可以在视图和 ArticlesController 中使用它，因为它们共享相同的范围。

希望它会有所帮助。（我也希望这与当前 MEANjs 进化状态中的最佳解决方案相距不远）

Answer 2

不要在视图内指定控制器。相反，在按照https://github.com/angular-ui/ui-router/wiki定义路由时分配控制器

例如 /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

今天早上我只是在这个问题上遇到了麻烦。

核心路由配置 (core.client.routes.js)

这是我的主要路线的核心配置功能：

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

*注意：确保您的服务以 camelCase 而不是 PascalCase 命名；否则你的taskrunner中的默认任务（我正在使用gulp）将会变得不稳定

在 resolve 方法中作为承诺返回的服务 (mainControllerInitialData.service.js)

这是服务本身：

 '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.js）

这是路由配置（“MainCtrl”）中列出的控制器，我通过 resolve 方法将值注入其中

'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];




  }]);