스마트 프론트 엔드 및 멍청한 백엔드 : AngularJS의 지속 상태

웹 사이트와의 사용자 상호 작용은 응용 프로그램 상태를 생성합니다 (예 : 버튼 클릭 또는 텍스트 입력). 브라우저의 RAM에 자바 스크립트 객체 (배열, 문자열 등)로 상주하는이 상태는 지속성이 필요합니다. 이 기사는 일시적 데이터와 필수 데이터를 구별하는이 상태를 지속시키는 기술을 탐구합니다. 주요 개념 :

Angularjs의 상태 지속성 :

페이지에서 사용자 데이터 및 응용 프로그램 설정 유지 페이지 새로 고침 및 응용 프로그램 재시작. 단일 페이지 응용 프로그램 (SPA)에 필수적입니다

지속성을위한 방법 : Angularjs는 본질적으로 상태 지속성을 지원하지 않습니다. 쿠키, 로컬 스토리지 및 세션 스토리지와 같은 방법이 사용됩니다. 이 매장 데이터 클라이언트 측면에서 페이지 새로 고침 후에도 검색합니다. 데모 응용 프로그램 : 첨부 된 데모는 를 사용합니다. 앱로드에서 저장된 데이터를 검색하거나 샘플을 생성합니다. 입력 필드 블러에서 편집이 저장됩니다 스마트 프론트 엔드, 멍청한 백엔드 :

이 기사는 백엔드가 동기화 서버 역할을하는 디자인을 옹호하여 간단한 저장 작업을 처리합니다. 복잡한 비즈니스 로직은 프론트 엔드에 있으며 오프라인 우선 경험이 가능합니다. 이 접근법은 백엔드 기술 불가지론, 가용성 우선 순위, 백업 및 속도를 증가시킵니다.

• 시작하기 : 임시 데이터 분리 임시 키가있는 객체 배열을 고려하십시오. 이 임시 키는 지속되지 않아야합니다. 이 예제는 AngularJS 앱을 사용하여 밑줄 접두사가있는 임시 키를 표시합니다. 초기 html :
초기 JavaScript :
• 현지 스토리지에서 지속 상태 (예 : TODO 목록)를 유지하려면 데이터를 선택적으로 저장해야합니다. 임시 속성 (예 : )은 재생 될 수 있습니다. 단순한 는 원치 않는 데이터를 저장하기 때문에 충분하지 않습니다. 딥 카피와 데이터 필터링이 필요합니다
는 AngularJS의 를 제거 할 수 있습니다. 를 사용하면 생성을 방지합니다 강화 된 데모 응용 프로그램 : 주간 로그 더 실용적인 데모는 매주 로그로 매일 텍스트 입력을 허용합니다. HTML에는 입력 필드가 포함되어 있으며 localStorage를 사용하여 저장을 트리거합니다. JavaScript는 데이터 준비, 깊은 복제, 필터링 및 지속성을 처리합니다. 결론 : 프론트 엔드 및 백엔드 개발의 미래
• 이 접근법은 확장 가능하고 현실적입니다. 트렌드는 더 똑똑한 프론트 엔드와 더 간단한 백엔드를 향한 것입니다. 백엔드는 동기화 서버가되어 데이터 저장을 처리하고 프론트 엔드는 복잡한 비즈니스 로직을 관리합니다. 이를 통해 오프라인 우선 응용 프로그램을 가능하게하고 백엔드 기술 유연성을 향상시킵니다. 데모는 를 사용하지만 Kinto, PouchDB 또는 Firebase와 같은 대안을 쉽게 대체합니다. 자주 묻는 질문 (FAQ) : (이 섹션은 유용한 추가이며 역설에 대한 상당한 재 작성이 필요하지 않기 때문에 입력에서 크게 변경되지 않았습니다.)

  localStorage angularjs에서 지속 상태의 중요성은 무엇입니까?

  angularjs의 지속 상태는 페이지가 새로 고침되거나 응용 프로그램이 다시 시작된 후에도 사용자 데이터 또는 응용 프로그램 설정을 유지하는 데 중요합니다. 이것은 다른 관점에서 국가를 유지 해야하는 단일 페이지 응용 분야에서 특히 중요합니다. 상태 지속성이 없으면 사용자가 입력 한 데이터 또는 변경 사항이 페이지에서 새로 고침되거나 탐색 할 때 손실되어 사용자 경험이 열악하게됩니다. . (FAQ 섹션의 나머지 부분은 이미 잘 쓰여지고 유익하기 때문에 비슷하게 이어집니다.)

위 내용은 스마트 프론트 엔드 및 멍청한 백엔드 : AngularJS의 지속 상태의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!