AngularJS правильно обращается к localStorage

Question

Я подаю заявку с помощью внутреннего интерфейса Node.js и внешнего интерфейса AngularJS.Я получил логин для работы, но теперь у меня проблема с отображением данных из localStorage.Когда я вхожу в систему, я сохраняю информацию о пользователе в localStorage, и она работает нормально, но когда пользователь перенаправляется на страницу профиля, я должен обновить страницу, чтобы увидеть имя пользователя и другую информацию.Таким образом, проблема заключается в отображении данных localStorage в HTML.

Мой файл AngularJS:

var application = angular.module('application', ['ngRoute', 'ngStorage', 'ngAnimate', 'angularUtils.directives.dirPagination']);

application.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

  $locationProvider.hashPrefix('');

    $routeProvider
      .when('/', {
        templateUrl : "views/home.html",
        //controller: "appController"
      })
      .when('/login', {
        templateUrl : "views/login.html",
        controller: "loginController"
      })
      .when('/profile', {
        templateUrl: "views/profile.html",
        controller: "sessionController"
      }).when('/logout', {
        templateUrl: "views/logout.html",
        controller: "logoutController"
      }).otherwise({
        redirectto: "/home"
      });

      $locationProvider.html5Mode(true);

}]);

application.controller('loginController',  function($scope, $location, $http, $localStorage, $window) {

    $scope.formData = {};

    $scope.userLogin = function() {

        $scope.formData.email = $scope.email;
        $scope.formData.password = $scope.password;

        $http.post('/login', $scope.formData).
        then(function(response) {
          $localStorage.userData = response.data;
          $location.path("/profile");
        }).catch(function(response) {
          console.log(response);
          $location.path("/login");
          $scope.error = "fail"
        });
    }
});

application.controller('sessionController', function($scope, $location, $http, $localStorage, $window) {

  var getUserData = new Promise (function(resolve, reject) {
    var result = JSON.parse(window.localStorage.getItem("ngStorage-userData"));
    //console.log(result);
    resolve(result);
  });

  $scope.getData = function() {
    getUserData.then(function(response) {
        $scope.currentUserData = response;
        $scope.$apply();
        console.log($scope.currentUserData);
//THIS PRINTS NULL THE FIRST TIME SOMEONE LOGINS
    });
  }
});

application.controller('logoutController', function($scope, $location, $http, $localStorage, $window) {

        $window.localStorage.clear();
});

И просмотр страницы моего профиля:

<div class="col-md-12" style="width:500px;" ng-init="getData()">
    <div align="right"><a ng-href="/logout">Logout</a></div>
      <h4>Welcome {{ currentUserData.personal.firstname }}! </h4>
    <p><strong>This is Profile page Page</strong></p>
</div>

Поэтому, когда кто-то входит в приложение, печатает ноль для $ scope.currentUserData.Когда страница обновляется, она печатается нормально, и я вижу информацию на странице профиля.Может ли кто-нибудь помочь мне, что я делаю не так?Спасибо!

Answer 1

Во-первых, вы, похоже, немного упускаете точку локального хранилища.

Вам не нужен localStorage для передачи данных между угловыми состояниями.Для этого у вас есть угловые сервисы - внедрите один.https://docs.angularjs.org/guide/services

localStorage необходим для сохранения информации при перезагрузке приложения.

Во-вторых, вы смешиваете angularjs с обещаниями vanilla js.Поскольку вы, очевидно, начинаете свой угловой опыт - я бы советовал против этого.Используйте angularjs до конца, пока вы не обнаружите реальной необходимости: https://docs.angularjs.org/api/ng/service/$q

В-третьих, если вам нужно использовать $ scope. $ Apply () или $ scope. $ Digest () - вы, вероятно,делать что-то не так.Вы должны быть в состоянии получить без них для простых приложений.

Попробуйте выполнить эти 3 пункта и посмотреть, если вы можете переписать код.