내 각도 구성JS 어플리케이션

내 각도 구성JS 어플리케이션

저는 AngularJs를 처음 사용하는데 튜토리얼을 읽어봤지만 아직 대답하지 못한 질문들이 많이 있습니다.현재 주요 관심사는 응용 프로그램을 모듈로 어떻게 분할해야 하는가 하는 것입니다.

기본적으로 비즈니스 기능을 나타내는 다양한 앱의 포털 역할을 하는 앱을 만들어야 합니다(때로는 서로 관계가 거의 없거나 아예 없는 경우도 있습니다).

튜토리얼에서는 여러 뷰가 있는 하나의 앱을 만드는 방법을 보여 줍니다.제가 필요한 것은 여러 개의 모듈을 갖춘 하나의 앱입니다. 각 모듈은 각각 독자적인 뷰를 가지고 있습니다(그리고 공유 뷰도 가지고 있을 것입니다).

그런 구조를 가진 앱을 만든 사람이 있나요? 당신의 경험과 어떻게 일을 정리했는지 공유해 주시겠어요?

앵귤러JS Seed 프로젝트(https://github.com/angular/angular-seed)는 좋지만 복잡한 애플리케이션 구축 방법을 실제로 보여주지는 않습니다.

[편집] 자세한 설명을 위해 블로그에 글을 썼습니다.

이제 코드 샘플과 함께 파트 II를 읽을 수 있습니다.

내 질문에 대답할게.그게 최선의 방법이라고 생각해서가 아니라 그냥 내가 선택한 방법이기 때문이야.

이렇게 해서 비즈니스 모듈을 폴더로 분할했습니다.

• ②.
  • 비즈니스 모듈
    • 컨트롤러
      • index.displaces를 표시합니다.
      • 첫 번째 Ctrl.js
      • 세컨드 Ctrl.js
    • 지시.
    • 서비스
    • 보기
    • 필터
  • another Business Module(다른 비즈니스 모듈)
  • 공유했습니다.
  • app.module
  • index.displaces를 표시합니다.

각 모듈에는 컨트롤러, 디렉티브 등의 폴더 구조가 있습니다.

각 폴더에는 index.js 파일과 각 컨트롤러, 각 디렉티브 등을 구분하는 기타 파일이 있습니다.

index.js 파일에는 모듈의 정의가 포함되어 있습니다.예를 들어 위의 business Module 컨트롤러의 경우:

angular.module('myCompany.businessModule.controllers', []);

여기엔 의존관계는 없지만 있을 수 있어요

그런 다음 첫 번째 Ctrl.js에서 해당 모듈을 재사용하고 컨트롤러를 추가할 수 있습니다.

angular.module('myCompany.businessModule.controllers').controller('firstCtrl',     

        function(){
});

그런 다음 app.js는 종속성 배열에 추가하여 응용 프로그램에 필요한 모든 모듈을 집계합니다.

 angular.module('myApp', ['myCompany.businessModule', 'myCompany.anotherBusinessModule']);

공유 폴더에는 비즈니스 모듈에 고유하지 않고 어디서나 재사용할 수 있는 지침 및 기타 항목이 포함되어 있습니다.

다시 말씀드리지만, 이게 최선의 방법인지는 모르겠지만 제게는 확실히 효과가 있습니다.다른 사람들에게 영감을 줄 수 있을지도 몰라.

편집

index.js 파일에는 모듈 선언이 포함되어 있으므로 다른 응용 프로그램스크립트보다 먼저 html 페이지에서 참조해야 합니다.그러기 위해 ASP의 IBundleOrderer를 사용하고 있습니다.NET MVC 4:

 var bundle = new ScriptBundle("~/bundles/app") { Orderer = new AsIsBundleOrderer() };
 bundles.Add(bundle.IncludeDirectory("~/app", "*.js", true));

public class AsIsBundleOrderer : IBundleOrderer
{
    public IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)
    {
        files = files.OrderBy(x => x.Name == "index.js" ? 0 : 1);
        return files;
    }
}

대부분의 경우 샘의 방법이 통용되는 것 같다.현재 Angular 문서에는 각 컨트롤러, 서비스 등에 대한 모듈로 설정되어 있지만, 이는 구글의 Mishko 본인에 의해 부정되고 있습니다.

Mishko의 최근 Angularjs Best Practices 비디오에서는 모듈 구조를 쉽게 테스트하고 쉽게 확장할 수 있는 방법을 보여 줍니다.각진 어플리케이션 내에서의 퍼포먼스에 영향을 주지 않도록 모듈을 구성하는 방법에 유의하십시오.

앵글 앱 개발에서 앞서 말한 이유로 베스트 프랙티스 방법을 사용하는 것이 좋습니다.당분간 컨트롤러 등을 생성하기 위한 자체 노드스크립트를 작성할 수 있습니다.이 스크립트에는 컨트롤러를 작성하는 모듈과 이름이 포함됩니다.이 경우 컨트롤러가 자동으로 생성되어 테스트 사양이 올바르게 작성됩니다.

셋업에 대해 자세히 읽고 싶다면, 프로젝트의 방향을 기준으로 한 셋업에 관한 훌륭한 글이 여기에 있습니다.

yoman https://github.com/yeoman/yeoman 및 yoman generator structure에 접속해야 합니다.https://github.com/yeoman/generator-angular, 에서는 angular-seed보다 어플리케이션 셋업에 더 적합한 솔루션이 됩니다.다른 비즈니스 모듈에 대해 다른 앱을 만들고 서비스와 지침을 공유해야 합니다.

관심 있는 분들을 위해 Misko의 베스트 프랙티스에 맞는 Angular Seed의 "조형" 버전을 만들었습니다.https://github.com/sanfordredlich/angular-brunch-seed-modularized

브런치와 함께 설정되므로 페이지 새로고침, 테스트 실행 등을 매우 빠르게 수행할 수 있습니다.빠르게 개발할 수 있으며 코드의 패턴을 따르면 응용 프로그램의 확장이 상당히 용이합니다.맛있게 드세요!

Yooman 제너레이터의 어프로치에서는, 각도 모듈과의 라인 업이 잘 되지 않기 때문에, 응집력이 별로 없는 것을 알 수 있었습니다.프로젝트 규모가 커지고 특정 컴포넌트를 작업하는 동안 소스 트리에서 여러 번 회전하는 것을 볼 수 있었습니다.

나는 최근에 여기서 다른 접근법을 발견했다.이 접근법은 파일을 각도 모듈별로 그룹화하여 보다 결속력 있게 느껴집니다.이 문제의 한 가지 가능한 단점은 사이트를 구축해야 한다는 것입니다.사이트를 제 자리에서 실행할 수 없다는 것입니다.그러나 그 프로젝트의 grunt watch 태스크는 이 문제에 도움이 됩니다.

언급URL : https://stackoverflow.com/questions/15943465/structuring-my-angularjs-application