모듈 선언을 위한 AngularJS 베스트 프랙티스

모듈 선언을 위한 AngularJS 베스트 프랙티스

내 앱에 Angular 모듈이 많이 표시되었어.처음에는 다음과 같은 "chained" 구문을 사용하여 선언하기 시작했습니다.

angular.module('mymodule', [])
    .controller('myctrl', ['dep1', function(dep1){ ... }])
    .service('myservice', ['dep2', function(dep2){ ... }])
    ... // more here

하지만 읽기 쉽지 않다고 판단하여 다음과 같은 모듈 변수를 사용하여 선언하기 시작했습니다.

var mod = angular.module('mymodule', []);

mod.controller('myctrl', ['dep1', function(dep1){ ... }]);

mod.service('myservice', ['dep2', function(dep2){ ... }]);
...

더 것 만, 이 이 이 구문을 둔다는 입니다.mod글로벌 범위에서 변수 아웃. 또 인 '하다'가 mod이 다음 문제(및 글로벌 변수와 관련된 기타 문제)로 덮어씁니다.

그래서 제 질문은 이게 최선의 방법일까요?아니면 이렇게 하는 것이 좋을까요?

(function(){
    var mod = angular.module('mymod', []);
    mod.controller('myctrl', ['dep1', function(dep1){ ... }]);
    mod.service('myservice', ['dep2', function(dep2){ ... }]);
    ...
})();

아니면 신경 쓸 만큼 중요한가요?모듈 선언을 위한 "베스트 프랙티스"가 무엇인지 알고 싶습니다.

모듈을 선언하는 '최선' 방법

되므로 angular를 통해 수 .angular.module('mymod'):

// one file
// NOTE: the immediately invoked function expression 
// is used to exemplify different files and is not required
(function(){
   // declaring the module in one file / anonymous function
   // (only pass a second parameter THIS ONE TIME as a redecleration creates bugs
   // which are very hard to dedect)
   angular.module('mymod', []);
})();


// another file and/or another anonymous function
(function(){   
 // using the function form of use-strict...
 "use strict";
  // accessing the module in another. 
  // this can be done by calling angular.module without the []-brackets
  angular.module('mymod')
    .controller('myctrl', ['dep1', function(dep1){
      //..
    }])

  // appending another service/controller/filter etc to the same module-call inside the same file
    .service('myservice', ['dep2', function(dep2){ 
    //... 
    }]);

  // you can of course use angular.module('mymod') here as well
  angular.module('mymod').controller('anothermyctrl', ['dep1', function(dep1){
      //..
  }])
})();

다른 글로벌 변수는 필요하지 않습니다.

물론 취향에 따라 다르지만, 저는 이것이 최선의 방법이라고 생각합니다.

1. 글로벌 스코프를 오염시킬 필요는 없습니다.
2. 어디에서나 모듈에 접속하여 모듈 및 그 기능을 다른 파일로 자유롭게 분류할 수 있습니다.
3. "use strict"의 기능 형식을 사용할 수 있습니다.
4. 파일의 로드 순서는 그다지 중요하지 않다

모듈 및 파일 정렬 옵션

이 방법으로 모듈을 선언하고 모듈에 액세스하면 매우 유연해집니다.모듈 정렬은 기능 유형(다른 답변에서 설명한 것과 같음) 또는 경로별로 할 수 있습니다.예를 들어 다음과 같습니다.

/******** sorting by route **********/    
angular.module('home')...
angular.module('another-route')...
angular.module('shared')...

최종적으로 어떻게 분류하느냐는 개인의 취향과 프로젝트의 규모와 종류에 따라 결정됩니다.저는 개인적으로 같은 폴더 내의 모듈의 모든 파일(디렉티브, 컨트롤러, 서비스 및 필터의 서브폴더로 정렬됨)을 그룹화하고 모듈을 보다 재사용할 수 있도록 하기 위해 모든 다른 테스트 파일을 포함합니다.따라서 중간 규모의 프로젝트에서는 기본 경로와 그 컨트롤러, 서비스, 디렉티브 및 다소 복잡한 서브모듈을 포함하는 베이스모듈을 사용하게 됩니다.예를 들어 다음과 같습니다.

