AngularJS 모듈

AngularJS 모듈이란 무엇입니까?

모듈은 ng-app 지시문을 사용하여 전체 HTML 페이지에 적용되는 애플리케이션 기능을 정의합니다. 서비스, ​​지시문, 필터 등의 기능을 다른 애플리케이션에서 쉽게 재사용할 수 있는 방식으로 정의합니다.

이전 튜토리얼에서는 기본 Angular 애플리케이션을 정의하는 데 사용된 ng-app 지시문을 보셨을 것입니다. 이는 Angular.JS 모듈의 핵심 개념 중 하나입니다.

AngularJS에서 모듈을 만드는 방법

모듈이 무엇인지 시작하기 전에, 모듈이 없는 AngularJS 애플리케이션의 예를 살펴보고 애플리케이션에 모듈이 있어야 하는 필요성을 이해해 보겠습니다.

다음과 같은 파일을 생성하는 것을 고려해 보겠습니다. “데모컨트롤러.js” 파일에 아래 코드를 추가합니다.

Function Democontroller($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                            });

위 코드에서는 애플리케이션 내에서 컨트롤러 역할을 할 "DemoController"라는 함수를 만들었습니다.

이 컨트롤러에서는 2개의 변수 a와 b를 추가하고 이러한 변수의 추가를 새 변수 c에 할당한 다음 다시 범위 개체에 할당합니다.

이제 기본 애플리케이션이 될 기본 Sample.html을 만들어 보겠습니다. HTML 페이지에 아래 코드 조각을 삽입해 보겠습니다.

<body ng-app="">
      <div ng-controller="DemoController">
      <h3> Guru99 Global Event</h3>
      {{c}}

위 코드에서는 DemoController를 포함시킨 다음 표현식을 통해 $scope.c 변수의 값을 호출합니다.

하지만 ng-app 지시어에 공백 값이 있다는 점을 확인하세요.

  • 이는 기본적으로 ng-app 지시문의 컨텍스트 내에서 호출되는 모든 컨트롤러에 전역적으로 액세스할 수 있음을 의미합니다. 여러 컨트롤러를 서로 구분하는 경계가 없습니다.
  • 현대 프로그래밍에서는 컨트롤러를 모듈에 연결하지 않고 전역적으로 액세스할 수 있게 만드는 것은 나쁜 습관입니다. 컨트롤러에 대해 일부 논리적 경계가 정의되어 있어야 합니다.

그리고 이것이 바로 모듈이 들어오는 곳입니다. 모듈은 경계를 분리하고 기능에 따라 컨트롤러를 분리하는 데 사용됩니다.

위의 코드를 변경하여 모듈을 구현하고 컨트롤러를 이 모듈에 연결해 보겠습니다.

var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('DemoController', function($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                         });

위에 작성된 코드의 주요 차이점을 살펴보겠습니다.

  1. var sampleApp = angular.module('sampleApp',[]);

    우리는 구체적으로 'sampleApp'이라는 AngularJS 모듈을 만들고 있습니다. 이는 이 모듈에 포함될 기능에 대한 논리적 경계를 형성합니다. 따라서 위의 예에는 2개의 범위 개체를 추가하는 역할을 수행하는 컨트롤러가 포함된 모듈이 있습니다. 따라서 이 모듈은 애플리케이션에 대한 수학적 계산 기능만 수행한다는 논리적 경계를 가진 하나의 모듈을 가질 수 있습니다.

  2. sampleApp.controller('DemoController', function($scope)

    이제 컨트롤러를 AngularJS 모듈 "SampleApp"에 연결하고 있습니다. 즉, 기본 HTML 코드에서 'sampleApp' 모듈을 참조하지 않으면 컨트롤러의 기능을 참조할 수 없습니다.

기본 HTML 코드는 아래와 같이 표시되지 않습니다.

<body ng-app="'sampleApp'">
                           <div ng-controller="DemoController">
                           <h3> Guru99 Global Event</h3>
                		   {{c}}

위에 작성된 코드와 이전 코드의 주요 차이점을 살펴보겠습니다.

<body ng-app="'sampleApp'">

body 태그에는

  • 빈 ng-app 지시문을 사용하는 대신 이제 moduleApp을 호출합니다.
  • 이 애플리케이션 모듈을 호출하면 이제 'DemoController' 컨트롤러와 데모 컨트롤러에 있는 기능에 액세스할 수 있습니다.

AngularJS의 모듈 및 컨트롤러

In Angular.JS에서 현대 웹 애플리케이션 개발에 사용되는 패턴은 여러 수준의 기능을 논리적으로 분리하기 위해 여러 모듈과 컨트롤러를 만드는 것입니다.

일반적으로 모듈은 기본 애플리케이션 파일과 다른 별도의 Javascript 파일에 저장됩니다.

이것이 어떻게 달성될 수 있는지에 대한 예를 살펴보겠습니다.

아래 예에서

  • 우리는 2개의 모듈을 포함하는 Utilities.js라는 파일을 생성할 것입니다. 하나는 덧셈 기능을 수행하고 다른 하나는 뺄셈 기능을 수행합니다.
  • 그런 다음 2개의 별도 애플리케이션 파일을 생성하고 각 애플리케이션 파일에서 유틸리티 파일에 액세스하겠습니다.
  • 한 응용 프로그램 파일에서는 추가를 위해 모듈에 액세스하고 다른 응용 프로그램 파일에서는 빼기를 위해 모듈에 액세스합니다.

단계 1) 여러 모듈과 컨트롤러에 대한 코드를 정의합니다.

