AngularJS : 여러 ng-app로 웹 애플리케이션 구성

40

블로고 스피어는 AngularJS 앱의 주제와 관련하여 다음과 같은 가이드 라인을 구성하는 많은 기사를 가지고 있습니다 :

그러나 가이드 라인과 모범 사례를 위해 아직 다루지 않은 한 가지 시나리오는 여러 "미니 스파"앱이 포함 된 대규모 웹 애플리케이션이 있고 미니 스파 앱이 모두 특정 양의 코드를 공유하는 경우입니다.

나는 ng-app같은 페이지에 여러 선언을 하려고하는 경우를 언급하지 않습니다 . 오히려, 고유 한 고유 한 ng-app선언 이있는 큰 사이트의 다른 섹션을 의미 합니다.

Scott Allen이 자신의 OdeToCode 블로그 에서 다음과 같이 썼습니다 .

내가 잘 알지 못했던 한 가지 시나리오는 여러 개의 앱이 더 큰 동일한 웹 응용 프로그램에 존재하고 클라이언트에서 일부 공유 코드가 필요한 시나리오입니다.

이 시나리오에서 지적 할 수있는 권장되는 접근 방법, 피해야 할 함정 또는 훌륭한 샘플 구조가 있습니까?

업데이트
-2015 년 9 월 10 일 흥미로운 조직 전략을 가진 프로젝트 중 하나는 MEAN.JS 및 해당 모듈 폴더입니다.
https://github.com/meanjs/mean
https://github.com/meanjs/mean/tree/master/modules

다른 예는 ASP.NET 뮤직 스토어 SPA 예입니다. https://github.com/aspnet/MusicStore https://github.com/aspnet/MusicStore/tree/master/src/MusicStore.Spa/ng-apps

design web-applications angularjs

— mg1075
소스

5

무엇을 선택하기로 했습니까? 나는 응용 프로그램의 격리 앱 포함 된 작은 자기의 번호로 나누어 질하려면 같은 위치에있어

— 스티븐 패튼

8

여기 제가 함께 일하는 디자인이 있습니다. 나는 내가 만든 두 개의 큰 프로젝트에서 유용했으며 지금까지 어떤 도로 블록에도 영향을 미치지 않았습니다.

폴더 구조

your-project/
  apps/
    global.html
    app1/
      index.html
      app1.module.js
      app1.js
      parts/
        foo.js
        foo.html
        ...
    app2/
  libs
    lib1/
      lib1.module.js
      parts/
        directive1.js
        directive1.html
    lib2/
  third-party/

apps/app1/index.html요청이 /app1들어올 때 를 찾도록 서버 웹 프레임 워크를 구성하십시오 . 친숙한 URL을 사용하십시오 (예 : 필요한 경우 서버 기술을 사용하여 the-first-application/대신 URL을 app1/맵핑하십시오).
서버 기술이 포함되어 있어야 global.html에서 index.html이 업체가 포함이 포함되어 있기 때문에 (아래 참조).
해당 앱에 필요한 자산을 포함 시키십시오 index.html(아래 참조).
ng-app에 루트 <div ui-view></div>를 넣으십시오 index.html.
모든 앱과 lib는 별도의 각도 모듈입니다.
모든 앱은 <app-name>.module.js각도 모듈 정의 및 종속성 목록이 포함 된 파일을 가져 옵니다.
모든 앱은 <app-name>.js모듈의 구성 및 실행 블록과 라우팅 구성을 포함 하는 파일을 그 일부로 가져옵니다.
모든 앱은 특정 앱에 적합한 구조로parts 애플리케이션의 컨트롤러,보기, 서비스 및 지시문이 포함 된 폴더를 가져 옵니다 . 나는 하위 폴더처럼 생각하지 않는다 controllers/, views/그들이 확장되지 않기 때문에, 도움 등,하지만 YMMV.
Libs는 앱과 동일한 구조를 따르지만 필요하지 않은 것은 생략합니다.

