AngularJS에서 클라이언트 전용 상태 관리

키 테이크 아웃

AngularJS에서 모델보기는 '애니메이션 시작'및 '애니메이션 엔드'또는 '드래그'및 '드롭'과 같은 클라이언트 전용 상태를 가질 수 있습니다. 이 상태는 Angular의 $ 리소스 서비스를 사용하여보기 모델을 작성하고 저장할 때 관리 할 수 ​​있습니다. 주사 가능한 서비스와 같은 한 곳에서 상태 변경 논리를 캡슐화하면 특히 여러 소비자가있는 응용 프로그램의 경우 코드를 단순화하고 오류를 줄일 수 있습니다. 기능 포장과 같은 기술은 데이터를 저장 및 검색 전후에 다른 일 또는 추가 작업을 수행하는 데 사용될 수 있습니다. 이것은 $ 리소스 서비스의 기능을 향상시킬 수 있습니다 주사 가능한 서비스로보기 모델을 추출하면 응용 프로그램, 특히 복잡한 실시간 업데이트가있는 응용 프로그램을 확장하는 데 도움이 될 수 있습니다. 시청 및 필터링과 같은 기술은 상태 변경을 관리하고 응용 프로그램의 API의 합성 가능성을 향상시키는 데 사용될 수 있습니다.

AngularJS와 같은 JavaScript 프레임 워크에서 모델보기는 서버의 도메인 모델과 다를 수 있습니다. 뷰 모델은 서버에 존재할 필요조차 없습니다. 다음은 뷰 모델이 클라이언트 전용 상태를 가질 수 있습니다 (예 : ‘애니메이션 시작’,‘애니메이션 엔드’또는‘드래그’및‘드롭’. 이 게시물은 Angular의 $ 리소스 서비스를 사용하여보기 모델을 작성하고 저장할 때 상태 변경에 중점을 둘 것입니다. 실제로 $ 리소스 소비자가 매우 쉽습니다 (예 : 아래와 같이 상태를 설정하기위한 컨트롤러

이 접근법은 단일 소비자를 포함하는 응용 프로그램에 적합합니다. 이 코드를 복제하는 지루하고 오류가 여러 소비자에게 얼마나되는지 상상해보십시오! 그러나 우리가 한 곳에서 상태 변경 논리를 캡슐화 할 수 있다면 어떨까요? $ 리소스 서비스

기사 리소스를 주입 가능한 서비스로 끌어 당기는 것으로 시작하겠습니다. 기사가 처음 만들어 졌을 때 가장 사소한 상태 설정을 아무도 추가 해 봅시다.
• .
검색 및 저축은 어떻습니까? 우리는 기사가 $ 리소스 서비스로 소비자에게 나타나기를 원하므로 일관되게 작동해야합니다. John Resig의 훌륭한 책 "JavaScript Ninja의 비밀"에서 배운 기술은 여기에서 매우 유용합니다 - 기능 포장. 다음은 그의 구현이 주사 가능한 각도 서비스로 직접 들어 올려졌습니다.
이것은 우리가 저장을 마무리하고 기사의 방법을 얻고 다음과 함께 전후에 다른/추가로 수행 할 수있게 해줍니다.
• 우리의 컨트롤러는 이것 때문에 더 둔화되기 시작하고 상태가 어떻게 설정되고 있는지 완전히 알지 못합니다. 컨트롤러가 신경 쓰지 않아야하기 때문에 이것은 좋습니다

  angular<span>.module('clientOnlyState.controllers')
  </span>    <span>.controller('ArticleCtrl', function($scope, $resource, ArticleStates /* simple lookup */) {
  </span>        <span>var Article = $resource('/article/:articleId', { articleId: '@id' });
  </span>
          <span>var article = new Article({ id: 1, title: 'A title', author: 'M Godfrey' });
  </span>        article<span>.state = ArticleStates.NONE; // "NONE"
  </span>
          $scope<span>.article = article;
  </span>
          $scope<span>.save = function() {
  </span>            article<span>.state = ArticleStates.SAVING; // "SAVING"
  </span>
              article<span>.$save(function success() {
  </span>                article<span>.state = ArticleStates.SAVED; // "SAVED"
  </span>            <span>});
  </span>        <span>};
  </span>    <span>});</span>

  캡슐화 혜택

  우리는 컨트롤러 외부의 상태 변경을 캡슐화하기 위해 합리적인 길이로 갔지만 어떤 이점을 얻었습니까? 우리의 컨트롤러는 이제 시계 청취자가 이전 및 새로운 상태를 통과하여 메시지를 설정할 수 있습니다. 아래와 같이 로컬 번역을 수행 할 수도 있습니다.

  $ 스코프, 지침 및 필터가 응용 프로그램의 API를 형성하는 순간을 고려하십시오. HTML 뷰는이 API를 소비합니다. API의 합성 가능성이 클수록 재사용 가능성이 커집니다. 필터는 새로운 시청과 오래된 시청에 비해 합성 가능성을 향상시킬 수 있습니다 필터를 통해 구성, 만병 통치약? 다음과 같은 것은 내가 생각한 것입니다. 표현식의 각 부분은 재사용 가능합니다

  각도 1.3에서 필터는 $ Stateful 속성을 사용할 수 있지만 각도는 입력 매개 변수의 값에 따라 필터를 호출 한 결과를 캐시 할 수 없으므로 사용이 강력하게 낙담합니다. 따라서 우리는 상태의 매개 변수를 Limittotransition (이전 상태)으로 전달하고 번역 (사용 가능한 번역)을 통과시킬 것입니다.

  이 때문에 우리는 기사에 대한 약간의 수정안이 필요합니다 :

  최종 결과는 예쁘지는 않지만 여전히 매우 강력합니다.

  angular<span>.module('clientOnlyState.services')
  </span>    <span>.factory('Article', function($resource<span>, ArticleStates</span>) {
  </span>
          <span>var Article = $resource('/article/:articleId', { articleId: '@id' });
  </span>
          <span>// Consumers will think they're getting an Article instance, and eventually they are...
  </span>        <span>return function(data) {
  </span>            <span>var article = new Article(data);
  </span>            article<span>.state = ArticleStates.NONE;
  </span>            <span>return article;
  </span>        <span>}
  </span>    <span>});</span>

  우리의 컨트롤러가 다시 더 희박 해집니다. 특히 번역이 주사 가능한 서비스로 분리 될 수 있다고 생각하면 :
  결론 주사 가능한 서비스로보기 모델을 추출하면 응용 프로그램을 확장 할 수 있습니다. 이 게시물에 제공된 예는 의도적으로 간단합니다. 통화 쌍을 거래 할 수있는 응용 프로그램을 고려하십시오 (예 : GBP에서 USD, EUR에서 GBP 등). 각 통화 쌍은 제품을 나타냅니다. 이러한 애플리케이션에는 수백 개의 제품이있을 수 있으며 각 제품은 실시간 가격 업데이트를받습니다. 가격 업데이트는 현재 가격보다 높거나 낮을 수 있습니다. 응용 프로그램의 한 부분은 연속으로 두 번 더 높아진 가격에 관심을 가질 수 있지만 다른 부분은 방금 낮은 가격에 관심을 가질 수 있습니다. 이러한 가격 변화 상태를 지켜 볼 수 있으면 응용 프로그램의 다양한 소비 부분을 크게 단순화합니다. 나는 오래된 값과 새로운 값, 필터링을 기반으로 시청하는 대체 방법을 제시했습니다. 둘 다 전적으로 수용 가능한 기술입니다. 실제로이 게시물을 조사하기 시작했을 때 내가 생각했던 것입니다. 필터링은 완료 후 근처에서 확인 된 잠재적 개선이었습니다 내가 제시 한 기술이 각도 앱을 확장하는 데 도움이되는지보고 싶습니다. 모든 피드백은 의견에 크게받을 것입니다!

  이 게시물을 조사하는 동안 생성 된 코드 샘플도 Github에서도 사용할 수 있습니다. angularjs에서 클라이언트 상태 관리에 대해 자주 묻는 질문 angularjs에서 클라이언트 상태를 관리하는 데 $ StateProvider의 역할은 무엇입니까?

  $ StateProvider는 AngularJS에서 클라이언트 상태를 관리하는 데 중요한 역할을합니다. 응용 프로그램의 상태를 정의 할 수있는 서비스입니다. 각 상태는 전체 UI 및 내비게이션 측면에서 응용 프로그램의 "장소"에 해당합니다. $ StateProvider는 API를 제공하여 다른 뷰를 라우팅합니다. 상태가 활성화되면 Resolve 속성을 통해 일련의 데이터 세트를 해결할 수 있습니다. 이 데이터는 컨트롤러에 주입됩니다.

  angularjs에서 상태를 관리하는 가장 좋은 방법은 무엇입니까?

  AngularJS에서 상태를 관리하는 가장 좋은 방법은 응용 프로그램의 특정 요구에 따라 다릅니다. 그러나 UI-Router를 사용하는 것은 개발자 중에서 인기있는 선택입니다. UI-Router는 상태 관리를위한 유연하고 강력한 솔루션을 제공하는 타사 모듈입니다. 중첩 뷰와 여러 이름의 뷰가 허용되며, 더 큰 응용 프로그램에서 매우 유용 할 수 있습니다.

  UI- 로터는 AngularJS의 기본 라우팅 시스템과 어떻게 다릅니 까? AngularJS의 기본 라우팅 시스템에 대한보다 강력하고 유연한 대안. 기본 라우터는 경로를 사용하여 상태를 관리하지만 UI-Router는 상태를 사용하여 계층 적으로 중첩되고 구성 할 수 있습니다. 이것은 여러 뷰와 중첩 상태를 가진보다 복잡한 애플리케이션을 허용합니다.

  대규모 AngularJS 애플리케이션에서 주정부 관리가 중요한 이유는 무엇입니까?

  주 관리는 대규모 AngularJS 응용 프로그램에서 중요합니다. 사용자 인터페이스의 일관성과 예측 가능성을 유지하십시오. 적절한 상태 관리가 없으면 변경 사항을 추적하고 응용 프로그램의 동작을 관리하는 것이 점점 어려워 질 수 있으며 버그와 사용자 경험이 좋지 않습니다.

  angularjs의 상태 개념을 설명 할 수 있습니까?

  . AngularJS에서 상태는 특정 시점에서 시스템의 상태 또는 응용 프로그램을 말합니다. 여기에는 사용자 인터페이스 상태, 데이터 모델 값 등과 같은 다양한 것들이 포함될 수 있습니다. 상태는 UI 뷰를 정의하는 데 사용되며 계층 적으로 중첩되고 구성 될 수 있습니다. 각 상태는 전체 UI 및 내비게이션 측면에서 응용 프로그램의 "장소"에 해당합니다.

  $ StateProvider의 Resolve 속성을 어떻게 사용할 수 있습니까?

  $ StateProvider의 Resolve 속성은 다음과 같습니다. 상태가 활성화되기 전에 데이터 세트를 해결하는 데 사용됩니다. 그런 다음이 데이터는 컨트롤러에 주입됩니다. Resolve 속성은 키 값 쌍이 포함 된 객체입니다. 핵심은 컨트롤러에 주입되는 종속성의 이름이며, 값은 종속성의 값을 반환하는 함수입니다. angularjs에서 상태 관리에 UI- 라우터를 사용하면 어떤 이점이 있습니까?

  ui-router는 AngularJS의 상태 관리에 몇 가지 이점을 제공합니다. 중첩 된 뷰와 여러 이름의 뷰를 허용하므로 더 큰 응용 프로그램에서 매우 유용 할 수 있습니다. 또한 Angularjs의 기본 경로 기반 라우팅보다 유연하고 강력한 상태 기반 라우팅을 제공합니다.

  angularjs에서 상태간에 전환하는 방법
  상태간에 전환 할 수 있습니다. $ state.go () 메소드를 사용하는 AngularJs에서. 이 방법은 상태의 이름을 첫 번째 인수로, 그리고 매개 변수의 선택적 객체를 두 번째 인수로 간주합니다. 매개 변수 객체를 사용하여 데이터를 전환하는 상태로 전달할 수 있습니다. 그러나 응용 프로그램이 복잡 해짐에 따라 UI- 로터와 같은 도구를 사용하지 않으면 상태 관리가 점점 어려워 질 수 있습니다. 상태 관리 도구를 사용하면 응용 프로그램의 사용자 인터페이스의 일관성과 예측 가능성을 유지하는 데 도움이 될 수 있습니다. AngularJS에서 상태를 관리하는 데있어 몇 가지 일반적인 과제는 무엇입니까?
  angularjs에 상태를 관리 할 때 일반적인 과제는 포함됩니다. 사용자 인터페이스의 일관성 유지, 응용 프로그램 상태의 변경 사항 추적 및 응용 프로그램의 동작 관리. 이러한 과제는 UI-Router와 같은 주 관리 도구를 사용하여 완화 할 수 있습니다.

위 내용은 AngularJS에서 클라이언트 전용 상태 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!