var AdditionApp = angular.module('AdditionApp',[]);
AdditionApp.controller('DemoAddController', function($scope) {
       $scope.a=5;
       $scope.b=6;
       $scope.c=$scope.a + $scope.b;
});
var SubractionApp = angular.module('SubtractionApp',[]);
SubractionApp.controller('DemoSubtractController', function($scope) {
       $scope.a=8;
       $scope.b=6;
       $scope.d=$scope.a - $scope.b;
});

위에 작성한 코드의 핵심 사항을 알아두자

  1.  var AdditionApp = angular.module('AdditionApp',[]);
     var SubractionApp = angular.module('SubtractionApp',[]);

    2개의 별도 Angular 모듈이 생성되었습니다. 하나는 'AdditionApp'이라는 이름이 지정되고 두 번째 모듈은 'SubtractionApp'이라는 이름이 지정됩니다.

  2. AdditionApp.controller('DemoAddController', function($scope)
    SubractionApp.controller('DemoSubtractController', function($scope)

    각 모듈에는 2개의 별도 컨트롤러가 정의되어 있습니다. 하나는 DemoAddController이고 다른 하나는 DemoSubtractController입니다. 각 컨트롤러에는 숫자의 덧셈과 뺄셈을 위한 별도의 논리가 있습니다.

단계 2) 기본 애플리케이션 파일을 만듭니다. ApplicationAddition.html이라는 파일을 만들고 아래 코드를 추가해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
    Addition :{{c}}

</div>
</body>
</html>

위에 작성한 코드의 핵심 사항을 알아두자

  1. <script src="/lib/Utilities.js"></script>

    우리는 기본 애플리케이션 파일에서 Utilities.js 파일을 참조하고 있습니다. 이를 통해 이 파일에 정의된 모든 AngularJS 모듈을 참조할 수 있습니다.

  2. <div ng-app = "AdditionApp" ng-controller="DemoAddController">

    ng-app 지시문과 다음을 사용하여 'AdditionApp' 모듈과 DemoAddController에 액세스하고 있습니다. ng-컨트롤러 각각.

  3. {{c}}

    위에서 언급한 모듈과 컨트롤러를 참조하고 있으므로 표현식을 통해 $scope.c 변수를 참조할 수 있습니다. 표현식은 'DemoAddController' 컨트롤러에서 수행된 2개의 범위 변수 a와 b를 추가한 결과입니다.

    빼기 함수에 대해서도 같은 방식으로 수행합니다.

단계 3) 기본 애플리케이션 파일을 만듭니다. “ApplicationSubtraction.html”이라는 파일을 생성하고 아래 코드를 추가해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "SubtractionApp" ng-controller="DemoSubtractController">
    Subtraction :{{d}}
  
</div>
</body>
</html>

위에 작성한 코드의 핵심 사항을 알아두자

  1. <script src="/lib/Utilities.js"></script>

    우리는 기본 애플리케이션 파일에서 Utilities.js 파일을 참조하고 있습니다. 이를 통해 이 파일에 정의된 모든 모듈을 참조할 수 있습니다.

  2. <div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">

    우리는 ng-app 지시문과 ng-controller를 각각 사용하여 'SubtractionApp 모듈과 DemoSubtractController에 액세스하고 있습니다.

  3. {{d}}

    위에서 언급한 모듈과 컨트롤러를 참조하고 있으므로 표현식을 통해 $scope.d 변수를 참조할 수 있습니다. 표현식은 다음에서 수행된 2개의 범위 변수 a와 b를 뺀 결과입니다. '데모SubtractController' 제어 장치

요약

  • AngularJS 모듈을 사용하지 않으면 컨트롤러가 전역 범위를 갖게 되어 잘못된 프로그래밍 관행이 발생하게 됩니다.
  • 모듈은 비즈니스 로직을 분리하는 데 사용됩니다. 이러한 서로 다른 모듈 내에서 논리적으로 분리되도록 여러 모듈을 만들 수 있습니다.
  • 각 AngularJS 모듈에는 자체 컨트롤러 세트가 정의되고 할당될 수 있습니다.
  • 모듈과 컨트롤러를 정의할 때 일반적으로 별도로 정의됩니다. 자바 스크립트 파일. 그런 다음 이러한 JavaScript 파일은 기본 애플리케이션 파일에서 참조됩니다.