Що таке модуль 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 і повертаємо її назад до об’єкту scope.
Тепер давайте створимо наш основний зразок.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'. Це сформує логічну межу для функціональності, яку буде містити цей модуль. Отже, у наведеному вище прикладі ми маємо модуль, який містить контролер, який виконує роль додавання 2 об’єктів сфери. Отже, ми можемо мати один модуль з логічною межею, який говорить, що цей модуль буде виконувати лише функціонал математичних обчислень для програми.
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 окремі Кутові модулі, одному з яких надано назву „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 через вираз. Вираз буде результатом додавання 2 змінних області а та b, що було здійснено в контролері 'DemoAddController'
Те саме, що ми зробимо для функції віднімання.
Крок 3) Створіть основні файли програми. Давайте створимо файл під назвою "ApplicationSubtraction.html" і додамо код нижче
Addition Subtraction :{{d}}Відзначимо ключові моменти в коді, написаному вище
Ми посилаємось на наш файл Utilities.js у нашому основному файлі програми. Це дозволяє нам посилатися на будь-які модулі, визначені у цьому файлі.
Ми отримуємо доступ до модуля SubtractionApp та DemoSubtractController за допомогою директиви ng-app та ng-контролера відповідно.
{{d}}Оскільки ми посилаємося на вищезгаданий модуль і контролер, ми можемо посилатися на змінну $ scope.d через вираз. Вираз буде результатом віднімання 2 змінних області обсягу a і b, яке було здійснено в контролері 'DemoSubtractController'
Резюме
- Без використання модулів AngularJS контролери починають мати глобальний масштаб, що призводить до поганих практик програмування.
- Модулі використовуються для відокремлення бізнес-логіки. Можна створити кілька модулів для логічного розділення в цих різних модулях.
- Кожен модуль AngularJS може мати власний набір контролерів, визначених і призначених йому.
- При визначенні модулів та контролерів вони зазвичай визначаються в окремих файлах JavaScript. Потім на ці файли JavaScript посилається головний файл програми.