Учебники

13) Модуль AngularJS

Январь 29, 2020

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

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

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

В этом уроке вы узнаете

Как создать модуль в 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-страницу.

<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)

    We are now attaching the controller to our AngularJS module «SampleApp». This means that if we don’t reference the module ‘sampleApp’ in our main HTML code, we will not be able to reference the functionality of our controller.

Our main HTML code will not look as shown below 

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

Let’s note the key differences in the code written above and our previous code

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

In our body tag,

  • Instead of having an empty ng-app directive, we are now calling the module sampleApp.
  • By calling this application module, we can now access the controller ‘DemoController’ and the functionality present in the demo controller.

Modules and Controllers

In Angular.JS, the pattern used for developing modern day web applications is of creating multiple modules and controllers to logically separate multiple levels of functionality.

Normally modules will be stored in separate Javascript files, which would be different from the main application file.

Let’s look at an example of how this can be achieved.

In the example below,

  • We will create a file called Utilities.js which will hold 2 modules, one for performing the functionality of addition and the other for performing the functionality of subtraction.
  • We are then going to create 2 separate application files and access the Utility file from each application file.
  • In one application file we will access the module for addition and in the other, we will access the module for subtraction.

Step 1) Define the code for the multiple modules and controllers. 

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;
});

Let’s note the key points in the code written above 

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

    There is 2 separate Angular Module created, one which is given the name ‘AdditionApp’ and the second one is given the name ‘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">

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

  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 соответственно. 

  3. {{d}}

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

Резюме

 

39
Share: