$ rootScope를 데이터 저장소로 사용하는 AngularJS

$ rootScope를 데이터 저장소로 사용하는 AngularJS

---

AngularJS 앱에 대한 아이디어가 있고 AngularJS 커뮤니티가 이런 식으로 수행해도 괜찮다고 생각하는지 궁금합니다.

간단히 말해, 데이터 API에 연결하고 페이지에 결과를 표시합니다. $ rootScope.DataStore에 데이터 저장소를 만드는 각도 서비스를 만들었습니다. 또한 API 엔드 포인트에서 반환 된 데이터로 DataStore를 업데이트하는 서비스 메서드가 있습니다. DataStore.update ( 'products')를 사용하여 컨트롤러 내부에서 "products"API 엔드 포인트를 요청하면 $ rootScope.DataStore.products가 내 제품 데이터로 업데이트됩니다. 이제보기 / 부분에서 내 데이터를 표시하기 위해 ng-repeat = "product in DataStore.products"라고 말하면됩니다. 컨트롤러 범위는 중요하지 않습니다. 따라서 본질적으로 내 DataStore 나의 유일한 진실의 근원입니다.

이 방법에서 얻은 느낌은 의미론을 따르기 쉽고 컨트롤러 코딩을 최소화하는 것입니다. 따라서 DataStore가 업데이트 될 때마다 DataStore에 바인딩 된 모든 항목도 업데이트됩니다.

이것은 $ rootScope 다이제스트 사이클에 너무 많은 부하를가할까요, 아니면 그냥 이상한 방법일까요? 아니면 완전히 멋진 방법입니까? :) 모든 의견을 환영합니다.

---

이 질문은 여기에 인용 된 AngularJS FAQ 에서 다룹니다 .

때때로 전체 앱에 전역으로 만들려는 데이터가 있습니다. 이를 위해 $ rootScope를 주입 하고 다른 범위와 마찬가지로 값을 설정할 수 있습니다 . 범위는 루트 범위에서 상속되기 때문에 이러한 값은 로컬 $ scope의 값과 마찬가지로 ng-show와 같은 지시문에 연결된 식에서 사용할 수 있습니다.

팀은 $rootScope다음과 같은 경고와 함께 이러한 방식으로 사용하도록 권장하는 것 같습니다 .

물론 전역 상태는 좋지 않으며 모든 언어에서 전역 변수와 함께 사용하는 것처럼 $ rootScope를 조금만 사용해야합니다. 특히 코드에는 사용하지 말고 데이터에만 사용하세요. $ rootScope에 함수를 추가하고 싶다면, 필요한 곳에 삽입 할 수 있고 더 쉽게 테스트 할 수있는 서비스에 함수를 넣는 것이 거의 항상 좋습니다.

반대로, 삶의 유일한 목적이 데이터 비트를 저장하고 반환하는 서비스를 만들지 마십시오.

이것은 $digest주기 에 너무 많은 부하를주지 않으며 (데이터 변형을 테스트하기 위해 기본적인 더티 검사를 구현 함) 일을하는 이상한 방법이 아닙니다.

편집 : 성능에 대한 자세한 내용은 Misko (AngularJS dev)의 답변을 참조하십시오 .AngularJS에서 데이터 바인딩은 어떻게 작동합니까? 특히 성능 섹션을 참고하십시오.

---

모든 당사자를 달래기 위해 $ cacheFactory를 사용하면 안됩니다. 이를 통해 데이터 요청 서비스가 상태 비 저장이되고 기본적으로 getter 및 setter 만 가능합니다. 나는 $ rootScope에 데이터를 보관하거나 서비스의 속성이 편리하지만 잘못된 느낌을 받는다는 것을 인정합니다. $ cacheFactory를 사용하는 것도 매우 쉽습니다.

먼저 캐시 서비스를 만듭니다.

angular.module('CacheService', ['ng'])
    .factory('CacheService', function($cacheFactory) {
    return $cacheFactory('CacheService');
});

