Данные, проходящие между страницами angularjs

Question

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

это loginctrl (Войти Controller)

'use strict'; 
angular.module('dreamflow').controller('LoginCtrl', ['$scope', 'LoginService', 
function($scope, LoginService) { 
    $scope.title = "Login"; 
    $scope.master = {} 

    $scope.login = function() { 
     var user = { 
      username: $scope.username, 
      password: $scope.password 
     }; 
     LoginService(user); 
    }; 

} 
]); 

это loginService

angular.module('dreamflow') 
.factory('LoginService', function($http, $location, $rootScope) { 
    return function(user) { 
     $http.post('/login',{ 
       username: user.username, 
       password: user.password 
      }).then(function(response) { 
      if (response.data.success) { 
       console.log(response.data); 
       $rootScope.user = response.data.user; 
       $location.url('/'); 
      } else { 
       console.log(response.data.errorMessage); 
       $location.url('/'); 
      } 
     }); 
    }; 
}); 

В приведенном выше коде информацию о пользователях приходит после проверки успешности ответа и затем мы перенаправлены на дому стр. Я хочу получить доступ к данным пользователя, входящим в $ rootScope.user в угловой контроллер домашней страницы.

Answer 1

Вы можете иметь службу, которая будет содержать имя пользователя и сервис будет введен в обоих контроллерах, как например:

jsfiddle with '$scope'

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

HTML:

<div ng-app="myApp"> 

    <div ng-controller="ControllerOne as one"> 
     <h2>ControllerOne:</h2> 
     Change testService.loginName: <input type='text' ng-model='one.myService.loginName'/> </br></br> 
     myName: {{one.myService.loginName}} 
    </div> 
    <hr> 
    <div ng-controller="ControllerTwo as two"> 
     <h2>ControllerTwo:</h2> 
     myName: {{two.myService.loginName}} 
    </div> 

</div> 

JS:

app.service('testService', function(){ 
    this.loginName = "abcd"; 
}); 

app.controller('ControllerOne', function($scope, testService){ 
    this.myService = testService; 
}); 

app.controller('ControllerTwo', function($scope, testService){ 
    this.myService = testService; 
}); 

jsfiddle with 'this'