Контролери AngularJS із прикладом контролера ng

Що таке контролер в AngularJS?

A контролер в AngularJS отримує дані з представлення, обробляє дані, а потім надсилає ці дані в представлення, яке відображається кінцевому користувачеві. Контролер матиме вашу основну бізнес-логіку. Контролер використовуватиме модель даних, виконає необхідну обробку, а потім передасть вихідні дані в представлення, яке, у свою чергу, відображається кінцевому користувачеві.

Що робить контролер з точки зору Angular?

Нижче наведено просте визначення роботи контролера AngularJS:

Основна відповідальність контролера полягає в тому, щоб контролювати дані, які передаються в представлення. Приціл і вид мають двосторонній зв'язок.
Властивості подання можуть викликати «функції» в області. Крім того, події в представленні можуть викликати «методи» в області. Наведений нижче фрагмент коду надає простий приклад функції.

Команда функція ($scope) який визначається під час визначення контролера та внутрішньої функції, яка використовується для повернення конкатенації $scope.firstName і $scope.lastName.
In AngularJS, коли ви визначаєте функцію як змінну, вона називається методом.

Дані таким чином переходять від контролера до області, а потім дані проходять назад і вперед від області до представлення.
Приціл використовується для огляду моделі. Модель можна модифікувати за допомогою методів, визначених у області видимості, які можуть запускатися через події з подання. Ми можемо визначити двостороннє прив’язування моделі від області видимості до моделі.
В ідеалі контролери не слід використовувати для маніпулювання DOM. Це має бути зроблено директивами, які ми побачимо пізніше.
Найкраще мати контролер на основі функціональності. Наприклад, якщо у вас є форма для введення, і вам потрібен контролер для цього, створіть контролер під назвою «контролер форми».

Як створити базовий контролер в AngularJS

Нижче наведено кроки для створення контролера в AngularJS:

Крок 1) Створіть базову сторінку HTML

Перш ніж ми розпочнемо створення контролера, нам потрібно налаштувати основні налаштування HTML-сторінки.

Наведений нижче фрагмент коду є простою HTML-сторінкою, яка має назву «Реєстрація події» та містить посилання на важливі бібліотеки, такі як Bootstrap, jquery та Angular.

Ми додаємо посилання на початкові таблиці стилів CSS, які використовуватимуться в поєднанні з початковими бібліотеками.
Ми додаємо посилання на бібліотеки angularjs. Отже, тепер усе, що ми робимо з angular.js у майбутньому, буде мати посилання з цієї бібліотеки.
Ми додаємо посилання на бібліотеку початкового завантаження, щоб зробити нашу веб-сторінку більш сприйнятливою до певних елементів керування.
Ми додали посилання на бібліотеки jquery, які використовуватимуться для маніпулювання DOM. Це потрібно Angular, оскільки деякі функції Angular залежать від цієї бібліотеки.

За замовчуванням наведений вище фрагмент коду буде присутній у всіх наших прикладах, щоб ми могли показати лише конкретний код angularJS у наступних розділах.

Крок 2) Перевірте файли та структуру файлів

По-друге, давайте подивимося на наші файли та структуру файлів, з яких ми збираємося почати під час нашого курсу.

Спочатку ми розділяємо наші файли на 2 папки, як це робиться з будь-якою звичайною веб-програмою. У нас є папка «CSS». Він міститиме всі наші каскадні файли таблиць стилів, а потім ми матимемо папку «lib», у якій будуть усі наші JavaScript файли.
Файл bootstrap.css розміщується в папці CSS і використовується для покращення зовнішнього вигляду нашого веб-сайту.
Angular.js — це наш основний файл, який було завантажено з сайту angularJS і зберігається в нашій папці lib.
Файл app.js міститиме наш код для контролерів.
Файл bootstrap.js використовується для доповнення до файлу bootstrap.cs, щоб додати функції початкового завантаження до нашої веб-програми.
Файл jquery буде використано для додавання на наш сайт функцій маніпулювання DOM.

Крок 3) Використовуйте код AngularJS для відображення результату

Що ми хочемо зробити тут, так це просто відобразити слова «AngularJS» як у текстовому форматі, так і в текстовому полі, коли сторінка переглядається в браузері. Давайте розглянемо приклад використання angular.js для цього:

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">

	Tutorial Name : <input type="text" ng-model="tutorialName"><br>

	This tutorial is {{tutorialName}}
</div>
<script>
	var app = angular.module('DemoApp',[]);

	app.controller('DemoController', function($scope){
	$scope.tutorialName = "Angular JS";
	});
