angularjs 페이지 간의 데이터 전달

Question

나는 angularjs를 사용하는 응용 프로그램에서 작업하고 있습니다. 이 홈페이지 페이지로 이어지는 로그인 페이지가 있습니다. 로그인 페이지는 loginCtrl에 의해 관리되며, loginService을 더 사용합니다.

이 loginctrl입니다 (로그인 컨트롤러)

'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); 
    }; 

} 
]); 

이 응답의 성공을 확인 후오고 위의 코드를 사용자의 세부 정보

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('/'); 
      } 
     }); 
    }; 
}); 

loginService

이며, 우리는 집으로 리디렉션됩니다 페이지. 홈 페이지 각도 컨트롤러에서 $ 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'