服务模块

(function () {
var servicesSushi = angular.module('SushiServices', ['ngResource']);

servicesSushi.factory('Data', ['$resource',
    function ($resource) {
        return $resource('Data/:name.json', {}, {
            getInfoMenu: { method: 'GET', params: { name: 'sushiMenu' },      isArray: true },
            getInfoPlaces: { method: 'GET', params: { name:    'sushiPlaces' }, isArray: true }
        });
    }]);
})();

在我的app.config

中

(function () {
var app = angular.module('Sushi', ['ngRoute','SushiServices', 'SushiControllers']);

app.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
            when('/menu', {
                templateUrl: 'partials/_menu.html',
                controller: 'MenuController'
            }).
            when('/places', {
                templateUrl: 'partials/_places.html',
                controller: 'PlacesController'

    }]); //I have removed the other .whens and the otherwise for simplicity.
})();

我的控件模块

(function () {
var SushiAppControllers = angular.module('SushiControllers', ['ngSanitize']);
SushiAppControllers.controller('MenuController', ['$scope', 'Data',
    function ($scope, Data) {
        $scope.pos = 1;
        $scope.dataMenu = Data.getInfoMenu();
        $scope.setPos = function (value) {
            $scope.pos = value;
        };
        $scope.isPos = function (value) {
            return $scope.pos === value;
        };
    }]);
SushiAppControllers.controller('PlacesController', ['$scope', '$sce', 'Data',
    function ($scope, $sce, Data) {
        $scope.pos = 1;
        $scope.dataPlaces = Data.getInfoPlaces();
        $scope.urlMap = function () {
            return $sce.trustAsResourceUrl($scope.dataPlaces[$scope.pos - 1].map);
        };
        $scope.setPos = function (value) {
            $scope.pos = value;
        };
    }]);
})();

我的问题：当我第一次尝试访问与地点相关的视图时，没有任何显示;然后，每当我再次访问它，一切正常。我想我得到了那个部分，在数据到来之前视图就准备好了，对吗？问题是，我不希望用户必须两次单击按钮才能获得结果，我该如何防止这种情况发生？

另外，请以最简单的方式解释resolve属性。

旁注，getInfoMenu抛出Invalid Token Exception。我已经彻底检查了，我的json很长但很有效。 BTW很抱歉，如果所有寿司都让你感到饥饿。

如果这看起来很复杂，我很抱歉，但我无法理解这个resolve的事情。我已经阅读了三个故事的博客，以及一些问题，例如： this，this，this;但我无法理解任何方法。

编辑实际上，我的所有观看次数都需要两次点击才能正确加载。让我进一步解释一下，我有一个导航栏，我点击第一个按钮，没有任何反应，转到第二个按钮，没有任何反应转到第三个和第四个按钮，没有任何反应。但是当我第一次点击后返回第一个等等时，它就可以了！不过，Unexpected Token东西仍在发生。

Answer 1

我发现的第一件事：你的承诺。 Data.getInfoMenu()返回需要解决的承诺。您将承诺分配给您的范围：

$scope.dataMenu = Data.getInfoMenu();

相反，你应该这样做：

Data.getInfoMenu().$promise.then(function(dataMenu) {
  $scope.dataMenu = dataMenu;
});

现在它等待直到承诺得到解决，然后它将检索到的数据分配给您的范围。以下是关于Promise如何在Angular中起作用的简单解释：http://andyshora.com/promises-angularjs-explained-as-cartoon.html

现在路径中的resolve对象：它是最简单的形式，它的工作原理如下：

$routeProvider.when('/menu', {
    templateUrl: 'partials/_menu.html',
    controller: 'MenuController',
    resolve: {
        dataMenu: function () {
            return [
                'Chirashizushi',
                'Inarizushi'
            ];
        }
    }
});

现在，您可以在控制器中注入dataMenu：

SushiAppControllers.controller('MenuController', [
    '$scope',
    'dataMenu',
    function ($scope, dataMenu) {
        $scope.dataMenu = dataMenu;
    }
]);

dataMenu数组现在可在您的范围内使用。但真正的决心之美是你可以用它来解决资源和/或服务的承诺。它将等待，直到他们被解决（因此名称）然后它将实现你的控制器。下一个使用您服务的示例：

$routeProvider.when('/menu', {
    templateUrl: 'partials/_menu.html',
    controller: 'MenuController',
    resolve: {
        dataMenu: ['Data', function (Data) {
            return Data.getInfoMenu();
        }]
    }
});

现在您的控制器中也可以使用dataMenu。唯一的区别是这次它来自您的服务而且您不必自己解决承诺，路线的解决方案对象为您解决了这个问题。

这是一个很好但更详细的使用resolve的例子，只是ui.router不是angular-route，但概念保持不变：https://github.com/angular-ui/ui-router/wiki#resolve

所以就是这样，我想不出任何更简单的解释。希望有帮助，这是概念的一个有效例子，你的寿司在Plunker：http://plnkr.co/edit/sXQBcczLxhHSnbXfYOJl?p=preview现在我真的很饿;）

如何在我的app.config中使用这些片段实现解析？

服务模块

在我的app.config

我的控件模块

1 个答案: