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

Question

这是我的代码：

服务模块

(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;
        };
    }]);
})();

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

此外，请用您能找到的最简单的方式解释解析属性。

旁注，getInfoMenu 抛出 Invalid Token Exception。我已经彻底检查过，我的 json 很长但有效。顺便说一句，对不起，如果所有的寿司让你饿了。

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

编辑实际上，我的所有视图在正确加载之前都需要单击两次。让我进一步解释一下，我有一个导航栏，我点击第一个按钮，没有任何反应，转到第二个按钮，没有任何反应转到第三个和第四个按钮，没有任何反应。但是当我 return 到第一次点击后的第一个等等时，它起作用了！不过，Unexpected Token 的事情仍在发生。

Answer 1

我发现的第一件事：你的工作是有承诺的。 Data.getInfoMenu() returns 一个需要解决的承诺。您将承诺分配给您的范围：

$scope.dataMenu = Data.getInfoMenu();

相反，您应该这样做：

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

现在它会等到承诺得到解决，然后将检索到的数据分配给您的范围。这里有一个关于 promise 在 Angular 中如何工作的非常简单的解释：http://andyshora.com/promises-angularjs-explained-as-cartoon.html

现在在你的路由中解析对象：最简单的形式是这样的：

$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 数组现在在您的范围内可用。但 resolve 的真正美妙之处在于，您可以使用它来解决来自资源 and/or 服务的承诺。它会等到它们被解决（因此得名），然后它会实例化你的控制器。下一个使用您的服务的示例：

$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 中实施解析？

How can I implement resolve in my app.config with these snippets?

javascript

angularjs

angularjs-routing

angular-promise

服务模块

在我的app.config

我的控件模块