Что такое модуль AngularJS?
Модуль определяет функциональность приложения, которая применяется ко всей HTML-странице с помощью директивы ng-app. Он определяет функциональные возможности, такие как службы, директивы и фильтры, таким образом, чтобы упростить их повторное использование в различных приложениях.
Во всех наших предыдущих руководствах вы могли заметить директиву ng-app, используемую для определения вашего основного приложения Angular. Это одно из ключевых понятий модулей в Angular.JS.
В этом руководстве вы узнаете:
- Как создать модуль в AngularJS
- Модули и контроллеры
Как создать модуль в AngularJS
Прежде чем мы начнем с того, что такое модуль, давайте рассмотрим пример приложения AngularJS без модуля, а затем поймем необходимость наличия модулей в вашем приложении.
Давайте рассмотрим создание файла с именем «DemoController.js» и добавление в него приведенного ниже кода.
Function Democontroller($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});
В приведенном выше коде мы создали функцию под названием «DemoController», которая будет действовать как контроллер в нашем приложении.
В этом контроллере мы просто выполняем добавление 2 переменных a и b и назначаем добавление этих переменных новой переменной c и присваиваем ее обратно объекту области видимости.
Теперь давайте создадим наш основной Sample.html, который будет нашим основным приложением. Давайте вставим приведенный ниже фрагмент кода на нашу HTML-страницу.
Глобальное событие Guru99
{{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-код не будет выглядеть так, как показано ниже.
Guru99 Global Event
{{c}}Отметим ключевые различия в коде, написанном выше, и в нашем предыдущем коде.
В нашем теге тела
- Вместо пустой директивы ng-app теперь мы вызываем модуль sampleApp.
- Вызывая этот модуль приложения, мы теперь можем получить доступ к контроллеру DemoController и функциям, присутствующим в демонстрационном контроллере.
Модули и контроллеры
В Angular.JS шаблон, используемый для разработки современных веб-приложений, заключается в создании нескольких модулей и контроллеров для логического разделения нескольких уровней функциональности.
Обычно модули хранятся в отдельных файлах Javascript, которые будут отличаться от основного файла приложения.
Давайте посмотрим на примере, как этого можно достичь.
В приведенном ниже примере
- Мы создадим файл под названием Utilities.js, который будет содержать 2 модуля, один для выполнения функции сложения, а другой для выполнения функции вычитания.
- Затем мы собираемся создать 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;});Отметим ключевые моменты в написанном выше коде.
var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);Создано 2 отдельных модуля Angular, одному из которых присвоено имя «AdditionApp», а второму - «SubtractionApp».
AdditionApp.controller('DemoAddController', function($scope)SubractionApp.controller('DemoSubtractController', function($scope)Для каждого модуля определены 2 отдельных контроллера: один называется DemoAddController, а другой - DemoSubtractController. Каждый контроллер имеет отдельную логику для сложения и вычитания чисел.
Шаг 2) Создайте основные файлы приложения. Давайте создадим файл с именем ApplicationAddition.html и добавим приведенный ниже код.
Addition Addition :{{c}}Отметим ключевые моменты в написанном выше коде.
Мы ссылаемся на наш файл Utilities.js в нашем основном файле приложения. Это позволяет нам ссылаться на любые модули AngularJS, определенные в этом файле.
Мы получаем доступ к модулю AdditionApp и DemoAddController с помощью директивы ng-app и контроллера ng соответственно.
{{c}}Поскольку мы ссылаемся на вышеупомянутый модуль и контроллер, мы можем ссылаться на переменную $ scope.c через выражение. Выражение будет результатом добавления двух переменных области a и b, которое было выполнено в контроллере DemoAddController.
Так же поступим и с функцией вычитания.
Шаг 3) Создайте основные файлы приложения. Давайте создадим файл с названием «ApplicationSubtraction.html» и добавим приведенный ниже код.
Addition Subtraction :{{d}}Отметим ключевые моменты в написанном выше коде.
Мы ссылаемся на наш файл Utilities.js в нашем основном файле приложения. Это позволяет нам ссылаться на любые модули, определенные в этом файле.
Мы получаем доступ к модулю SubtractionApp и DemoSubtractController с помощью директивы ng-app и ng-controller соответственно.
{{d}}Поскольку мы ссылаемся на вышеупомянутый модуль и контроллер, мы можем ссылаться на переменную $ scope.d через выражение. Выражение будет результатом вычитания двух переменных области видимости a и b, которое было выполнено в контроллере DemoSubtractController.
Резюме
- Без использования модулей AngularJS контроллеры начинают иметь глобальную область видимости, что приводит к плохим методам программирования.
- Модули используются для разделения бизнес-логики. Можно создать несколько модулей, которые будут логически разделены между этими разными модулями.
- Каждый модуль AngularJS может иметь свой собственный набор контроллеров, определенных и назначенных ему.
- При определении модулей и контроллеров они обычно определяются в отдельных файлах JavaScript. Затем на эти файлы JavaScript ссылаются в основном файле приложения.