AngularJS ui-router - вид исчезает при перезагрузке - PullRequest
Новая
       22

AngularJS ui-router - вид исчезает при перезагрузке

0 голосов
/ 13 июня 2019

Недавно я начал использовать ui-router для управления состоянием моей страницы.

Я заметил, что когда я запускаю сервер в первый раз, контент там есть, но если я перемещаюсь по страницам или перезагружаю страницу, контент исчезает.

Я знаю, что на ui-router была ошибка, которая могла быть причиной этого. Я обновил ui-router, но ошибка все еще сохраняется.

Кому-нибудь удалось найти исправление или обойти его?

Редактировать ----

Мое расследование привело меня к убеждению, что оно не имеет ничего общего с пользовательским интерфейсом и тем более с течением времени, которое требуется приложению для выполнения обещания. Как я получу предупреждения о нарушениях на setTimeout как часть jQuery

1 Ответ

0 голосов
/ 21 июня 2019

Так что я был частично прав в моем последнем редактировании, отсюда и этот ответ; jQuery имел какое-то отношение к моей проблеме (через использование обещаний для получения данных), однако это также было связано с тем, как работает ui-router:

По мере загрузки содержимого страницы, ui-router будет управлять первой загрузкой (и последующими перезагрузками) с данными, предоставленными запросом GET.

Поскольку это обещание, не гарантируется (особенно когда вы увеличиваете свою БД), что данные будут там вовремя отображать страницу.

Чтобы избежать этого, используйте свойство resol как часть ngRoute. Это свойство позволяет загружать все необходимые данные перед отображением DOM.

Если вы хотите узнать больше о, перейдите по ссылке ниже:

https://medium.com/opinionated-angularjs/advanced-routing-and-resolves-a2fcbf874a1c

Мой код ниже:

App.js 

'use strict';


 angular
    .module('knoweeApp', ['ui.router'])
    .config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {

        $stateProvider
            .state('home', {
                url:'/',
                templateUrl: 'views/user.html',
                controller: 'UserCtrl as user',
                resolve: {
                    user: function(userFinder) {
                        return userFinder.getUsers();
                    }
                }
            })

            .state('teacher', {
                url:'/teacher/:name',
                templateUrl: 'views/teacher.html',
                controller: 'TeacherCtrl as teacher'

            });

        $urlRouterProvider.otherwise('/');

    }]);

Сервис: userFinder 

'use strict';

/**
 * @ngdoc service
 * @name knoweeApp.userFinder
 * @description
 * # userFinder
 * Service in the knoweeApp.
 */
angular.module('knoweeApp')
  .service('userFinder', function () {
    // AngularJS will instantiate a singleton by calling "new" on this function

    this.getUsers = function (){
        return $.get('users.json');
    };

  });

Контроллер: UserCtrl 


'use strict';

angular.module('knoweeApp')
    .controller('UserCtrl', function (userFinder,user) {

    this.teachers = user;

    this.increment = function (item) {
        item.rating += 1;
    };

    this.decrement = function (item) {
        item.rating -= 1;
    };

});

Надеюсь, это поможет, свяжитесь со мной, если сомневаетесь

...