angular.js를 사용하여 SPA의 페이지에서 상태를 유지하는 방법

Question

단일 페이지 아키텍처를 사용하면 특정 페이지로 이동할 때마다 해당 페이지의 컨트롤러가 실행됩니다. 다양한 SPA 페이지에서 많은 국가를 유지해야합니다.

질문 : $ rootScope를 오염시키지 않고 컨트롤러 (SPA 페이지)에서 상태를 유지 관리하는 올바른 방법은 무엇입니까?

어떤 이유로 상태 관리를 위해 서비스를 사용하는 것이 "적합하지 않은"것처럼 보입니다.

덕분에, -Andres

Answer 1

대답은 서비스를 사용하는 것입니다. 서비스는 상태를 저장하는 데 사용할 수있는 여러 컨트롤러에 주입 할 수있는 단일 개체입니다. 당신의 국가 내에서

, 당신은 영구 저장소를 유지하기 위해 localStorage, 또는 sessionStorage 같은 캐싱 메커니즘의 어떤 종류를 사용할 수 있습니다

app.config(function($routeProvider){ 
$routeProvider.when('/', { 
    controller: 'MainCtrl' 
}).when('/another', { 
    controller: 'SideCtrl' 
}); 
}); 

app.controller('MainCtrl', function($scope, State){ 
    $scope.formData = State.formData; 

    $scope./* other scope stuff that deal with with your current page*/ 
}); 

app.controller('SideCtrl', function($scope, State){ 
    $scope.formData = State.formData; // same state from MainCtrl 

}); 

app.directive('myDirective', function(State){ 
    return { 
    controller: function(){ 
     State.formData; // same state! 
    } 
    }; 
}); 

코드 courtesy

Answer 2

그것은 내부에 직접 상태를 저장하는 것이 좋습니다 아니다 $ rootScope.

왜?

각도 검사 (더티 검사)의 다이제스트주기 동안 rootScope는 응용 프로그램의 모든 범위 관찰자가 "안정적"인지 확인하기 때문에 변경 사항을 확인하기 위해 DOM 내부에 많은, 많은, 많은 루프가 있음을 확인합니다. 정말 ...

그러나, 당신이 뭔가 더 할 수 있고, 여러 솔루션이 무거운 :

솔루션 1 - 당신의 구성 요소/지침 나무는/당신의 국가 트리

를 사용하여 높은 순서 지침에 맞는 구성 요소 s는 상태를 보유하고 하위 구성 요소/지시문을 통해 데이터를 전달합니다. 이렇게하면 모든 것이 부모에서 관리되므로 아무 것도 저장하지 않아도되므로 상태 비 저장 구성 요소를 제공 할 수 있습니다. 구성 요소 트리가 상태 트리와 일치 할 때 아주 간단한 솔루션입니다.

해결 방법 2 - 당신의 구성 요소/지침 나무는 당신의 국가 트리

당신은 그들 내부에 직접적으로 어떤 종류의 정보를 저장하고 어디서나 당신이 필요로하는 상태를 재사용하는 각 서비스를 사용할 수에 맞게 나던. 정말 AngularJS와의 모든 서비스 (공장/제공/서비스) 이후이 솔루션처럼 싱글입니다하지 않습니다, 그것은 3 안티 패턴 ...

솔루션입니다 - 돌아 오는

돌아 오는이 제시되었다 (거의 사용 된) Reactjs 커뮤니티에 의해,하지만 그것은 React뿐입니다.

Angularjs, Angular 2 등에서 사용할 수 있습니다 ... 구성 요소 트리가 상태 트리에 맞지 않으면 모든 프론트 엔드 자바 스크립트 프로젝트/fw에서 잘 작동하는이 라이브러리를주의 깊게 살펴 보시기 바랍니다. .