Angularjs 데이터 저장소 모범 사례

Angularjs 데이터 저장소 모범 사례

제 각진 앱에는 컨트롤러가 2개 있습니다.문제는 사용자가 페이지에서 멀리 이동할 때 컨트롤러가 데이터를 보관하지 않는다는 것입니다.

선택한 데이터를 컨트롤러의 데이터 저장소에 저장하여 다른 컨트롤러 간에 사용할 수 있도록 하려면 어떻게 해야 합니까?

옵션 1 - 사용자 지정service

컨트롤러 간에 데이터를 저장하고 공유하기 위해 전용 각도 서비스를 활용할 수 있습니다(서비스는 단일 인스턴스 개체임)

서비스 정의

 app.service('commonService', function ($http) {

        var info;

        return {
            getInfo: getInfo,
            setInfo: setInfo
        };

        // .................

        function getInfo() {
            return info;
        }

        function setInfo(value) {
            info = value;
        }
});

여러 컨트롤러에서 사용

app.controller("HomeController", function ($scope, commonService) {

    $scope.setInfo = function(value){
        commonService.setInfo(value);
    };

});


app.controller("MyController", function ($scope, commonService) {

    $scope.info = commonService.getInfo();

});

---

- 2 - html5localStorage

내장된 브라우저 로컬 스토리지를 사용하여 어디서나 데이터를 저장할 수 있습니다.

쓰기

$window.localStorage['my-data'] = 'hello world';

읽고 있어

var data = $window.localStorage['my-data']
// ...

• 이 멋진 프로젝트를 확인해보세요: https://github.com/grevory/angular-local-storage

---

옵션 3 - 웹 서버 api 경유

서로 다른 사용자 간에 데이터를 유지해야 하는 경우 서버 측 어딘가(db/cache)에 저장해야 합니다.

function getProfile() {
    return $http.get(commonService.baseApi + '/api/profile/');
}

function updateProfile(data) {
    var json = angular.toJson(data);
    return $http.post(commonService.baseApi + '/api/profile/', json);
}

편집 이 방법을 포함한 다른 방법을 포함한 심층적인 답변을 작성한 Jossef Harush의 답변을 참조하십시오.

localStorage 또는 sessionStorage - http://www.w3schools.com/html/html5_webstorage.asp 을 사용하는 것이 좋습니다.

HTML 로컬 스토리지는 클라이언트에 데이터를 저장하기 위한 두 개의 개체를 제공합니다.

• window.local스토리지 - 만료 날짜가 없는 데이터를 저장합니다.
• window.sessionStorage - 한 세션의 데이터를 저장합니다(브라우저 탭을 닫으면 데이터가 손실됨).

이는 웹 서비스에 데이터를 게시/퍼팅하고 싶지 않다고 가정합니다(질문에서 Windows 서비스 언급).

데이터가 배열이거나 어떤 종류일 경우 JSON으로 변환하여 문자열로 저장한 다음 필요할 때 다음과 같이 구문 분석할 수 있습니다. localStorage에 배열을 저장하려면 어떻게 해야 합니까?:

var names = [];
names[0] = prompt("New member name?");
localStorage["names"] = JSON.stringify(names);

//...
var storedNames = JSON.parse(localStorage["names"]);

다른 답변(AFAIK)에 언급되지 않은 옵션이 있습니다.

이벤트

• 컨트롤러 간 통신을 위해 이벤트를 사용할 수 있습니다.

• 중재자(서비스와 같은)가 필요 없고 사용자(HTML 스토리지와 같은)가 삭제할 수 없는 간단한 의사소통입니다.

• 모든 코드는 사용자가 통신하려는 컨트롤러에 기록되어 있으므로 매우 투명합니다.

이벤트를 활용하여 컨트롤러 간의 통신을 수행하는 좋은 예는 아래에서 확인할 수 있습니다.

게시자는 게시하려는 범위입니다(즉, 다른 사람에게 어떤 일이 일어났음을 알려줍니다).대부분의 사람들은 무슨 일이 일어났는지 신경 쓰지 않고 이 이야기의 일부가 아닙니다.

가입자는 특정 이벤트가 게시된 것을 신경 쓰는 사람입니다(즉, 알림을 받으면 이런 일이 발생했습니다, 반응합니다).

