3) Контроллер

Что такое контроллер в AngularJs?

Контроллеры в AngularJs получают данные из представления, обрабатывают данные и затем отправляют эти данные в представление, которое отображается конечному пользователю. Контроллер будет иметь вашу основную бизнес-логику.

Контроллер будет использовать модель данных, выполнять необходимую обработку и затем передавать выходные данные в представление, которое, в свою очередь, отображается для конечного пользователя.

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

• Что контролер делает с точки зрения Angular
• Как построить базовый контроллер
• Как определить методы в контроллере
• Использование ng-controller во внешних файлах

Что делает контроллер с точки зрения Angular

Ниже приведено простое определение работы Angular JS Controller.



• Основная ответственность контроллера — контролировать данные, которые передаются в представление. Объем и вид имеют двустороннюю связь.
• Свойства представления могут вызывать «функции» в области видимости. Более того, события в представлении могут вызывать «методы» в области видимости. Приведенный ниже фрагмент кода дает простой пример функции.
  • Функция ($ scope), которая определяется при определении контроллера, и внутренняя функция, которая используется для возврата конкатенации $ scope.firstName и $ scope.lastName.
  • В AngularJS, когда вы определяете функцию как переменную, она называется методом.



• Данные таким образом передаются из контроллера в область, а затем данные передаются взад и вперед из области в представление.
• Область используется для представления модели представлению. Модель можно изменить с помощью методов, определенных в области, которые могут быть вызваны с помощью событий из представления. Мы можем определить двустороннюю привязку модели из области видимости к модели.
• Контроллеры в идеале не должны использоваться для манипулирования DOM. Это должно быть сделано директивами, которые мы увидим позже.
• Лучше всего иметь контроллер на основе функциональности. Например, если у вас есть форма для ввода и вам нужен контроллер для этого, создайте контроллер, называемый «контроллер формы».

Как построить базовый контроллер

Прежде чем мы начнем с создания контроллера, нам нужно сначала установить базовую настройку HTML-страницы.

Приведенный ниже фрагмент кода представляет собой простую страницу HTML, которая имеет заголовок «Регистрация события» и содержит ссылки на важные библиотеки, такие как Bootstrap, jquery и Angular.

1. Мы добавляем ссылки на таблицы стилей начальной загрузки CSS, которые будут использоваться вместе с библиотеками начальной загрузки.
2. Мы добавляем ссылки на библиотеки angularjs. Так что теперь все, что мы делаем с angular.js в будущем, будет ссылаться из этой библиотеки.
3. Мы добавляем ссылки на библиотеку начальной загрузки, чтобы сделать нашу веб-страницу более отзывчивой для определенных элементов управления.
4. Мы добавили ссылки на библиотеки jquery, которые будут использоваться для манипулирования DOM. Это требуется Angular, потому что некоторые функции Angular зависят от этой библиотеки.

По умолчанию приведенный выше фрагмент кода будет присутствовать во всех наших примерах, так что мы можем показать только конкретный код angularJS в последующих разделах.

Во-вторых, давайте посмотрим на наши файлы и файловую структуру, с которой мы собираемся начать на протяжении нашего курса.

1. Сначала мы разделяем наши файлы на 2 папки, как это делается в любом обычном веб-приложении. У нас есть папка «CSS». Он будет содержать все наши файлы каскадных таблиц стилей, а затем у нас будет папка «lib», в которой будут все наши файлы JavaScript .
2. Файл bootstrap.css находится в папке CSS и используется для придания привлекательности нашему веб-сайту.
3. Angular.js — это наш основной файл, который был загружен с сайта angularJS и хранится в нашей папке lib.
4. Файл app.js будет содержать наш код для контроллеров.
5. Файл bootstrap.js используется для дополнения файла bootstrap.cs для добавления функциональности bootstrap в наше веб-приложение.
6. Файл jquery будет использоваться для добавления функциональности манипулирования DOM на наш сайт.

Давайте рассмотрим пример использования angular.js,

Здесь мы хотим просто отобразить слова «AngularJS» как в текстовом формате, так и в текстовом поле при просмотре страницы в браузере.

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

Объяснение кода:

1. Нг-приложение ключевое слово используется для обозначения того, что данное приложение следует рассматривать в качестве углового применения. Все, что начинается с префикса ‘ng’, называется директивой. «DemoApp» — это имя, данное нашему приложению Angular.JS.
2. Мы создали тег div и в этот тег мы добавили директиву ng-controller вместе с именем нашего контроллера «DemoController». Это в основном делает наш тег div возможностью доступа к содержимому демо-контроллера. Вы должны указать имя контроллера в директиве, чтобы убедиться, что вы можете получить доступ к функциям, определенным в контроллере.
3. Мы создаем привязку модели, используя директиву ng-model. Что он делает, так это то, что он привязывает текстовое поле для имени учебника к привязке к переменной-члену «tutorialName».
4. Мы создаем переменную-член с именем «tutorialName», которая будет использоваться для отображения информации, которую пользователь вводит в текстовое поле для имени учебника.
5. Мы создаем модуль, который будет прикреплен к нашему приложению DemoApp. Таким образом, этот модуль теперь становится частью нашего приложения.
6. В модуле мы определяем функцию, которая присваивает значение по умолчанию «AngularJS» нашей переменной tutorialName.

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

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

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