Angular.js의 모델 상태를 저장할 위치

Angular.js의 모델 상태를 저장할 위치

Angular의 모델 사용법이 혼란스럽네요.Angular는 모형이 원하는 모든 것이 될 수 있다는 접근 방식을 취하는 것 같습니다. 즉, I.E.Angular에는 명시적 모델 클래스가 포함되지 않으며 vanilla JavaScript 개체를 모델로 사용할 수 있습니다.

지금까지 본 거의 모든 Angular 예에서 모델은 사실상 오브젝트입니다.수작업으로 작성되거나 리소스를 통해 API 호출에서 반환됩니다.지금까지 살펴본 거의 모든 Angular 예는 단순하기 때문에 일반적으로 컨트롤러의 $scope에 저장된 모델 데이터 및 선택과 같은 모델에 관련된 모든 상태도 컨트롤러의 $scope에 저장됩니다.이것은 간단한 앱/예에서는 잘 작동하지만, 앱이 복잡해지면 지나치게 단순해지는 것처럼 보입니다.된 모델 . "A storing storeing the " (컨트롤러 저장 시 컨텍스트가 변경될 수 있습니다.) 이치노selectedGallery ★★★★★★★★★★★★★★★★★」selectedPhoto합니다.selectedImage 이에요.selectedPhoto은 이할 수 있지만 의 관점에서 보면됩니다.이러한 상황에서는 갤러리당 컨트롤러를 사용하면 이 문제가 무효가 될 수 있지만 UI 관점에서 보면 낭비적이고 부적절하고 불필요하게 보일 수 있습니다.

Angular의 모델 정의는 서버와 클라이언트 간에 전달되는 멍청한 객체인 VO/DTO에 가까운 것 같습니다.이러한 오브젝트를 모델이라고 생각되는 것, 즉 DTO/VO(선택 등)와 관련된 상태를 유지하고, DTO/VO를 조작하기 위해 필요한 변이자를 제공하며, 기본 데이터에 대한 변경 사항을 나머지 애플리케이션에 통지하는 클래스로 묶는 것이 나의 본능입니다.분명히 이 마지막 부분은 Angular의 바인딩에 의해 잘 처리되지만, 처음 두 가지 책임에 대해서는 여전히 강력한 사용 사례가 보입니다.

그러나 지금까지 살펴본 예에서 이 패턴을 사용한 적은 없지만 확장 가능한 대안으로 간주할 수 있는 것은 본 적이 없습니다.Angular는 Singleton을 적용함으로써 서비스를 모델로 사용하는 것을 암묵적으로 권장하지 않는 것 같습니다(이 문제를 회피할 수 있는 방법이 있다는 것은 알지만 널리 사용되거나 승인되지 않은 것 같습니다).

그러면 모델 데이터에 대한 상태를 어떻게 유지해야 할까요?

[편집] 이 질문의 두 번째 답변은 흥미롭고 현재 사용하고 있는 것에 가깝습니다.

상태(및 모델)는 $scope로 저장됩니다.

$scope는 Angular의 데이터 스토리지 객체입니다.데이터베이스와 비슷합니다.$190 자체는 모델이 아니지만 $190으로 모델을 저장할 수 있습니다.

각 $scope에는 상위 $scope가 있으며, 최대 $rootScope는 DOM을 느슨하게 미러링하는 트리 구조를 형성합니다.ng-controller 등 새로운 $scope가 필요한 디렉티브를 호출하면 새로운 $scope 객체가 생성되어 트리에 추가됩니다.

$140개의 개체가 프로토타입 상속을 사용하여 연결됩니다.즉, 트리의 상위 수준에서 모형을 추가하면 모든 하위 수준에서 모형을 사용할 수 있습니다.이것은 $scope 계층을 템플릿 작성자에게 거의 투과적으로 만드는 매우 강력한 기능입니다.

컨트롤러가 $scope를 초기화

컨트롤러의 목적은 $scope를 초기화하는 것입니다.동일한 컨트롤러로 페이지의 다른 부분에서 많은 $scope 객체를 초기화할 수 있습니다.컨트롤러가 인스턴스화되어 $scope 객체를 설정한 후 종료됩니다.동일한 컨트롤러를 사용하여 페이지의 다른 부분에서 많은 $scope를 초기화할 수 있습니다.

이미지 갤러리의 경우 ng 컨트롤러 디렉티브를 사용하여 갤러리가 되고 싶은 DOM의 모든 부분에 imageGallery 컨트롤러를 적용합니다.페이지의 이 부분에서는, 독자적인 $scope를 취득해, 선택한 것을 보존하기 위해서 사용합니다.포토 어트리뷰트

시제품 범위

$scope는 기본 프로토타입 상속을 $rootScope까지 사용하여 부모로부터 상속되므로 계층 내 어디에나 개체를 저장할 수 있습니다.현재 DOM과 대략적으로 관련된 $scope 객체의 트리를 얻을 수 있습니다.DOM 이 변경되면 필요에 따라 새로운 $scope 객체가 생성됩니다.

$scope는 단순한 JavaScript 객체입니다.여러 개의 $scope 개체를 생성하는 것은 여러 개의 current Image 개체를 포함하는 어레이를 생성하는 것보다 더 큰 낭비가 아닙니다.코드를 정리하는 현명한 방법입니다.

이러한 방법으로 Angular는 JavaScript에서 흔히 볼 수 있는 오래된 "데이터 저장 장소" 문제를 해결합니다.이는 Angular에서 얻을 수 있는 매우 큰 생산성 향상의 원천 중 하나입니다.

