Angular Module 선언 및 재로드 인스턴스 얻기 코드

module은 angular에서 중요한 모듈 조직 방식으로, 일반적인 비즈니스 컴포넌트(컨트롤러, 서비스, 필터, 디렉티브 등)를 함께 포장할 수 있는 능력을 제공합니다. 이렇게 하면 코드를 비즈니스 영역 문제에 따라 module을 포장할 수 있으며, module의 의존성 주입을 통해 관련 모듈 내용을 활용하여 '의존성 분리'를 더 잘할 수 있고, 더 나은 '고 내聚 저耦合'을 달성할 수 있습니다. '고 내聚 저耦合'은面向对象设计 원칙에서 비롯됩니다. 내聚는 모듈이나 객체 내부의 통합성을 의미하며, 일련의 밀접한 로직은 동일한 모듈, 객체 등 코드 단위에 포장되어야 하며, 여러 곳으로 분산되지 않아야 합니다.耦合은 모듈, 객체 등 코드 단위 간의 의존도를 의미하며, 한 모듈의 변경이 다른 모듈에 영향을 미친다면, 이 두 모듈은 서로 의존하는 강한 결합이 있습니다.

module은 우리의 angular 코드의 진입점이며, 먼저 module을 선언해야 하고, 그런 다음 angular에서 다른 컴포넌트 요소를 정의할 수 있습니다. 예를 들어, controller, service, filter, directive, config 코드 블록, run 코드 블록 등입니다.

module 정의에 대해는 angular.module('com.ngbook.demo', []). module 함수에 대해는 전달할 수 있습니다。3매개변수는 다음과 같습니다：

1. name: 모듈 정의의 이름입니다. 이는 독립적인 필수 매개변수이며, 이 이름은 나중에 다른 모듈에 의존하거나 ngAPP 지시자에서 애플리케이션의 주 모듈을 선언할 때 사용됩니다;
2. requires: 모듈의 의존성입니다. 이는 이 모듈이 필요로 하는 다른 모듈을 선언하는 매개변수입니다. 주의하세요: 여기서 모듈의 의존성을 선언하지 않으면, 의존 모듈의 컴포넌트를 사용할 수 없습니다. 이는 선택적 매개변수입니다.
3. configFn: 모듈의 시작 설정 함수입니다. angular config 단계에서 이 함수가 호출되며, 모듈 내 컴포넌트를 인스턴스화하기 전에 특정 설정을 수행합니다. 예를 들어, 우리가 일반적으로 사용하는 $routeProvider를 통해 애플리케이션의 루트 정보를 설정하는 것입니다. 이는 'module.config' 함수와 동일합니다. 'module.config' 함수를 사용하는 것이 좋습니다. 이는 선택적 매개변수입니다.
   

angular.module 메서드에 대해 우리가 일반적으로 사용하는 방법은 두 가지가 있습니다. angular.module('com.ngbook.demo', [선택적 의존성])와 angular.module('com.ngbook.demo')입니다. 주의하세요, 이 두 방법은 완전히 다릅니다. 하나는 module를 선언하고 생성하는 것이며, 다른 하나는 이미 선언된 module를 가져오는 것입니다. 애플리케이션에서 module의 선언은 한 번만 있어야 하며, module를 가져오는 것은 여러 번 가능합니다. angular 컴포넌트를 독립적으로 다른 파일에 분리하여 module 파일에서 module를 선언하고, 다른 컴포넌트는 module를 가져오는 것이 좋습니다. 배포나 script 방식으로引入할 때는 먼저 module 선언 파일을 로드한 후에 다른 컴포넌트 모듈을 로드해야 합니다. 주의해야 할 점은 있습니다.

angular 중국 커뮤니티 그룹에서는 종종 학생들이 'ng:areq' 에러에 대해 묻습니다：

　[ng:areq] 인수 'DemoCtrl'은 함수가 아닙니다, undefined를 받았습니다！

이는 대개 controller를 정의하지 않거나 여러 번 module을 선언했기 때문입니다. 여러 번 module을 선언하면 이전에 정의된 module의 정보가 지워지기 때문에, 프로그램이 정의된 컴포넌트를 찾을 수 없게 됩니다. 이 점은 angular 소스 코드에서도 알 수 있습니다（loader.js에서 가져옴）:

function setupModuleLoader(window) {
      ...
      function ensure(obj, name, factory) {
        return obj[name] || (obj[name] = factory());
      }
      var angular = ensure(window, 'angular', Object);
      return ensure(angular, 'module', function() {
        var modules = {};
        return function module(name, requires, configFn) {
          var assertNotHasOwnProperty = function(name, context) {
            if (name === 'hasOwnProperty') {
              throw ngMinErr('badname', 'hasOwnProperty is not a valid {0} name', context);
            }
          };
          assertNotHasOwnProperty(name, 'module');
          if (requires && modules.hasOwnProperty(name)) {
            modules[name] = null;
          }
          return ensure(modules, name, function() {
            if (!requires) {
              throw $injectorMinErr('nomod', "Module '{0}' is not available! You either misspelled ", +
                "the module name or forgot to load it. If registering a module ensure that you ", +
                "specify the dependencies as the second argument.", name);
            }
            var invokeQueue = [];
            var runBlocks = [];
            var config = invokeLater('$injector', 'invoke');
            var moduleInstance = {
              _invokeQueue: invokeQueue,
              _runBlocks: runBlocks,
              requires: requires,
              name: name,
              provider: invokeLater('$provide', 'provider'),
              factory: invokeLater('$provide', 'factory'),
              service: invokeLater('$provide', 'service'),
              value: invokeLater('$provide', 'value'),
              constant: invokeLater('$provide', 'constant', 'unshift'),
              animation: invokeLater('$animateProvider', 'register'),
              filter: invokeLater('$filterProvider', 'register'),
              controller: invokeLater('$controllerProvider', 'register'),
              directive: invokeLater('$compileProvider', 'directive'),
              config: config,
              run: function(block) {
                runBlocks.push(block);
                return this;
              }
            };
            if (configFn) {
              config(configFn);
            }
            return moduleInstance;
            function invokeLater(provider, method, insertMethod) {
              return function() {
                invokeQueue[insertMethod || 'push']([provider, method, arguments]);
                return moduleInstance;
              };
            }
          });
        };
      });
    }

코드에서는 angular이 시작할 때 전역적인 angular 객체를 설정하고, 그 객체에 module API를 발행한다는 것을 알 수 있습니다. module API 코드에서는 첫 번째 행의 명령문을 명확하게 볼 수 있습니다. module 이름은 hasOwnProperty로命名할 수 없으며, 그렇지 않으면 'badname' 오류 메시지가 표시됩니다. 그 다음, name 매개변수가 전달되면, 기존의 module 정보를 제거하고 null로 설정합니다.

moduleInstance 정의에서, angular.module이 공개하는 API는 다음과 같습니다: invokeQueue, runBlocks, requires, name, provider, factory, service, value, constant, animation, filter, controller, directive, config, run. invokeQueue와 runBlocks는 이름에 따라 약속된 비공개 속성으로, 무작정 사용하지 마십시오. 다른 API는 우리가 자주 사용하는 앵글러 컴포넌트 정의 메서드이며, invokeLater 코드에서 이러한 앵글러 컴포넌트 정의의 반환은 moduleInstance 인스턴스이며, 이는 원활한 API를 형성합니다. 이러한 컴포넌트를 선언하는 대신, 연쇄 정의를 사용하는 것을 추천합니다.

마지막으로, 세 번째 매개변수 configFn이 입력되면, 그것을 config 정보에 구성하며, 앵글러가 config 단계에 진입할 때마다 순차적으로 실행되어, 앵글러 애플리케이션 또는 앵글러 컴포넌트(예: 서비스 등)의 인스턴스화 전에 구성을 수행합니다.

위는 앵글러 모듈 선언과 오버로드를 얻는 자료를 정리한 것입니다. 이후 추가적인 자료를 계속 보충하겠습니다. 이 사이트에 대한 지원에 감사합니다!

언급: 이 문서의 내용은 인터넷에서 가져왔으며, 저작권자는 모두 소유합니다. 이 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 이 사이트는 소유권을 가지지 않으며, 인공적으로 편집된 것이 아니며, 관련 법적 책임도 부담하지 않습니다. 저작권 위반이 의심되는 내용이 있으시면, notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com（이메일을 보내는 경우, #을 @으로 변경하십시오. 신고를 하고 관련 증거를 제공하시면, 해당 내용이 실제로 위반된 것으로 확인되면, 이 사이트는 즉시 해당 위반 내용을 삭제할 것입니다.