앱 내에서 사용되는 서비스 및 지시문으로 시작하십시오. 다른 앱에서도 필요한 것이 있으면 라이브러리로 리팩토링하십시오. all-directive 또는 all-services 라이브러리뿐만 아니라 기능적으로 일관된 라이브러리를 작성하십시오.

자산

릴리스 빌드를 위해 JS 및 CSS 파일을 모두 축소하지만 개발 중에 축소되지 않은 파일로 작업합니다. 이를 지원하는 설정은 다음과 같습니다.

공급 업체는 세계적으로 포함 관리 global.html. 이렇게하면 SPA 간을 탐색 할 때 캐시에서 무거운 물건을로드 할 수 있습니다. 캐싱이 올바르게 작동하는지 확인하십시오.
SPA 별 자산은에 정의되어 index.html있습니다. 여기에는 사용 된 라이브러리뿐만 아니라 앱 특정 파일 만 포함되어야합니다.

위의 폴더 구조를 통해 축소 빌드 단계에 적합한 파일을 쉽게 찾을 수 있습니다.

— theDmi
소스

7

SPA (Single Page Apps)는 실제로 큰 응용 프로그램과 기본 응용 프로그램 내에서 여러 개의 미니 SPA를 사용하여 제안하는 방식으로 사용하기위한 것이 아닙니다. 가장 큰 문제는 모든 것이 미리로드되어야하기 때문에 페이지로드 시간입니다.

이를 해결하는 한 가지 방법은 탐색 페이지를 사용하여 개별 SPA로 이동하는 것입니다. 탐색 페이지는 상당히 가벼우 며 선택한 항목에 따라 한 번에 하나의 SPA 만로드합니다. 각 SPA 내에 탐색 링크가있는 링크 표시 줄을 제공하면 사용자가 다른 영역으로 이동해야 할 때 항상 탐색 페이지로 돌아갈 필요가 없습니다.

이 방법을 사용하면 SPA 전체에 정보를 유지하는 데 몇 가지 문제가 발생할 수 있습니다. 그러나 우리는 SPA가 의도하지 않은 것에 대해 이야기하고 있습니다. 클라이언트 측 데이터 지속성을 도울 수있는 몇 가지 프레임 워크가 있습니다. 산들 바람이 가장 먼저 떠오르지 만 다른 것들도 있습니다.

레이아웃 관련-특정 프로그래머의 질문은 특정 요구에 따라 큰 프로젝트 레이아웃을 다루고 있습니다. 나는 이것 과 이것을 만났다 . SPA에 대해서는 이미 그 질문에 대한 답변보다 응용 프로그램 레이아웃에 영향을 줄 마술이 없습니다.

즉, 다른 프로젝트에 가장 적합한 접근법이 다릅니다. 각도 시드 프로젝트에서 제공하는 기본 레이아웃을 고수하는 것이 좋습니다. 사용자 정의 패키지 및 소스 코드에 대해 제공된 폴더에서 별도의 폴더를 작성하십시오. 소스 폴더 내에서 필요에 맞는 프로젝트 레이아웃을 사용하십시오.

— 커뮤니티
소스

-1

응용 프로그램이 같은 페이지에 여러 ng-app 선언이 필요한 경우 아래 표시된대로 모듈 이름을 주입하여 AngularJS 모듈을 수동으로 부트 스트랩해야합니다.

angular.element(document).ready(function() {
  angular.bootstrap(document, ['TodoApp']);
});

이 플 런커 는 AngularJS를 수동으로 부트 스트랩하는 방법을 자세히 설명합니다.

— 바사 바라 즈 카 부레
소스

5

mg1075는이 경우가 아니라는 점을 분명히 알았습니다. "동일한 페이지에 여러 개의 ng-app 선언을 사용하려는 경우를 언급하는 것이 아니라 고유 한 ng가있는 큰 사이트의 다른 섹션을 의미합니다. -app 선언. "

— cincodenada