AngularJS를 사용한 SPA



이 블로그 게시물은 AngularJS를 사용하여 SPA를 구축하는 방법에 대한 간략한 소개입니다. 앱에 SPA 구성 요소를 통합하는 데 필요한 정보로 무장하려고합니다.

오늘날 AngularJS는 주로 개발자가 SPA (단일 페이지 응용 프로그램)를 쉽게 만들 수 있도록 지원하는 기능으로 인해 가장 인기있는 개발 프레임 워크 중 하나가되었습니다. 전통적인 웹 애플리케이션에서 클라이언트 (브라우저)는 페이지를 요청하여 서버와 통신 채널을 시작합니다. 서버는 요청을 처리하고 페이지의 HTML을 클라이언트로 다시 전송하여 응답합니다. 사용자가 새 페이지를 요청하면 서버는 다른 HTML 페이지를 보냅니다. 클라이언트가 기본 세부 사항이있는 양식과 같이 작은 변경을 요청하더라도 전체 페이지는 서버에 의해 다시로드되고 클라이언트로 다시 전송되어야합니다.

HTML 및 Ajax 요청

단일 페이지 애플리케이션에서는 전체 페이지가 한 번에로드되고 후속 통신은 Ajax 요청을 사용하여 서버에서 수행됩니다. 브라우저는 변경된 페이지 부분 만 업데이트하면되며 사용자가 새 요청을 할 때마다 전체 페이지를 다시로드 할 필요가 없습니다.
SPA 접근 방식은 서버가 사용자 요청에 응답하는 데 걸리는 시간을 줄이므로 웹 응용 프로그램이 더 빠르게 실행되고 컴퓨팅 성능이 낮아지며 UI (사용자 인터페이스) 개발자가보다 매력적이고 민첩한 웹 페이지를 만들 수 있습니다.





셸 페이지 생성

SPA의 '단일 페이지'는 HTML, CSS 또는 JavaScript 형식의 쿼리에 응답하는 셸 페이지를 의미합니다. 셸 페이지는 HTML을 사용하여 비동기 적으로 렌더링되므로 서버로 앞뒤로 이동할 필요가 없습니다. 셸 페이지에는 AngularJS JavaScript 라이브러리에 대한 참조와 ng-view 지시문 (UI 개발자가 뷰 사이를 전환 할 수있는 가상 컨테이너) 만 있으면 셸 페이지에서 콘텐츠 페이지를 렌더링해야하는 위치를 AngularJS에 알릴 수 있습니다.
동일한 '단일'페이지 내에서 AngularJS를 사용하면 개발자가 동일한 URL에 포함 된 여러보기를 제공 할 수 있습니다. 동일한 셸 페이지 내에 서로 다른보기 집합이 차례로 나타날 수 있으며 각보기는 사용자가 페이지를 스크롤 할 때 동적으로로드됩니다.

SPA-using-AngularJS-multiple-views



내장 된 AngularJS 지시문 (ng-app)을 사용하면 개발자가 타사 지시문을 추가하는 옵션과 함께 앱을 초기화 할 수 있습니다. 반면에 ng-model 지시문을 사용하면 데이터 바인딩 표현식을 메모리에 추가 할 수 있습니다. 여기를보세요 :

자바에서 임의의 문자열 생성

전 세계적으로 개발자는 AngularJS를 사용하여 SPA를 채택했으며이 추세는 당분간 지속될 것으로 예상됩니다.



질문이 있으십니까? 의견란에 언급 해 주시면 연락 드리겠습니다.

관련 게시물: AngularJS를 통한 성공적인 웹 개발 경력