글로벌 데이터(예: userId)를 입수하고 있습니까?$rootScope에 저장합니다.로컬 데이터(갤러리 인스턴스가 여러 개 있는 갤러리의 현재 이미지 등)가 있습니까?갤러리의 $scope 객체에 저장합니다.

$190은 템플릿의 올바른 부분에서 자동으로 사용할 수 있습니다.

각도 모델은 얇습니다.

뚱뚱한 모델과 마른 컨트롤러를 강조하는 Rails의 배경에서, Angular의 '거의 없는' 모델들이 놀랍다는 것을 알게 되었습니다.실제로 많은 비즈니스 로직을 모델에 포함시키면 문제가 발생하는 경우가 많습니다. Rails의 사용자 모델에서는 주의하지 않으면 유지보수가 불가능해질 때까지 증가하는 경우가 있습니다.

각도 모델은 단순히 JavaScript 객체 또는 프리미티브입니다.

모든 객체가 모델이 될 수 있습니다.모델은 일반적으로 컨트롤러의 JSON을 사용하거나 서버에서 AJAX를 사용하여 정의됩니다.모델은 JSON 개체이거나 문자열, 배열 또는 숫자일 수 있습니다.

물론 모델에 추가 기능을 추가하여 JSON 오브젝트에 저장하는 것을 막을 수는 없지만, 이는 Angular에 맞지 않는 패러다임으로 전환됩니다.

각도 객체는 일반적으로 함수가 아닌 데이터의 저장소입니다.

프런트 엔드의 모델은 실제 모델이 아닙니다.

물론 클라이언트에 있는 모델은 실제 모델이 아닙니다.실제 모델, 즉 진실의 단일 소스가 서버에 존재합니다.API를 사용하여 동기화하지만, 두 가지 사이에 충돌이 있을 경우 데이터베이스 내의 모델이 확실히 승리합니다.

이것은 할인 코드 등의 프라이버시를 제공합니다.프런트 엔드에 있는 모델은 실제 모델의 공용 속성에 대한 동기화된 버전이며, 이는 원격입니다.

비즈니스 로직은 서비스에서 사용할 수 있습니다.

예를 들어 모델에 작업을 수행하거나 동기화하거나 검증하는 방법을 작성하려고 합니다.다른 프레임워크에서는 이 방법을 사용하여 모델을 확장하고 싶을 수 있습니다.각도에서는 서비스를 작성할 가능성이 더 높습니다.

서비스는 싱글톤 객체입니다.다른 JavaScript 객체와 마찬가지로 함수나 데이터를 넣을 수 있습니다.Angular에는 $http와 같은 많은 서비스가 포함되어 있습니다.독자적인 것을 구축해, 의존성 주입을 사용해 자동적으로 컨트롤러에 제공할 수 있습니다.

서비스에는 예를 들어 RESTful API와 통신하는 메서드, 데이터 검증, 기타 필요한 작업이 포함될 수 있습니다.

서비스는 모델이 아닙니다.

물론 서비스를 모델로 사용해서는 안 됩니다.그것들을 일을 할 수 있는 물건으로 사용하세요.때때로 그들은 당신의 모델에 뭔가를 합니다.생각은 다르지만 실행 가능한 방법입니다.

우선 Angular는 웹 기반 프레임워크이며 오브젝트 내에서만 "상태를 유지"하면 사용자가 브라우저에서 새로 고침을 눌러도 살아남을 수 없습니다.따라서 웹 기반 응용 프로그램에서 모델 데이터 상태를 유지하는 방법은 브라우저 환경에서 코드가 작동하도록 모델을 유지하는 방법을 파악하는 것입니다.

각도는 다음을 사용하여 상태를 유지하기가 매우 쉽습니다.

1. RESTful $리소스 호출
2. 모델의 인스턴스를 나타내는 URL

간단한 예에서는 다음과 같은 사용자 작업 저장selectedGallery ★★★★★★★★★★★★★★★★★」selectedPhoto는, 다음과같은 를 수 있습니다.

// List of galleries
.../gallery

// List of photos in a gallery
.../gallery/23

// A specific photo
.../gallery/23/photo/2

가 "URL"을 사용하여 할 수 때문에 합니다.back ★★★★★★★★★★★★★★★★★」forward버튼을 클릭합니다.이 상태를 애플리케이션의 다른 부분과 공유하고 싶은 경우, 웹 애플리케이션은 쿠키/localStorage, 숨겨진 프레임/필드 또는 서버에 저장하기 위한 다양한 방법을 제공합니다.

하면, 에서를 사용하여 를 쉽게 할 수 ..service 「」를 경유하는 ..factory.

Angular는 소위 "모델 개체"를 저장하는 방법에 대한 의견이 없습니다. " " "$scopeUI를 "보기 합니다.당신의 코드에서 이 두 가지 개념을 분리할 것을 제안합니다.

변경 Angular Scope)의 정밀도를 경우.$watch원하는 경우 스코프 개체를 사용하여 모델 데이터를 저장할 수 있습니다.var myScope = $rootScope.$new()UI가 바인딩된 범위 개체와 동일한 범위 개체를 사용하지 마십시오.

이를 위해 커스텀 서비스를 작성할 것을 권장합니다.데이터 흐름은 다음과 같습니다.

AJAX --> 커스텀 서비스 --> 모델 스코프 오브젝트 --> 컨트롤러 --> UI 스코프 오브젝트 --> DOM

또는 다음과 같습니다.

AJAX --> 커스텀서비스 --> 플레인오래된 JavaScript 오브젝트 --> 컨트롤러 --> UI 스코프 오브젝트 --> DOM

언급URL : https://stackoverflow.com/questions/16607874/where-should-model-state-be-stored-in-angular-js