[angularjs] 모듈 선언에 대한 AngularJS 모범 사례?

모듈을 선언하는 ‘가장 좋은’방법

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. “엄격한 사용”의 함수 형식을 사용할 수 있습니다.
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가 Angular 및 서비스, 지시문 및 필터에서 여전히 잘 작동하지 않기 때문에 앱 내에서 이름이 다른 모듈을 사용하는 이점이 다소 제한적이라고 덧붙일 수 있습니다. 어쨌든 각도 컨텍스트 내에서 전역 적으로 사용할 수 있습니다 ( 여기에 예시 된대로 ). 그래도 의미 론적 및 구조적 이점이 있으며 한 줄의 코드가 주석 처리 된 모듈을 포함 / 제외 할 수 있으면 도움이 될 수 있습니다.

일반적으로 서로 의존하기 때문에 유형별로 하위 모듈을 분리하는 것도 거의 의미가 없습니다 (예 : ‘myMapSubModule.controllers’).

답변

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

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

function Dashboard() { }

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

function SomeController() { }

function someFactory() { }

// 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() { }

(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',...]);

// 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'
]);

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( /* ... */ );

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

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

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 = ...;
 })
 ;