SPA(Single Page Applications)

노트

단일 페이지 애플리케이션 프레임워크 기반 클라이언트측 렌더링(예: 응답)이 필요한 프로젝트에는 SPA 편집기를 사용하는 것이 좋습니다. 추가 정보.

SPA(Single-Page Applications )는 웹 기술을 사용하여 매끄러운 경험을 제작할 수 있는 가장 효과적인 패턴으로 널리 알려져 있습니다. SPA 패턴을 따르면 데스크탑 또는 모바일 애플리케이션과 동일하게 수행하지만 개방형 웹 표준의 기본 요소로 인해 다양한 디바이스 플랫폼과 폼 팩터에 이르는 애플리케이션을 제작할 수 있습니다.

일반적으로 SPA은 전체 HTML 페이지 를 한 번만 로드하고(CSS, JS 및 지원 글꼴 컨텐츠 포함) 앱에서 상태가 변경될 때마다 필요한 부분만 로드하므로 일반적인 페이지 기반 웹 사이트보다 성능이 더 좋은 것으로 보입니다. 이러한 상태 변경에 필요한 것은 선택한 기술 집합에 따라 다를 수 있지만, 일반적으로 기존 '보기'를 대체할 단일 HTML 조각 및 JS 코드 블록을 실행하여 새 보기를 연결하고 필요한 클라이언트측 템플릿 렌더링을 수행할 수 있습니다. 템플릿 캐싱 메커니즘을 지원하거나 Adobe PhoneGap을 사용하는 경우 템플릿 컨텐츠에 대한 오프라인 액세스를 지원함으로써 이러한 상태 변경 속도를 더욱 향상시킬 수 있습니다.

AEM 6.1은 AEM Apps를 통해 SPA의 구축 및 관리를 지원합니다. 이 문서에서는 SPA의 개념 및 AngularJS를 활용하여 App Store 및 Google Play에 브랜드를 가져오는 방법에 대해 설명합니다.

AEM 앱의 SPA

AEM Apps의 단일 페이지 애플리케이션 프레임워크를 사용하면 AngularJS 앱의 높은 성능을 경험할 수 있을 뿐만 아니라 작성자(또는 기타 기술 지식이 없는 직원)가 웹 사이트 관리용으로 예약되어 온 터치에 최적화된 드래그 앤 드롭 편집기 환경을 통해 앱 컨텐츠를 만들고 관리할 수 있습니다. AEM으로 사이트를 구축한 경우 AEM Apps를 사용하면 컨텐츠, 구성 요소, 워크플로우, 에셋 및 권한을 손쉽게 재활용할 수 있습니다.

AngularJS 응용 프로그램 모듈

AEM 앱은 앱의 최상위 수준 모듈을 통합하는 등 AngularJS 구성의 상당 부분을 처리합니다. 기본적으로 이 모듈의 이름은 'AEMAngularApp'이며 이 모듈의 생성 작업을 담당하는 스크립트는 /libs/mobileapps/components/angular/ng-page/angular-app-module.js.jsp에서 찾을 수 있습니다.

앱 초기화의 일부에는 앱이 종속되는 AngularJS 모듈을 지정하는 작업이 포함됩니다. 앱에서 사용하는 모듈 목록은 /libs/mobileapps/components/angular/ng-page/angular-module-list.js.jsp에 있는 스크립트에 의해 지정되며, 자신의 앱 페이지 구성 요소에 의해 오버레이되어 앱에 필요한 추가 AngularJS 모듈을 가져올 수 있습니다. 예를 들어 위의 스크립트를 Geometrixx 구현(/apps/geometrixx-outdoors-app/components/angular/ng-geometrixx-page/angular-module-list.js.jsp?lang=ko)과 비교합니다.

앱의 개별 상태 간 탐색을 지원하기 위해 각 앱 모듈 스크립트는 최상위 앱 페이지의 모든 하위 페이지를 반복하여 '경로' 세트를 생성하고 각 경로를 Angular의 $routeProvider 서비스에 구성합니다. 이러한 방식이 실제로 어떻게 보이는지 예를 보려면 Geometrixx Outdoors 앱 샘플에서 생성된 각단-앱 모듈 스크립트를 살펴보십시오.(링크는 로컬 인스턴스가 필요) http://localhost:4502/content/phonegap/conference-app/en/home.angular-app-module.js

생성된 AEMAngularApp으로 검색하면 다음과 같이 지정된 일련의 경로를 찾을 수 있습니다.

$routeProvider
.when('/content/phonegap/geometrixx-outdoors/en/home/products/:id', {
    templateUrl: 'home/products.template.html',
    controller: 'contentphonegapgeometrixxoutdoorsenhomeproducts'
})

특히 위의 샘플에서는 매개 변수를 경로의 일부로 전달하는 예를 보여 줍니다. 이 예에서는 지정된 패턴(/content/phonegap/geometrixx-outdoors/en/home/products/:id?lang=ko)을 충족하는 경로가 요청된 경우 home/products.template.html 템플릿으로 처리되어야 하며 'contentphonegapgeometrioutdoors' outdoors' 컨트롤러를 사용해야 합니다.

이 경로가 요청될 때 로드할 템플릿은 templateUrl 속성에 의해 지정됩니다. 이 템플릿에는 페이지에 포함된 AEM 구성 요소의 HTML과 애플리케이션의 클라이언트 측 배선에 필요한 AngularJS 지시어가 포함됩니다. Geometrixx 구성 요소의 AngularJS 지시문의 예를 보려면 스와이프 회전판의 template.jsp(/apps/geometrixx-outdoors-app/components/swipe-carousel/template.jsp?lang=ko)의 45행을 확인하십시오.

페이지 컨트롤러

Angular의 자체 단어에서 "컨트롤러는 각 범위를 증가시키는 데 사용되는 JavaScript 생성자 함수입니다." (source) AEM App의 각 페이지는 angularframeworkType를 지정하는 모든 컨트롤러가 추가할 수 있는 컨트롤러에 자동으로 연결됩니다. 이 구성 요소가 페이지에 추가될 때마다 이 중요한 속성이 포함되어 있는지 확인할 수 있는 cq:template 노드를 포함하여 ng-text 구성 요소를 예(/libs/mobileapps/components/angular/ng-text?lang=ko)로 봅니다.

좀 더 복잡한 컨트롤러 예를 보려면, ng-template-page controller.jsp 스크립트(/apps/geometrixx-outdoors-app/components/angular/ng-template-page?lang=ko)를 여십시오. 특히 실행 시 생성되는 javascript 코드는 다음과 같이 렌더링됩니다.

// Controller for page 'products'
.controller('contentphonegapgeometrixxoutdoorsenhomeproducts', ['$scope', '$http', '$routeParams',
    function($scope, $http, $routeParams) {
        var sku = $routeParams.id;
        var productPath = '/' + sku.substring(0, 2) + '/' + sku.substring(0, 4) + '/' + sku;
        var data = $http.get('home/products' + productPath + '.angular.json' + cacheKiller);

        /* ng-product component controller (path: content-par/ng-product) */
        data.then(function(response) {
            $scope.contentparngproduct = response.data["content-par/ng-product"].items;
        });

        /* ng-image component controller (path: content-par/ng-product/ng-image) */
        data.then(function(response) {
            $scope.contentparngproductngimage = response.data["content-par/ng-product/ng-image"].items;
        });
    }
])

위의 예에서 $routeParams 서비스에서 매개 변수를 가져온 다음 JSON 데이터가 저장되어 있는 디렉토리 구조에 매개 변수를 정렬하는 것을 확인할 수 있습니다. 이러한 방식으로 sku id를 처리함으로써 잠재적으로 수천 개의 고유 제품에 대한 제품 데이터를 렌더링할 수 있는 단일 제품 템플릿을 제공할 수 있습니다. 대규모 제품 데이터베이스의 각 항목에 대한 개별 경로가 필요한 훨씬 확장 가능한 모델입니다.

여기에는 두 가지 구성 요소도 있습니다.ng-product는 위의 $http 호출에서 추출되는 데이터로 범위를 늘립니다. 이 페이지에는 응답에서 검색하는 값으로 범위가 확장되는 ng-이미지도 있습니다. Angular의 $http 서비스를 통해 각 구성 요소는 요청이 완료되고 생성된 약속이 이행될 때까지 참을성 있게 기다립니다.

다음 단계

단일 페이지 애플리케이션에 대해 알게 되면 PhoneGap CLI를 사용하여 앱 개발을 참조하십시오.

이 페이지에서는

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now