Модулі AngularJS

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

Давайте звернемо увагу на ключові відмінності в коді, написаному вище

```
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 Angular.JS, шаблон, який використовується для розробки сучасних веб-додатків, полягає у створенні кількох модулів і контролерів для логічного розділення кількох рівнів функціональності.

Зазвичай модулі зберігаються окремо Javascript файли, які відрізнятимуться від основного файлу програми.

Давайте розглянемо приклад того, як цього можна досягти.

У наведеному нижче прикладі,

Ми створимо файл під назвою Utilities.js, який буде містити 2 модулі, один для виконання функцій додавання, а інший для виконання функцій віднімання.
Потім ми збираємося створити 2 окремі файли програми та отримати доступ до файлу Utility з кожного файлу програми.
В одному файлі програми ми матимемо доступ до модуля для додавання, а в іншому – до модуля для віднімання.

Крок 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 і додамо наведений нижче код

<!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 і ng-контролер відповідно.
```
{{c}}
```
Оскільки ми посилаємося на вищезгаданий модуль і контролер, ми можемо посилатися на змінну $scope.c через вираз. Вираз буде результатом додавання 2 змінних області видимості 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>

Давайте звернемо увагу на ключові моменти коду, написаного вище

```
<script src="/lib/Utilities.js"></script>
```
Ми посилаємося на файл Utilities.js у головному файлі програми. Це дозволяє посилатися на будь-які модулі, визначені в цьому файлі.
```
<div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">
```
Ми отримуємо доступ до модуля SubtractionApp і DemoSubtractController за допомогою директиви ng-app і ng-controller відповідно.
```
{{d}}
```
Оскільки ми посилаємося на вищезгаданий модуль і контролер, ми можемо посилатися на змінну $scope.d через вираз. Вираз буде результатом віднімання 2 змінних області видимості a і b, яке було виконано в 'DemoSubtractController' контролер

Підсумки

Без використання модулів AngularJS контролери починають мати глобальну область видимості, що призводить до неправильної практики програмування.
Модулі використовуються для розділення бізнес-логіки. Можна створити кілька модулів, які логічно розділяються в цих різних модулях.
Для кожного модуля AngularJS може бути визначений і призначений власний набір контролерів.
Під час визначення модулів і контролерів вони зазвичай визначаються окремо JavaScript файли. Ці JavaФайли сценаріїв потім посилаються в основному файлі програми.

Модулі AngularJS

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

Як створити модуль в AngularJS

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

Підсумки

Підсумуйте цей пост за допомогою:

Підпишіться на розсилку