/******** modularizing feature-sets **********/
/controllers
/directives
/filters
/services
/my-map-sub-module
/my-map-sub-module/controllers
/my-map-sub-module/services
app.js
...

angular.module('app', [
  'app.directives',
  'app.filters',
  'app.controllers',
  'app.services',
  'myMapSubModule'
]);

angular.module('myMapSubModule',[
   'myMapSubModule.controllers',
   'myMapSubModule.services',
   // only if they are specific to the module
   'myMapSubModule.directives',
   'myMapSubModule.filters'
]);

매우 큰 프로젝트에서는 위에서 설명한 바와 같이 모듈을 루트별로 그룹화하거나 일부 선택된 메인 루트별로 그룹화하거나 루트 및 일부 컴포넌트의 조합으로 그룹화하기도 합니다.다만, 실제로는 다릅니다.

편집: 단지 관련성이 있기 때문에, 얼마 전에 그것을 다시 접하게 되었습니다.angular.module-function에 두 번째 파라미터를 추가하여 모듈을 한 번만 작성할 수 있도록 주의하십시오.이로 인해 어플리케이션이 엉망이 되어 검출이 매우 어려워질 수 있습니다.

2015년 모듈 정렬 편집:1년 반의 각도가 지난 후에도 AMD는 각도와 서비스, 디렉티브 및 필터는 각도가 있는 컨텍스트 내에서 글로벌하게 사용할 수 있기 때문에 앱 내에서 다른 이름을 가진 모듈을 사용하는 것의 이점은 다소 제한적이라는 것을 덧붙일 수 있습니다(여기 예 참조).그러나 의미적, 구조적 이점은 여전히 존재하며, 코드의 한 줄에 코멘트가 있는 모듈을 포함/제외할 수 있는 것이 도움이 될 수 있다.

또한 서브모듈을 유형별로 구분하는 것은 거의 의미가 없습니다(예:'myMapSubModule.controllers'는 일반적으로 서로 의존하기 때문에 사용됩니다.

Johnpapa의 앵글 스타일 가이드가 마음에 드는데, 이 질문에 관련된 몇 가지 규칙이 있습니다.

규칙: 이름 있는 함수와 익명 함수

익명 함수 사용 안 함:

// dashboard.js
angular
  .module('app')
  .controller('Dashboard', function() { })

대신 이름 있는 함수를 사용합니다.

// dashboard.js
angular
  .module('app')
  .controller('Dashboard', Dashboard);

function Dashboard() { }

처럼:This produces more readable code, is much easier to debug, and reduces the amount of nested callback code.

규칙 : 파일당 1개의 컴포넌트를 정의합니다.

한 파일에 여러 구성 요소를 사용하지 마십시오.

angular
  .module('app', ['ngRoute'])
  .controller('SomeController', SomeController)
  .factory('someFactory', someFactory);

function SomeController() { }

function someFactory() { }

Intad, 1개의 파일을 사용하여 모듈을 정의합니다.

// app.module.js
angular
  .module('app', ['ngRoute']);

하나의 파일은 모듈을 사용하여 컴포넌트를 정의합니다.

// someController.js
angular
  .module('app')
  .controller('SomeController', SomeController);

function SomeController() { }

다른 컴포넌트를 정의하기 위한 다른 파일

// someFactory.js
angular
  .module('app')
  .factory('someFactory', someFactory);

function someFactory() { }

물론 모듈, 컨트롤러 및 서비스에는 매우 유용하고 읽을 가치가 있는 다른 많은 규칙이 있습니다.

ya_dimon의 코멘트 덕분에 위의 코드는 IIFE로 감싸집니다.예를 들어 다음과 같습니다.

(function (window, angular) {
  angular.module('app')
   .controller('Dashboard', function () { });
})(window, window.angular);

저도 최근에 이런 난제를 겪었어요.저도 처음에는 당신처럼 연쇄 구문을 사용했지만, 결국에는 큰 프로젝트에서는 다루기 어려워집니다.보통 컨트롤러 모듈, 서비스 모듈 등을 별도의 파일로 만들어 다른 파일에 있는 메인 애플리케이션 모듈에 삽입합니다.예:

// My Controllers File
angular.module('my-controllers',[])
    .controller('oneCtrl',[...])
    .controller('twoCtrl',[...]);

// My Services File
angular.module('my-services',[])
    .factory('oneSrc',[...])
    .facotry('twoSrc',[...]);

// My Directives File
angular.module('my-directives',[])
    .directive('oneDrct',[...])
    .directive('twoDrct',[...]);

// My Main Application File
angular.module('my-app',['my-controllers','my-services','my-directives',...]);

그러나 프로젝트가 성장함에 따라 이 파일들은 점점 더 커졌습니다.그래서 각 컨트롤러 또는 서비스에 따라 파일을 분리하기로 했습니다.그 사실을 알게 된서리를angular.module('mod-name').이 기능을 수행하기 위해 필요한 것은 주입 배열이 없는 경우입니다.하나의 파일에 글로벌 변수를 선언하고 다른 파일에서 즉시 사용할 수 있기를 기대하는 것은 제대로 작동하지 않거나 예기치 않은 결과를 초래할 수 있습니다.

즉, 어플리케이션은 다음과 같습니다.

// Main Controller File
angular.module('my-controllers',[]);

// Controller One File
angular.module('my-controllers').controller('oneCtrl',[...]);

//Controller Two File
angular.module('my-controllers').controller('twoCtrl',[...]);

서비스 파일에도 같은 모듈을 삽입하고 있는 메인 어플리케이션모듈 파일을 변경할 필요가 없습니다.

또 하나의 방법은 컨트롤러, 디렉티브 등을 자체 모듈에 삽입하고 이들 모듈을 "메인" 모듈에 삽입하는 것입니다.

angular.module('app.controllers', [])
  .controller('controller1', ['$scope', function (scope) {
    scope.name = "USER!";
  }]);

angular.module('app.directives', [])
  .directive('myDirective', [function () {
    return {
      restrict: 'A',
      template: '<div>my directive!</div>'
    }
  }]);

angular.module('app', [
  'app.controllers',
  'app.directives'
]);

글로벌 범위에는 아무것도 남아 있지 않습니다.

http://plnkr.co/edit/EtzzPRyxWT1MkhK7KcLo?p=preview

파일과 모듈을 분할하는 것을 좋아합니다.

다음과 같은 경우:

app.module

var myApp = angular.module('myApp', ['myApp.controllers', 'myApp.directives', 'myApp.services']);

myApp.config(['$routeProvider', function($routeProvider) {
    /* routes configs */
    $routeProvider.when(/*...*/);
}]);

명령어.이네이블화

var myDirectives = angular.module('myApp.directives', []);

myDirectives.directive( /* ... */ );

서비스.js

var myServices = angular.module('myApp.services', []);

myServices.factory( /* ... */ );

저는 "체인 스타일"을 별로 좋아하지 않기 때문에 항상 변수를 적는 것을 선호합니다.

Angularjs 스타일 가이드를 따르는 것이 좋습니다.
명명 규칙에서 앱 모듈화까지 모든 개념을 처리합니다.

각도 2의 경우 각도 2 스타일 가이드를 확인할 수 있습니다.

저는 체인이 가장 콤팩트한 방법입니다.

angular.module("mod1",["mod1.submod1"])

 .value("myValues", {
   ...
 })

 .factory("myFactory", function(myValues){
   ...
 })

 .controller("MainCtrl", function($scope){

   // when using "Ctrl as" syntax
   var MC = this;
   MC.data = ...;
 })
 ;

이렇게 하면 모듈 간에 컴포넌트를 쉽게 이동할 수 있고, 동일한 모듈을 두 번 선언할 필요가 없으며, 글로벌 변수가 필요하지 않습니다.

또, 파일이 너무 길면, 해결 방법은 간단합니다.각각의 파일을 2개의 파일로 분할해, 상단에서 독자적인 모듈을 선언합니다.투명성을 높이기 위해 파일당 하나의 고유 모듈을 유지하고 파일의 전체 경로와 유사한 이름을 붙입니다.이 방법 또한 다음을 포함하지 않고 모듈을 작성할 필요가 없습니다.[]공통적인 애로사항입니다.

언급URL : https://stackoverflow.com/questions/19957280/angularjs-best-practices-for-module-declaration