</script>

</body>
</html>

Пояснення коду:

Команда ng-додаток Ключове слово використовується для позначення того, що цю програму слід розглядати як кутову програму. Все, що починається з префікса 'нг' відомий як директива. «DemoApp» — це назва нашої програми Angular.JS.
Ми створили тег div і в цей тег ми додали директиву ng-controller разом із назвою нашого контролера «DemoController». По суті, це робить наш тег div можливістю доступу до вмісту демонстраційного контролера. Вам потрібно згадати назву контролера в директиві, щоб переконатися, що ви можете отримати доступ до функціональних можливостей, визначених у контролері.
Ми створюємо прив’язку моделі за допомогою директиви ng-model. Це прив’язує текстове поле для назви підручника до змінної-члена “tutorialName”.
Ми створюємо змінну-член під назвою “tutorialName”, яка використовуватиметься для відображення інформації, яку користувач вводить у текстове поле для назви посібника.
Ми створюємо модуль, який буде додано до нашої програми DemoApp. Отже, тепер цей модуль стає частиною нашої програми.
У модулі ми визначаємо функцію, яка призначає значення за замовчуванням «AngularJS» нашій змінній tutorialName.

Якщо команда виконана успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

Оскільки ми присвоїли змінній tutorialName значення «Angular JS», воно відображається в текстовому полі та рядку простого тексту.

Як визначити методи в контролерах AngularJS

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

Наприклад, якщо ви хочете, щоб ваш контролер виконував 2 основні речі,

Виконайте додавання 2 чисел
Виконайте віднімання 2 чисел

Тоді вам ідеально створити 2 методи всередині вашого контролера, один для додавання, а інший для виконання віднімання.

Давайте подивимося на простому прикладі того, як ви можете визначити власні методи в контролері Angular.JS. Контролер просто поверне рядок.

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
	Tutorial Name :<input type="text" ng-model="tutorialName"><br>
	<br>
	This tutorial is {{tutorialName}}	
</div>

<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
    $scope.tutorialName = "Angular JS";
	$scope.tName = function() {
        return $scope.tName;
    };
});
</script>	
</body>
</html>

Пояснення коду:

Тут ми просто визначаємо функцію, яка повертає рядок «AngularJS». Функція приєднана до об’єкта scope через змінну-член під назвою tutorialName.
Якщо команда виконана успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

Контролер AngularJS із прикладом контролера ng

Давайте розглянемо приклад «HelloWorld», де всі функції розміщено в одному файлі. Тепер настав час розмістити код для контролера в окремих файлах.

Для цього виконайте наведені нижче дії.

Крок 1) У файл app.js додайте наступний код для свого контролера

angular.module('app',[]).controller('HelloWorldCtrl',function($scope)
{
	$scope.message = "Hello World"
});

Наведений вище код виконує такі дії:

Визначте модуль під назвою «додаток», який буде містити контролер разом із функціями контролера.
Створіть контролер з назвою «HelloWorldCtrl». Цей контролер використовуватиметься для відображення повідомлення «Hello World».
Об’єкт scope використовується для передачі інформації від контролера до представлення. Отже, у нашому випадку об’єкт scope буде використовуватися для зберігання змінної під назвою “message”.
Ми визначаємо змінну message і присвоюємо їй значення «Hello World».

Крок 2) Тепер у вашому файлі Sample.html додайте клас div, який міститиме директиву ng-controller, а потім додайте посилання на змінну-член «message»

Також не забудьте додати посилання на файл сценарію app.js, який містить вихідний код вашого контролера.

<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<div class="container">
	<div ng-controller="HelloWorldCtrl">{{message}}</div>
</div>

<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<script src="app.js"></script>

</body>
</html>

Якщо наведений вище код введено правильно, під час запуску коду в браузері буде показано наступний результат.

вихід:

Підсумки

Основна відповідальність контролера полягає у створенні об’єкта області видимості, який, у свою чергу, передається в представлення
Як створити простий контролер за допомогою директив ng-app, ng-controller і ng-model
Як додати спеціальні методи до контролера, які можна використовувати для розділення різних функцій у модулі angularjs.
Контролери можна визначити у зовнішніх файлах, щоб відокремити цей рівень від рівня View. Зазвичай це найкраща практика під час створення веб-додатків.

Що таке контролер в AngularJS?

Що робить контролер з точки зору Angular?

Як створити базовий контролер в AngularJS

СТАТТІ ПО ТЕМІ

Як визначити методи в контролерах AngularJS

Контролер AngularJS із прикладом контролера ng

Підсумки

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