Как я могу реализовать разрешение в моем 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;
        };
    }]);
})();

Моя проблема: когда я впервые пытаюсь посетить вид, связанный с местами, ничего не отображается; тогда, когда я посещаю его снова, все работает отлично. Я думаю, что получил эту часть, представление готово до того, как данные поступят, верно? Дело в том, что я не хочу, чтобы пользователь дважды нажимал кнопку, чтобы получить результат, как я могу предотвратить это?

Также, пожалуйста, объясните свойство resolver самым простым способом, который вы только можете найти.

Примечание, getInfoMenu бросает Invalid Token Exception, Я тщательно проверил, мой JSON длинный, но действительный. Кстати, извините, если все эти суши сделали вас голодным.

Извините, если это кажется дублированным, но я не могу этого понять resolve вещь. Я прочитал блог с тремя историями и некоторыми вопросами, например, это, это, это; но я не смог понять ни один из подходов.

РЕДАКТИРОВАТЬ На самом деле, все мои представления занимают два клика, прежде чем они загружаются правильно. Позвольте мне объяснить, у меня есть навигационная панель, я нажимаю первую кнопку, ничего не происходит, перехожу ко второй кнопке, ничего не происходит, переходим к третьей и четвертой кнопке, ничего не происходит. Но когда я возвращаюсь к первому и так далее после первого клика, все работает! Unexpected Token вещь все еще происходит, хотя.

Answer 1

Первое, что я заметил: вы работаете с обещанием. Data.getInfoMenu() возвращает обещание, которое необходимо решить. Ваше назначение обещания для вашей сферы:

$scope.dataMenu = Data.getInfoMenu();

Вместо этого вы должны делать это:

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

Теперь он ожидает до тех пор, пока обещание не будет выполнено, а затем присваивает извлеченные данные вашей области. Вот очень простое объяснение того, как обещания работают в 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 Массив теперь доступен в вашей области. Но настоящая красота решимости состоит в том, что вы можете использовать ее для разрешения обещаний ресурсов и / или услуг. Он будет ждать до тех пор, пока они не будут разрешены (отсюда и название), а затем будет создан ваш контроллер. Следующий пример использования вашего сервиса:

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

Сейчас dataMenu также доступен в вашем контроллере. Единственное отличие состоит в том, что в этот раз он исходит от вашего сервиса, и вам не нужно разрешать обещание самостоятельно, объект разрешения маршрута исправит это для вас.

Вот хороший, но более подробный пример использования resolv, только для ui.router, а не angular-route, но концепция остается той же: https://github.com/angular-ui/ui-router/wiki

Вот и все, я не могу объяснить это проще, я думаю. Надеюсь, это поможет, и вот рабочий пример концепции с вашими суши на Plunker: http://plnkr.co/edit/sXQBcczLxhHSnbXfYOJl?p=preview Теперь я действительно голоден;)