데이터 스토어로 $rootScope를 사용하는 AngularJS

데이터 스토어로 $rootScope를 사용하는 AngularJS

내 앵글에 대한 아이디어가 있어JS앱과 저는 Angular가JS 커뮤니티는 이런 식으로 해도 괜찮다고 생각합니다.즉, 데이터 API에 접속하여 페이지에 결과를 표시하는 것입니다.

Angular를.에 $rootScope.DataStoreAPI 엔드포인트에서 반환된 데이터로 DataStore를 업데이트하는 서비스 방법도 있습니다.에서 "하면 "products" API가 사용됩니다.DataStore.update('products') 됩니다.$rootScope.DataStore.products제 제품 데이터를 가지고요.

할 일은 "/"라고만 하면 .ng-repeat="product in DataStore.products"어떤 컨트롤러 범위에 속해있든 상관없습니다.입니다.

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

이우, 이 에 부하가 너무 요?$rootScope다이제스트 사이클, 아니면 그냥 이상한 방법인가요?:) : : : : : : : : : : : 。

이 질문은 Angular에서 해결됩니다.JS FAQ는 다음과 같습니다.

앱 전체에 대해 글로벌하게 만들고 싶은 데이터가 있을 수 있습니다.이 경우 $rootScope를 삽입하고 다른 스코프와 마찬가지로 값을 설정할 수 있습니다.스코프는 루트 스코프로부터 상속되기 때문에 이러한 값은 로컬 $scope 값과 마찬가지로 ng-show 등의 디렉티브에 부가된 식에 사용할 수 있습니다.

팀에서는 이 시스템을 사용하는 것을 권장하고 있는 것 같습니다.$rootScope해서.

물론 글로벌 상태는 좋지 않기 때문에 $rootScope는 (바람직하게) 모든 언어로 글로벌 변수와 함께 사용할 수 있도록 신중하게 사용해야 합니다.특히 코드에는 사용하지 말고 데이터에만 사용하십시오.$rootScope에 함수를 배치하고 싶다면 필요한 곳에 삽입하여 보다 쉽게 테스트할 수 있는 서비스를 제공하는 것이 좋습니다.

반대로, 데이터의 비트를 저장하고 되돌리는 것이 인생의 유일한 목적인 서비스를 만들지 마십시오.

하면 이은, this, this this this this this this 에 큰 부하가 .$digest사이클(데이터 변환 테스트에 기본적인 더티 체크를 실장)을 실시합니다.이 방법은 이상한 방법이 아닙니다.

편집: 퍼포먼스에 대한 자세한 내용은 Misko(각도)의 답변을 참조하십시오.JS dev) 여기 SO: AngularJS에서 데이터 바인딩은 어떻게 작동합니까?특히 퍼포먼스에 관한 항에 주의해 주세요.

모든 당사자를 만족시키기 위해 $cacheFactory를 사용하면 됩니다.이를 통해 데이터 요청 서비스를 상태 비저장 상태로 만들 수 있으며 기본적으로는 getter 및 setter에 불과합니다.$rootScope 또는 서비스 내 속성으로 데이터를 보관하는 것은 편리하지만 잘못된 것 같습니다.$cacheFactory를 사용하는 것도 매우 간단합니다.

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

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

js 파일을 app.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');

제 경험으로는 $rootScope를 사용하여 모든 ngViews에서 공통적인 데이터 모델 부분을 앱에 저장하는 것이 가장 편리한 방법입니다.

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

보다 읽기 쉽고 짧습니다.

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

Javascript와 함께

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가 더 좋습니다.

rootScope를 사용해야 하는 이유를 잘 모르겠습니다.서비스 인스턴스의 라이프 타임은 애플리케이션 전체이기도 합니다.따라서 사용하고 있는 데이터 스키마/시멘틱스도 서비스 자체에 바로 저장하여 컨트롤러 간에 공유할 수 있습니다.그러나 이러한 방법 중 하나는 로컬 스토리지를 사용하는 것과 같은 업데이트/교체를 지속할 수 없습니다.

나머지는 짐 싣는 게 게으른 접근처럼 들리네요.리모트로부터 데이터를 로드하고, 이미 캐시되어 있는 경우는 반환하고, 캐시되어 있지 않은 경우는 반환하는 것은 서비스뿐입니까?제가 그 부분을 정확히 이해한다면 좋은 패턴입니다.

edit: 여기에서는 느린 로드에 대해서도 비슷한 접근방식을 취하고 있습니다.캐시는 서비스 자체에 있습니다.

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"));
            },                
        };
    })

저도 같은 문제에 직면해 있습니다.글로벌하게 이용할 수 있는 「장소」를 보존하는 것은 적절한 방법이라고 생각합니다만, $rootScope는 이상적인 장소가 아닙니다.

좀 더 알아보고 있습니다.데이터를 $rootScope에 저장하는 것이 아니라, 여기서 설명하는 것과 같이, 「서비스」를 사용해 데이터를 관리하는 것을 검토해 주세요(특히 마지막 코드 예).http://joelhooks.com/blog/2013/04/24/modeling-data-and-state-in-your-angularjs-application/

그런 다음 이러한 접근 방식을 사용하여 작성하는 "서비스"에서는 데이터를 메모리, cacheFactory, 로컬 스토리지(여기에 언급) 및/또는 DB(예: AJAX)에 저장할지 여부에 관계없이 앱의 요구 사항에 따라 달라집니다.또한 데이터를 저장하는 방법을 필요에 따라 개별적으로 변경할 수도 있습니다.

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