app.js에 js 파일을 포함시킨 다음 앱 선언에 삽입합니다.

var MyApp = angular.module('MyApp', ['CacheService']);

서비스에 주입하고 다음과 같이 사용하십시오.

'use strict'

MyApp.factory('HackerNewsService', function(CacheService) {
    return {
        getNews: function(key) {
            var news = CacheService.get(key);

            if(news) {
                return news;
            }

            return null;
        },
        setNews: function(key, value) {
            CacheService.put(key, value);
        },
        clearNews: function(key) {
            CacheService.put(key, '');
        }
    };
});

이제 컨트롤러에 HackerNewsService를 삽입하고 우리가 만든 메서드를 호출하여 사용하면됩니다. 예를 들면 :

HackerNewsService.setNews('myArticle', {headline: 'My Article', body: 'This is the body'});
$scope.article = HackerNewsService.getNews('myArticle');

---

내 경험은 내 앱의 모든 ngView에 공통되는 데이터 모델의 일부를 저장하기 위해 $ rootScope를 사용하는 것이 가장 편리한 방법이라는 것입니다.

<div>{{mymodel.property}}</div>

나에게 더 읽기 쉽고 짧습니다.

<div>{{getPropertyModel()}}</div>

자바 스크립트로

app.factory('MyModel', function(){
    return {
        getModel: function() { ... },
        setModel: function(m) { ... },
    }
});

app.controller('ctrl', ['$scope', 'MyModel', function($scope, MyModel){
    $scope.getPropertModel = function() {
        return MyModel.getModel().property;
    };
}]);

서비스 또는 캐시 팩토리를 사용하는 경우 html 템플릿의 모델에 대한 모든 액세스는 함수가되며 이는 rootScope의 속성에 액세스하는 것보다 읽기 어렵습니다. $ rootScope를 사용하면 코드가 줄어들고 결과적으로 오류와 테스트가 줄어 듭니다.

물론 모든 ngView의 공통 부분 만 $ rootScope에 저장됩니다. 나머지 모델은 로컬 $ scope에 저장됩니다.

함수에 대한 감시는 객체 속성보다 느립니다. 따라서 성능면에서 $ rootScope도 더 좋습니다.

---

I guess I'm not sure why you need to use the rootScope? The lifetime of a service instance is the entire application as well, so whatever data schema / semantics you are using could also be stashed right in the service itself and it would be shared across controllers. Either of those methods however don't survive refresh like using local storage would.

The rest of it sounds like a lazy loading approach. Where the service is the only thing "aware" of whether the data has been loaded from the remote and returns it if it is already cached and caches and returns it if its not? If I understand that part correctly its a good pattern.

edit: Here I am taking a similar approach to the lazy loading, notice the cache is just in the service itself:

angular.module('HN_Reddit_Mashup.Services', [])
    .factory('HackerNews', function($http) {
        var HackerNewsCache = {};
        return {
            get: function(url) {
                return HackerNewsCache[url] ||
                    (HackerNewsCache[url] = $http.jsonp("http://api.thriftdb.com/api.hnsearch.com/items/_search?q=" + url +     "&callback=JSON_CALLBACK"));
            },                
        };
    })

---

I am just facing the same issue, and it seems to me that storing it ion globally available 'location' is the right approach, but that $rootScope is not the ideal place.

I have just been researching this more, and instead of storing your data on $rootScope, you could consider using a "service" to manage your data / separate concerns, as described here (especially the last code example): http://joelhooks.com/blog/2013/04/24/modeling-data-and-state-in-your-angularjs-application/

Then in the "service" you create using that approach, whether you save the data in memory, cacheFactory, localstorage (as alluded to here), and/or to your DB (eg. via AJAX), is up to whatever suits the needs of your app. It also means changes to how you store your data can be made independently, as required.

참고URL : https://stackoverflow.com/questions/16739084/angularjs-using-rootscope-as-a-data-store