使用meanjs中的解析

Question

我见过如何在激活控制器(例如https://github.com/angular-ui/ui-router/wiki)之前使用"resolve“加载数据的各种示例，但我无法理解如何将其合并到MeanJS体系结构中。

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

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

关于如何转换示例以适应MeanJS，有什么建议吗？

使用angular版本1.2.26

-更新--

我尝试从视图中删除data-ng- mymodule.client.routes.js =“MyController”，并在"resolve“选项旁边的mymodule.client.routes.js中直接设置控制器。这似乎解决了将解析对象注入控制器的问题，但却改变了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 controller将其保存在$scope中，然后可以在视图和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命名；否则您在任务运行器(我正在使用gulp)中的默认任务将变得不稳定

在resolve方法中作为promise (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)

下面是我通过resolve方法向其中注入值的路由配置("MainCtrl")中列出的控制器

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




  }]);