Страница загрузки для углового разрешения

Question

Страница загрузки для углового разрешения

0

Я использую angularjs с ui-router.

Я хотел бы использовать объект разрешения для загрузки некоторых асинхронных файлов и отображать только конечную страницу, когда все загружается.

это прекрасно работает, но как я могу показать страницу загрузки?

 $stateProvider
        .state(model.constants.RouteStates.MAIN, {
            url: "/main",
            templateUrl: "modules/main.html",
            controller: "mainctrl",
            controllerAs: "currentCtrl",
            resolve: {
                app: function($q) {
                    var deferred = $q.defer();
                    //do some asyc stuff...

                    //display a "please-wait"-page for the user while requesting asyc-stuff...

                    return deferred.promise;
                }
         }

Tobias Koller 18 авг. 2015, в 17:52

Источник

0

Я думаю, что вы можете сделать это, прослушивая $ stateChangeStart в вашем контроллере, потому что ваше состояние будет меняться только тогда, когда ваше решение закончится.
cagica 18 авг. 2015, в 15:40

Теги:

angularjs

angular-ui-router

2 ответа

Ещё вопросы

Я думаю, что вы можете сделать это, прослушивая $ stateChangeStart в вашем контроллере, потому что ваше состояние будет меняться только тогда, когда ваше решение закончится.

pcagica · Answer 1 · 2015-08-18T14-09-00.000Z

Вы можете сделать что-то подобное в своем контроллере.

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    if (toState.name="your_resolve_state") {
        $scope.showSpinner = true;
    }
});
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
    if (toState.name="your_resolve_state") {
        $scope.showSpinner = false;
    }
});

или после того, как ваше решение завершилось в вашем контроллере, вы можете позвонить

$scope.showSpinner = false;

в начале

это выглядит красиво. Можете ли вы показать мне реализацию вашего метода "showSpinner"? Я не знаю, как отобразить контент на странице, потому что у нас еще нет контроллера, верно? И я использую controllerAs-объект, чтобы получить экземпляр контроллера
Вы можете реализовать show spinner, просто присвоив переменной значение true, и использовать ng-show в html с этой переменной. Я отредактировал свой ответ, это проще. Вы можете просто поместить $ scope.showSpinner в ng-show в элементе с вашим счетчиком
В одном из моих приложений я сделал это по-другому, я поместил элемент перед главной страницей, который заполнил весь экран блесной. Затем в контроллере я выполнял асинхронную работу, а когда закончил, скрывал элемент спереди и показывал страницу сзади. Это один из способов сделать это.

Tobias Koller · Answer 2 · 2015-08-18T13-24-00.000Z

Я использовал другой способ показать загрузочную страницу.

У меня есть глобальная переменная с обещанием, которое будет срабатывать при завершении глобальной иналиации.

var deferred = $q.defer();
mymodule.globalVars.PromiseInit = deferred.promise;

В моем конструкторе (я использую машинопись) я могу просто сказать

export class Test
{

    initialized: boolean = false;

    constructor()
    {
        mymodule.globalVars.PromiseInit.then(()=>{
            //everything global is loaded so I can start with my controller-stuff
             this.initialized=true;
        })

    }

    isInitialized(){
        return this.initialized;
    }

на моей html-странице я использовал следующее:

<div ng-show="!currentCtrl.isInitialized()">
    <div ng-include="'modules/_wait.html'"></div><!--this is my loading-spinner -->
</div>

<div class="container-fluid" ng-show="currentCtrl.isInitialized()">
...

метод isInitialized просто проверяет свойство, которое я устанавливаю, когда все загружается.