Загрузка данных перед загрузкой контроллеров и представлений

Question

Загрузка данных перед загрузкой контроллеров и представлений

0

У меня здесь немного проблем.

У меня есть приложение AngularJS, которое подключается к API и позволяет пользователям входить в систему, регистрироваться и т.д. Пользователь получает токен, который затем сохраняется в $ localStorage (через ngstorage).

$localStorage[JWT] = data.token;

Когда пользователь посещает мое приложение с сохраненным токеном, я хочу представить ему страницу загрузки (независимо от того, какую страницу он пытается просмотреть), пока я не подтвержу его токен, и загрузите представления/контроллеры, как обычно.

Я искал разные способы сделать это, но я не мог понять. Любые указатели оцениваются!

Благодарю.

Tom 07 июль 2015, в 12:57

Источник

Теги:

angularjs

1 ответ

Ещё вопросы

deostroll · Accepted Answer · 2015-07-07T08-12-00.000Z

Вы можете использовать модуль ngRoute по умолчанию для простых случаев, таких как это.

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

app.config(function($routeProvider){
  $routeProvider.when('/',{
    templateUrl:'initial.html',
    controller:'MainCtrl'
  })
  .when('/two',{
    templateUrl: 'post.html',
    controller: 'PostCtrl',
    resolve: {
      movieList: function($movies) {
        return $movies.get();
      }
    }
  })
  .otherwise({
    redirectTo:'/'
  });
});

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

(app.js):

app.controller('MainCtrl', function($scope, $location) {
  $scope.go = function() {
    $location.path('/two');
  };

  $scope.$on('$routeChangeStart', function(evt){
    $scope.showLoading = true;  
  });

  $scope.showLoading = false;

});

(initial.html):

<a href="#/two" class="btn btn-default" ng-disabled="showLoading">Go</a>
<br>
<p ng-if="showLoading" style="color:red">Loading...</p>

Весь код здесь

Узнать больше о ngRoute