Модули AngularJS

Что такое модуль AngularJS?

Модуль определяет функциональность приложения, которая применяется ко всей HTML-странице с помощью директивы ng-app. Он определяет функциональные возможности, такие как службы, директивы и фильтры, таким образом, чтобы их можно было легко повторно использовать в разных приложениях.

Во всех наших предыдущих руководствах вы могли заметить директиву ng-app, используемую для определения вашего основного приложения Angular. Это одна из ключевых концепций модулей в Angular.JS.

Как создать модуль в AngularJS

Прежде чем мы начнем с того, что такое модуль, давайте рассмотрим пример приложения AngularJS без модуля, а затем поймем необходимость наличия модулей в вашем приложении.

Давайте рассмотрим создание файла с именем «Демоконтроллер.js» и добавив приведенный ниже код в файл

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

В приведенном выше коде мы создали функцию под названием «DemoController», которая будет действовать как контроллер в нашем приложении.

В этом контроллере мы просто добавляем две переменные 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;
                         });

Отметим ключевые отличия в коде, написанном выше.

```
var sampleApp = angular.module('sampleApp',[]);
```
Мы специально создаем модуль AngularJS под названием sampleApp. Это сформирует логическую границу функциональности, которую будет содержать этот модуль. Итак, в нашем примере выше у нас есть модуль, который содержит контроллер, который выполняет роль добавления двух объектов области. Следовательно, у нас может быть один модуль с логической границей, которая говорит, что этот модуль будет выполнять только функции математических вычислений для приложения.
```
sampleApp.controller('DemoController', function($scope)
```
Теперь мы подключаем контроллер к нашему модулю AngularJS «SampleApp». Это означает, что если мы не ссылаемся на модуль sampleApp в нашем основном HTML-коде, мы не сможем ссылаться на функциональность нашего контроллера.

Наш основной HTML-код не будет выглядеть так, как показано ниже.

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

Отметим ключевые различия в коде, написанном выше, и нашем предыдущем коде.

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

В нашем теге body

Вместо пустой директивы ng-app мы теперь вызываем модуль sampleApp.
Вызвав этот модуль приложения, мы теперь можем получить доступ к контроллеру «DemoController» и функциям, присутствующим в демонстрационном контроллере.

Модули и контроллеры в AngularJS

In Угловой.JSшаблон, используемый для разработкиping Современные веб-приложения создаются путем размещения множества модулей и контроллеров для логического разделения различных уровней функциональности.

Обычно модули хранятся в отдельных Javascript файлы, которые будут отличаться от основного файла приложения.

Давайте посмотрим на примере, как этого можно достичь.

В приведенном ниже примере

Мы создадим файл Utilities.js, который будет содержать два модуля: один для выполнения операций сложения, а другой — для выполнения операций вычитания.tracния.
Затем мы собираемся создать 2 отдельных файла приложения и получить доступ к файлу утилиты из каждого файла приложения.
В одном файле приложения мы будем обращаться к модулю для сложения, а в другом — к модулю для подстановки.tracния.

Шаг 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;
});

Отметим ключевые моменты в написанном выше коде

```
 var AdditionApp = angular.module('AdditionApp',[]);
 var SubractionApp = angular.module('SubtractionApp',[]);
```
Созданы два отдельных модуля Angular: один называется 'AdditionApp', а второй — 'Sub'.tractionApp'.
```
AdditionApp.controller('DemoAddController', function($scope)
SubractionApp.controller('DemoSubtractController', function($scope)
```
Для каждого модуля определены два отдельных контроллера: один называется DemoAddController, а другой — DemoSub.tractController. Каждый контроллер имеет отдельную логику для сложения и вычитания.tracчисловой терминологии.

Шаг 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>

Отметим ключевые моменты в написанном выше коде

```
<script src="/lib/Utilities.js"></script>
```
Мы ссылаемся на файл Utilities.js в основном файле приложения. Это позволяет нам ссылаться на любые модули AngularJS, определенные в этом файле.
```
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
```
Мы получаем доступ к модулю AdditionApp и DemoAddController с помощью директивы ng-app и нг-контроллер соответственно.
```
{{c}}
```
Поскольку мы ссылаемся на вышеупомянутый модуль и контроллер, мы можем ссылаться на переменную $scope.c через выражение. Выражение будет результатом добавления двух переменных области a и b, которое было выполнено в контроллере «DemoAddController».

Точно так же мы поступим и с подпиской.tracционная функция.

Шаг 3) Создайте основные файлы вашего приложения. Давайте создадим файл с именем «ApplicationSub».trac«tion.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>

Отметим ключевые моменты в написанном выше коде

```
<script src="/lib/Utilities.js"></script>
```
Мы ссылаемся на файл Utilities.js в основном файле приложения. Это позволяет нам ссылаться на любые модули, определенные в этом файле.
```
<div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">
```
Мы получаем доступ к «Подпрограмме»tracмодуль tionApp и DemoSubtractController реализуется с помощью директивы ng-app и самого ng-controller соответственно.
```
{{d}}
```
Поскольку мы ссылаемся на вышеупомянутый модуль и контроллер, мы можем обратиться к переменной $scope.d с помощью выражения. Выражение будет результатом выполнения подпрограммы.tracразделение двух переменных области применения a и b, которое было выполнено в 'DemoSubtractController' Контроллер

Резюме

Без использования модулей AngularJS контроллеры начинают иметь глобальную область видимости, что приводит к плохим практикам программирования.
Модули используются для разделения бизнес-логики. Можно создать несколько модулей, которые будут логически разделены внутри этих разных модулей.
Каждый модуль AngularJS может иметь свой собственный набор контроллеров, определенных и назначенных ему.
При определении модулей и контроллеров они обычно определяются в отдельных JavaСценарий файлы. Эти JavaЗатем в основном файле приложения размещаются ссылки на файлы скриптов.

Модули AngularJS

Что такое модуль AngularJS?

Как создать модуль в AngularJS

Модули и контроллеры в AngularJS

Резюме

Подведем итог этой публикации следующим образом:

Подпишитесь на рассылку