$rootScope를 게시자와 가입자 사이의 중재자로 사용할 것입니다.이는 항상 작동합니다. 왜냐하면 범위가 이벤트를 방출하는 경우 $rootScope는 해당 범위의 상위이거나 상위 항목의 상위 항목의 상위 항목이기 때문입니다.$rootScope가 이벤트에 대해 브로드캐스트(상속하는 모든 사람에게 알립니다)할 때, 모든 사람은 ($rootScope는 스코프 상속 트리의 루트이기 때문에) 이벤트에 대해 듣게 됩니다. 따라서 앱의 다른 모든 스코프는 이벤트의 자식이거나 자식의 자식입니다.

// publisher
angular.module('test', []).controller('CtrlPublish', ['$rootScope','$scope',
    function ($rootScope, $scope) {

      $scope.send = function() {
        $rootScope.$broadcast('eventName', 'message');
      };

}]);

// subscriber
angular.module('test').controller('ctrlSubscribe', ['$scope',
    function ($scope) {

      $scope.$on('eventName', function (event, arg) { 
        $scope.receiver = 'got your ' + arg;
      });

}]);

위에서 우리는 두 컨트롤러가 이벤트를 사용하여 서로 메시지를 전달하는 것을 봅니다.이벤트에는 이름이 있고, 고유해야 하며, 그렇지 않으면 가입자가 이벤트를 구분하지 않습니다.이벤트 매개 변수는 자동 생성되지만 때로는 유용한 데이터를 보유하며 메시지는 페이로드입니다.이 예제에서는 문자열이지만 모든 개체가 될 수 있습니다.따라서 통신하고자 하는 모든 데이터를 객체 내부에 넣고 이벤트를 통해 전송하기만 하면 됩니다.

참고:

두 스코프가 서로 직접 상속 라인에 있는 경우 루트 스코프를 이 목적으로 사용하지 않을 수 있으며 이벤트를 알리는 컨트롤러의 수를 제한할 수 있습니다.자세한 설명은 아래와 같습니다.

$rootScope.$emit는 다른 $rootScope 수신자만 사용할 수 있습니다.이것은 모든 $범위가 그것을 얻기를 원하지 않을 때 좋습니다.대부분은 높은 수준의 의사소통입니다.아이들이 들을 수 없도록 어른들이 방에서 서로 이야기하는 것이라고 생각하세요.

$rootScope.$broadcast은 거의 모든 사람들이 들을 수 있도록 하는 방법입니다.이것은 집에 있는 모든 사람들이 그것을 듣도록 저녁 식사가 준비되었다고 부모들이 소리지르는 것과 같은 것일 것입니다.

$scope.$emit는 해당 $scope와 해당 모든 상위 항목 및 $rootScope가 이벤트를 듣기를 원하는 경우입니다.이 아이는 집에서 부모님께 투덜대고 있는 모습입니다. (다른 아이들이 들을 수 있는 식료품점에서는 그렇지 않습니다.구독자의 자식 또는 n번째 자식인 게시자와 통신할 때 사용할 수 있는 바로 가기입니다.

$scope.$broadcast은 $scope 자체와 해당 하위 항목에 대한 것입니다.이 아이는 자신의 박제 동물들에게 부모가 들을 수 없도록 속삭이고 있습니다.

편집: 좀 더 정교한 예를 가진 플랭커로도 충분할 것 같아서 여기서는 간단하게 유지하기로 했습니다.이 정교한 설명이 더 나을 것입니다.

같은 페이지에 있는 두 컨트롤러 간에 데이터를 공유하려면 공장/서비스를 사용할 수 있습니다.Angular 간의 Share(각도 간 데이터 공유)예를 들어 JS 컨트롤러입니다.

그러나 페이지를 다시 로드/새로 고침할 때는 데이터를 로컬 저장소에 저장한 다음 다시 로드할 때 해당 데이터를 읽어야 합니다.그 예는 다음과 같습니다.Angularjs를 사용하여 로컬 스토리지에 데이터를 저장하려면 어떻게 해야 합니까?

이 라이브러리를 확인하세요 https://www.npmjs.com/package/angularjs-store

이를 통해 애플리케이션 상태를 훨씬 더 간단하게 관리할 수 있습니다. 애플리케이션에서 단방향 데이터 흐름이 발생할 수 있기 때문입니다.

언급URL : https://stackoverflow.com/questions/31626360/angularjs-best-practice-for-data-store