Модули AngularJS

Автор: Джеймс Хартман Джеймс Хартман
Hours обновленный

Что такое модуль 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;
                         });

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

  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 Угловой.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;
});

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

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

    Создано два отдельных модуля Angular: одному присвоено имя «AdditionApp», а второму — «SubtractionApp».

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

    Для каждого модуля определены два отдельных контроллера: один называется 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">

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

  3. {{c}}

    Поскольку мы ссылаемся на вышеупомянутый модуль и контроллер, мы можем ссылаться на переменную $scope.c через выражение. Выражение будет результатом добавления двух переменных области a и b, которое было выполнено в контроллере «DemoAddController».

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

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

    Мы получаем доступ к модулю SubtractionApp и DemoSubtractController, используя директиву ng-app и ng-controller соответственно.

  3. {{d}}

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

Итого

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

Вы могли бы: