Що таке контролер у AngularJs?
Контролери в AngularJs бере дані з подання, обробляє дані, а потім надсилає ці дані до подання, яке відображається кінцевому користувачеві. Контролер матиме вашу основну бізнес-логіку.
Контролер використовуватиме модель даних, здійснить необхідну обробку, а потім передасть висновок у подання, яке, у свою чергу, відображається кінцевому користувачеві.
У цьому підручнику ви дізнаєтесь-
- Що робить контролер з точки зору Angular
- Як створити базовий контролер
- Як визначити методи в контролері
- Використання ng-контролера у зовнішніх файлах
- Основна відповідальність контролера - контролювати дані, які передаються у подання. Обсяг і вигляд мають двосторонній зв'язок.
- Властивості подання можуть викликати "функції" на області. Крім того, події у поданні можуть викликати "методи" для області. У наведеному нижче фрагменті коду наведено простий приклад функції.
- Функція ($ scope), яка визначається при визначенні контролера, і внутрішня функція, яка використовується для повернення конкатенації $ scope.firstName та $ scope.lastName.
- У AngularJS, коли ви визначаєте функцію як змінну, вона відома як метод.
- Дані таким чином передаються від контролера до області, а потім дані переходять назад і назад від області до подання.
- Область застосування використовується, щоб виставити модель на огляд. Модель може бути змінена за допомогою методів, визначених у області, які можуть ініціюватися через події з подання. Ми можемо визначити двосторонню прив’язку моделі від області дії до моделі.
- Контролери в ідеалі не повинні використовуватися для маніпулювання DOM. Це повинно бути зроблено директивами, які ми побачимо пізніше.
- Найкраща практика - мати контролер на основі функціональності. Наприклад, якщо у вас є форма для введення і вам потрібен контролер для цього, створіть контролер, який називається "контролер форми".
- Ми додаємо посилання на таблиці стилів CSS bootstrap, які будуть використовуватися разом із бібліотеками bootstrap.
- Ми додаємо посилання на бібліотеки angularjs. Отже, все, що ми робимо з angular.js в майбутньому, буде посилатися з цієї бібліотеки.
- Ми додаємо посилання на бібліотеку bootstrap, щоб зробити нашу веб-сторінку більш чутливою для певних елементів керування.
- Ми додали посилання на бібліотеки jquery, які будуть використовуватися для маніпулювання DOM. Це вимагає Angular, оскільки деякі функції Angular залежать від цієї бібліотеки.
- Спочатку ми розділяємо наші файли на 2 папки, як це робиться з будь-яким звичайним веб-додатком. У нас є папка "CSS". Він буде містити всі наші каскадні файли таблиць стилів, а потім у нас буде наша папка "lib", в якій будуть розміщені всі наші файли JavaScript.
- Файл bootstrap.css розміщений у папці CSS, і він використовувався для створення гарного зовнішнього вигляду нашого веб-сайту.
- Angular.js - це наш основний файл, який було завантажено з сайту angularJS і збережено в нашій папці lib.
- Файл app.js міститиме наш код для контролерів.
- Файл bootstrap.js використовується для доповнення файлу bootstrap.cs для додавання функцій завантаження до нашого веб-додатку.
- Файл jquery буде використаний для додавання функцій маніпулювання DOM на наш сайт.
Що робить контролер з точки зору Angular
Далі наведено просте визначення роботи Angular JS Controller.
Як створити базовий контролер
Перш ніж ми почнемо зі створення контролера, нам слід спочатку створити основне налаштування сторінки HTML.
Наведений нижче фрагмент коду - це проста HTML-сторінка, яка має назву "Реєстрація подій" і містить посилання на такі важливі бібліотеки, як Bootstrap, jquery та Angular.
За замовчуванням наведений вище фрагмент коду буде присутній у всіх наших прикладах, так що ми можемо показати лише конкретний код angularJS у наступних розділах.
По-друге, давайте розглянемо наші файли та структуру файлів, з яких ми збираємося розпочати протягом нашого курсу.
Давайте побачимо приклад того, як використовувати angular.js,
Тут ми хочемо лише відобразити слова "AngularJS" як у текстовому форматі, так і в текстовому полі під час перегляду сторінки у браузері.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Пояснення коду:
- Нг-додаток ключове слово використовується для позначення того, що цей додаток слід розглядати в якості кутового застосування. Все, що починається з префікса 'ng' , називається директивою. "DemoApp" - це ім'я, надане нашому додатку Angular.JS.
- Ми створили тег div і в цей тег ми додали директиву ng-controller разом із назвою нашого контролера "DemoController". Це в основному робить наш тег div можливістю доступу до вмісту Демо-контролера. Вам потрібно вказати ім'я контролера відповідно до директиви, щоб забезпечити можливість доступу до функціональних можливостей, визначених у контролері.
- Ми створюємо прив’язку моделі за допомогою директиви ng-model. Це робить те, що воно пов'язує текстове поле для "Ім'я підручника" з прив'язкою до змінної-члена "tutorialName".
- Ми створюємо змінну-учасника під назвою "tutorialName", яка буде використовуватися для відображення інформації, яку користувач вводить у текстове поле для "Ім'я підручника".
- Ми створюємо модуль, який буде приєднаний до нашої програми DemoApp. Отже, цей модуль тепер стає частиною нашого додатку.
- У модулі ми визначаємо функцію, яка присвоює значення "AngularJS" за замовчуванням нашій змінній tutorialName.
Якщо команда успішно виконана, під час запуску коду в браузері буде показано наступний результат.
Вихід:
Оскільки ми призначили змінній tutorialName значення "Angular JS", це відображається у текстовому полі та у текстовому рядку.
Як визначити методи в контролері
Як правило, хочеться визначити кілька методів у контролері, щоб відокремити бізнес-логіку.
Наприклад, припустимо, якщо ви хочете, щоб ваш контролер виконував 2 основні речі,
- Виконайте додавання 2 чисел
- Виконайте віднімання 2 чисел
Потім ви в ідеалі створили б 2 методи всередині свого контролера, один для виконання додавання, а інший для віднімання.
Давайте побачимо простий приклад того, як ви можете визначити власні методи в контролері Angular.JS. Контролер просто поверне рядок.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Пояснення коду:
- Тут ми просто визначаємо функцію, яка повертає рядок "AngularJS". Функція приєднується до об'єкта області за допомогою змінної-члена, що називається tutorialName.
- Якщо команда успішно виконана, під час запуску коду в браузері буде показано наступний результат.
Вихід:
Використання ng-контролера у зовнішніх файлах
Давайте подивимось на приклад "HelloWorld", де вся функціональність була розміщена в одному файлі. Тепер прийшов час розмістити код контролера в окремих файлах.
Для цього виконайте наведені нижче дії.
Крок 1) У файлі app.js додайте такий код для свого контролера
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
Наведений вище код робить наступні дії,
- Визначте модуль під назвою "додаток", який міститиме контролер разом із функціональністю контролера.
- Створіть контролер з ім'ям "HelloWorldCtrl". Цей контролер буде використовуватися для функціонального відображення повідомлення "Hello World".
- Об'єкт обсягу використовується для передачі інформації від контролера до подання. Отже, у нашому випадку об’єкт обсягу буде використовуватися для утримання змінної, яка називається «повідомлення».
- Ми визначаємо повідомлення змінної та присвоюємо йому значення "Hello World".
Крок 2) Тепер у вашому файлі Sample.html додайте клас div, який буде містити директиву ng-controller, а потім додайте посилання на змінну-член "message"
Також не забудьте додати посилання на файл сценарію app.js, який має вихідний код для вашого контролера.
Event Registration Guru99 Global Event
{{message}}
Якщо вищевказаний код введено правильно, під час запуску коду в браузері буде показано наступний результат.
Вихід:
Резюме
- Основна відповідальність контролера полягає у створенні об'єкта сфери дії, який, у свою чергу, передається до подання
- Як створити простий контролер за допомогою директив ng-app, ng-controller та ng-model
- Як додати власні методи до контролера, які можна використовувати для розділення різних функціональних можливостей в модулі angularjs.
- Контролери можна визначити у зовнішніх файлах, щоб відокремити цей шар від шару Перегляд. Зазвичай це найкраща практика при створенні веб-додатків.