각도 서비스 객체의 인스턴스가 여러 개 생성됨

Question

저는 Angular를 처음 접했고 샘플 워크 플로우를 만들기 시작했습니다. 저는 사용자를 인증하고 로그인 한 사용자 세부 정보를 보존하는 각도 서비스를 제공합니다.

편집 : 전체적으로 두 개의 별도 HTML 페이지가 있는데 두 개의 인스턴스를 만드는 문제가 발생합니다.

studentApp.factory("loginService", function(){ 
    this.loggedUser="Guest!"; 
    return{ 
     checkCredentials : function(user){ 
      //Authenticating logic goes here. 
      this.loggedUser =user.username; 
     } 
    }; 
}); 

성공적으로 로그인하면 홈 페이지가 표시되고 서비스에 다시 액세스하여 html 페이지에 로그인 된 사용자 이름을 출력합니다.

studentApp.controller("headerController", ["loginService", function(loginService){ 
     var vm = this; 
     vm.loggedUser = loginService.loggedUser; 
}]); 

하지만 'Guest'가 사용자 이름 대신 표시되는 것처럼 보입니다. 새로운 서비스 인스턴스가 생성되고 있다고 느낍니다. 공장에서 getter 메소드를 사용하여

Answer 1

시도 - fiddle

예 -

app.factory("loginService", function(){ 
    this.loggedUser="Guest!"; 
    return{ 
    checkCredentials : function(user){ 
     //Authenticating logic goes here. 
     this.loggedUser =user; 
    }, 
    getLoggedUser : function(){ 
     return this.loggedUser; 
    } 
    }; 
}); 

Answer 2

난 당신이 로그인 및 홈 페이지에 대해 다른 컨트롤러를 사용하는 것 같아요. 그렇다면 각 컨트롤러에 this을 사용하여 각 컨트롤러에 서비스 인스턴스를 새로 만듭니다.

studentApp.factory("loginService", function() { 
    return { 
    loggedUser : "Guest!", 
    checkCredentials: function(user) { 
      //Authenticating logic goes here. 
      this.loggedUser = user.username; 
     } 
    }; 
}) 

studentApp.controller("headerController", ["loginService", function(loginService){ 

     $scope.loggedUser = loginService.loggedUser; 
}]); 



studentApp.controller("LoginController", ["loginService", function(loginService){ 
     //login and then call checkcredentials(); 
      loginService.checkCredentials("name"); 
    }]);