Модули AngularJS

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

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

Приведенная выше иллюстрация наглядно иллюстрирует эту границу.

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

⚠️ Примечание к версии: Поддержка AngularJS прекратилась в январе 2022 года., Современный Угловой Используется аннотация @NgModule, и по умолчанию используются автономные компоненты. Приведённый ниже код является устаревшим.

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

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

Давайте создадим файл с именем «DemoController.js» и добавим в него следующий код.

function DemoController($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                            }

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

В этом контроллере мы просто выполняем сложение двух переменных a и b, присваиваем результат сложения этих переменных новой переменной c, а затем присваиваем его обратно переменной b. сфера объект.

Теперь давайте создадим наш основной 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',[]);

   Мы специально создаем модуль AngularJS под названием sampleApp. Это сформирует логическую границу функциональности, которую будет содержать этот модуль. Итак, в нашем примере выше у нас есть модуль, который содержит контроллер, который выполняет роль добавления двух объектов области. Следовательно, у нас может быть один модуль с логической границей, которая говорит, что этот модуль будет выполнять только функции математических вычислений для приложения.

2. 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 AngularJSшаблон, используемый для разработкиping В современных веб-приложениях принято создавать множество модулей и контроллеров для логического разделения различных уровней функциональности.

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

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

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

• Мы создадим файл 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;
});

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

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

   Созданы два отдельных модуля AngularJS: один называется 'AdditionApp', а второй — 'Sub'.tractionApp'.

2. 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>

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

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

   Мы ссылаемся на файл Utilities.js в основном файле приложения. Это позволяет нам ссылаться на любые модули AngularJS, определенные в этом файле.

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

   Мы получаем доступ к модулю AdditionApp и DemoAddController с помощью директивы ng-app и нг-контроллер соответственно.

3. {{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>

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

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

   Мы ссылаемся на файл Utilities.js в основном файле приложения. Это позволяет нам ссылаться на любые модули, определенные в этом файле.

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

   Мы получаем доступ к «Подпрограмме»tracмодуль tionApp и DemoSubtractController реализуется с помощью директивы ng-app и самого ng-controller соответственно.

3. {{d}}

   Поскольку мы ссылаемся на вышеупомянутый модуль и контроллер, мы можем обратиться к переменной $scope.d с помощью выражения. Выражение будет результатом выполнения подпрограммы.tracизменение двух переменных области видимости a и b, которое было выполнено в 'DemoSub'.tracКонтроллер tController

Часто задаваемые вопросы (FAQ)