Question

我见过如何使用＆＃34;解决＆＃34;的各种例子。在激活控制器之前加载数据（例如https://github.com/angular-ui/ui-router/wiki），但我无法理解如何将其合并到MeanJS架构中。

这是一个很受欢迎的问题/答案：Delaying AngularJS route change until model loaded to prevent flicker

我不确定＆＃34;解决＆＃34;应该在mymodule.client.routes.js中添加选项和/或如何将预加载的服务构造/注入到控制器参数中。

有关如何将示例转换为适合MeanJS的任何建议吗？

使用角度版本1.2.26

- 更新 -

我尝试删除data-ng-controller =＆＃34; MyController＆＃34;从视图中取而代之的是将控制器直接设置在mymodule.client.routes.js旁边，然后解决＆＃34; resolve＆＃34;选项。这似乎解决了将已解析的对象注入控制器，但更改了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

定义路径时分配控制器

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

我今天早上遇到这个问题时遇到了麻烦。

核心路由配置（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方法中作为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）

这里是路由配置中列出的控制器（＆＃34; MainCtrl＆＃34;）我通过解析方法注入值

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




  }]);

在meanjs中使用resolve

3 个答案: