AngularJS_AngularJS 모듈에 대한 심층 분석

AngularJS 모듈이란 무엇입니까

우리가 말하는 모듈은 AngularJS 애플리케이션의 필수적인 부분입니다. 컨트롤러, 서비스, 필터 또는 지시어 등이 될 수 있습니다. 모두 하나의 모듈에 속합니다.

대부분의 애플리케이션에는 다양한 모듈을 초기화, 로드 및 조립하는 데 사용되는 고유한 함수 입력 방법인 Main이 있으며, 이러한 모듈의 조합이 애플리케이션을 구성합니다.

그런데 AngularJS 애플리케이션은 메인 메소드도 없고 함수 항목도 없습니다. 대신, AngularJS 애플리케이션에서 이 모듈을 로드하고 시작하는 방법을 선언하기 위해 모듈에 지정됩니다.

이 방법에는 다음과 같은 장점이 있습니다.

1) 사람들이 이해하기 쉽도록 선언을 사용합니다.

2) 코드를 더 쉽게 재사용할 수 있습니다.

3) 모듈 로딩 순서를 제어하기가 더 쉽습니다. 이러한 모듈은 느리게 실행되기 때문입니다.

4) 단위 테스트 수행이 더욱 편리해졌습니다. 더욱 안정적이므로 테스트하려면 이 모듈만 로드하면 됩니다.

5) 엔드투엔드 테스트에서는 모듈을 사용하여 구성을 다시 작성할 수 있습니다.

모듈은 컨트롤러, 구성, 서비스, 팩토리, 지시문, 상수 등 여러 측면을 포함하는 AngularJS의 핵심 존재입니다.

Javascript에서 모듈과 유사한 기능을 구현하는 방법은 무엇입니까?

즉, 함수를 정의하면 함수 내의 함수를 외부 세계에 어떻게 공개할 수 있을까요?

함수 속의 함수를 객체의 핵심값으로 활용하여 외부 세계에 개방할 수 있다고 생각합니다.

일반적으로 이렇게 말하지만 실제로는 이렇습니다.

var myModule = function outerFuction(){
  var method1 = new function(){}
  var method2 = new function(){}
  return{
    method1: method1,
    method2, method2
  }
}
var o = outerFucntion();
o.method1();
o.mehtod2(); 

은행에 돈을 입금하고 인출하는 예를 들어보세요.

var account = function(){
 //余额
 var balance = 0;
 //存钱
 var deposit = function(money){
  balance+=money;
  console.log("卡上余额为： " + balance);
  notifyUser();
 }
 //取钱
 var withdraw = function(money){
  balance -= money;
  console.log("卡上余额为： " + balance)
  notifyUser();
 }
 //通知用户
 var notifyUser = function(){
  console.log("卡上余额有变动");
 }
 return {
  deposit:deposit,
  withdraw: withdraw
 }
}
var a1 = account();
a1.deposit(100);
a1.withdraw(50); 

AngularJS로 와서 다음과 같이 작성하는 데 익숙합니다.

var app = angular.module('app',[]);
app.config();
app.controller();
app.factory();
... 

즉, 모듈을 가져온 다음 모듈에서 제공하는 메서드를 호출합니다.

angular.js 소스 코드를 보고 다음을 찾으세요.

angular = window.angular || (window.angular = {} )

이것이 각도 변수를 사용할 수 있는 이유입니다.

...
var moduleInstace = {
    provider: invokeLater('$provide','provider'),
    factory: invokeLater('$provider', 'factory'),
    service: invokeLater('$provider', 'service'),
    value: invokeLater('$provide', 'value'),
    constant: invokeLater('$provider', 'constant'...),
    animation: invokeLater('$animateProvider',...),
    filter: invokeLater('$filterProvider',...),
    controller: invokeLater('$controllerProvider',...),
    directive: invokeLater('$compileProvider',...),
    config: config,
}
return moduleInstance;
... 

위의 작성 방법은 바로 모듈 작성 방법입니다.

PS:angular.module('MyApp',[...])과 angle.module('MyApp')

angular.module('MyApp',[...])은 새 Angular 모듈을 생성하고 대괄호([...])로 묶인 종속성 목록을 로드합니다. 첫 번째 호출로 정의된 기존 모듈.

따라서 다음 코드의 경우 전체 애플리케이션에서 한 번만 사용되도록 해야 합니다.

angular.module('MyApp', [...]) //애플리케이션이 모듈형인 경우 MyModule일 수 있습니다.

모듈 참조를 변수에 저장한 다음 애플리케이션 전체에서 이 변수를 통해 모듈을 참조할 계획이 없다면 다른 파일에서 angle.module(MyApp)을 사용하면 올바른 AngularJS 모듈 참조를 얻을 수 있습니다. . 모듈의 모든 내용은 이 모듈 참조에 액세스하거나 모듈이 정의된 곳에 필요한 콘텐츠를 추가하여 정의해야 합니다.