Решение AngularJS перед загрузкой состояния

Question

Так что я пытаюсь создать тему swapper в своем приложении. Мой HTML выглядит следующим образом:

<link href="assets/css/themes/default.min.css" rel="stylesheet" ng-if="settings.theme === 'default' || !settings.theme"> 
<link href="assets/css/themes/blue-hoki.min.css" rel="stylesheet" ng-if="settings.theme === 'blue-hoki'" /> 
<link href="assets/css/themes/blue-steel.min.css" rel="stylesheet" ng-if="settings.theme === 'blue-steel'" /> 
<link href="assets/css/themes/green-haze.min.css" rel="stylesheet" ng-if="settings.theme === 'green-haze'" /> 
<link href="assets/css/themes/purple-plum.min.css" rel="stylesheet" ng-if="settings.theme === 'purple-plum'" /> 
<link href="assets/css/themes/purple-studio.min.css" rel="stylesheet" ng-if="settings.theme === 'purple-studio'" /> 
<link href="assets/css/themes/red-intense.min.css" rel="stylesheet" ng-if="settings.theme === 'red-intense'" /> 
<link href="assets/css/themes/red-sunglo.min.css" rel="stylesheet" ng-if="settings.theme === 'red-sunglo'" /> 
<link href="assets/css/themes/yellow-crusta.min.css" rel="stylesheet" ng-if="settings.theme === 'yellow-crusta'" /> 
<link href="assets/css/themes/yellow-orange.min.css" rel="stylesheet" ng-if="settings.theme === 'yellow-orange'" /> 

Как вы можете видеть из этого, есть default.css файл, который загружается, если нет выбранной темы или, если выбранная тема по умолчанию. У меня есть страница сохранения, которая позволяет пользователю выбирать тему, этот бит работает отлично.

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

.run(['$rootScope', '$state', 'AccountService', 'CompanyService', function ($rootScope, $state, account, companyService) { 

    // On state change 
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams) { 

     // Caused each state change to scroll to the top of the page 
     document.body.scrollTop = document.documentElement.scrollTop = 0; 

     // Get our user 
     var user = account.current(); // This is set in our account service 

     // If we have a user and the companyId has not been set 
     if (user && user.authenticated && !$rootScope.settings) { 

      // Get our company id 
      var companyId = user.companyId; 

      // Get our company 
      companyService.get(companyId).then(function (response) { 

       // Create our settings object 
       var settings = { 
        theme: response.data.theme, 
        logo: response.data.logo 
       }; 

       console.log(settings); 

       // Add to our rootScope 
       $rootScope.settings = settings; 
      }); 
     } 
    }); 
}]) 

Кто-нибудь знает, как я могу получить тему для загрузки перед видом отображаются?

Answer 1

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

для более подробной информации проверить эту ссылку http://www.jvandemo.com/how-to-resolve-angularjs-resources-with-ui-router/

//landingpage 
<div ng-controller="startCtrl"></div> 

//mainpage.html 
<div ng-controller="MainPageController"> 
<link href="assets/css/themes/default.min.css" rel="stylesheet" ng-if="settings.theme === 'default' || !settings.theme"> 
<link href="assets/css/themes/blue-hoki.min.css" rel="stylesheet" ng-if="settings.theme === 'blue-hoki'" /> 
<link href="assets/css/themes/blue-steel.min.css" rel="stylesheet" ng-if="settings.theme === 'blue-steel'" /> 
<link href="assets/css/themes/green-haze.min.css" rel="stylesheet" ng-if="settings.theme === 'green-haze'" /> 
<link href="assets/css/themes/purple-plum.min.css" rel="stylesheet" ng-if="settings.theme === 'purple-plum'" /> 
<link href="assets/css/themes/purple-studio.min.css" rel="stylesheet" ng-if="settings.theme === 'purple-studio'" /> 
<link href="assets/css/themes/red-intense.min.css" rel="stylesheet" ng-if="settings.theme === 'red-intense'" /> 
<link href="assets/css/themes/red-sunglo.min.css" rel="stylesheet" ng-if="settings.theme === 'red-sunglo'" /> 
<link href="assets/css/themes/yellow-crusta.min.css" rel="stylesheet" ng-if="settings.theme === 'yellow-crusta'" /> 
<link href="assets/css/themes/yellow-orange.min.css" rel="stylesheet" ng-if="settings.theme === 'yellow-orange'" /> 
</div> 

//startctrl 
    angular.module('myApp').controller('startCtrl', function ($scope, $state) { 
     var companyId = user.companyId; 
     $state.go('mainState',{companyId: companyId}); 
    }); 

//mainctrl 
    angular.module('myApp').controller('MainPageController', function ($scope,company, $stateParams) { 
      $scope.theme = company.theme; 
    }); 

// your new state 
    'use strict'; 

    angular.module('myApp') 
     .config(function($stateProvider){ 
      $stateProvider.state('mainState', { 
       url: 'main/:companyId', 
       views: { 
        '@main': { 
         templateUrl: 'views/mainpage.html', 
         resolve: { 
          companyService: 'CompanyService', 
          company: function (companyService, $stateParams) { 

        //this is where the magic happens 
        //$promise makes sure the controller 
        //only loads when the promise is resolved 

           return companyService.get($stateParams.companyId).$promise; 
          } 
         }, 
         controller: 'MainPageController' 
        } 
       } 
      }) 
     });