Контроллеры AngularJS с примером ng-Controller

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

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

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

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

Основная ответственность контроллера — управлять данными, которые передаются в представление. Область видимости и представление имеют двустороннюю связь.
Свойства представления могут вызывать «функции» в области видимости. Более того, события в представлении могут вызывать «методы» в области видимости. В приведенном ниже фрагменте кода приведен простой пример функции.

Команда функция ($ область действия) который определяется при определении контроллера и внутренней функции, которая используется для возврата конкатенации $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) Проверьте файлы и файловую структуру.

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

Сначала мы разделяем наши файлы на две папки, как это делается в любом обычном веб-приложении. У нас есть папка «CSS». Он будет содержать все наши файлы каскадных таблиц стилей, а затем у нас будет папка «lib», в которой будут храниться все наши файлы. JavaСценарий файлы.
Файл 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>

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

Команда нг-приложение Ключевое слово используется для обозначения того, что это приложение следует рассматривать как приложение Angular. Все, что начинается с префикса 'нг' известен как Директивы. «DemoApp» — это имя, присвоенное нашему приложению Angular.JS.
Мы создали тег div и в этот тег добавили директиву ng-controller вместе с именем нашего контроллера «DemoController». По сути, это дает нашему тегу div возможность доступа к содержимому демонстрационного контроллера. Вам необходимо указать имя контроллера в директиве, чтобы гарантировать доступ к функциям, определенным в контроллере.
Мы создаем привязку модели, используя директиву ng-model. Это означает, что текстовое поле для имени учебника привязывается к переменной-члену «tutorialName».
Мы создаем переменную-член под названием «tutorialName», которая будет использоваться для отображения информации, которую пользователь вводит в текстовое поле для имени учебника.
Мы создаем модуль, который будет прикреплен к нашему приложению DemoApp. Итак, этот модуль теперь становится частью нашего приложения.
В модуле мы определяем функцию, которая присваивает значение по умолчанию «AngularJS» нашей переменной TutorialName.

Если команда выполнена успешно, при запуске кода в браузере будет отображен следующий вывод.

Вывод:

Поскольку мы присвоили переменной TutorialName значение «Angular JS», оно отображается в текстовом поле и в строке обычного текста.

Как определить методы в контроллерах AngularJS

Обычно требуется определить в контроллере несколько методов для разделения бизнес-логики.

Например, предположим, что вы хотите, чтобы ваш контроллер выполнял две основные вещи:

Выполнить сложение 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». Функция прикрепляется к объекту области через переменную-член под названием TutorialName.
Если команда выполнена успешно, при запуске кода в браузере будет отображен следующий вывод.

Вывод:

Контроллер AngularJS с примером ng-Controller

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

Давайте выполним следующие шаги, чтобы сделать это:

Шаг 1) В файл app.js добавьте следующий код для вашего контроллера.

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

Приведенный выше код выполняет следующие действия:

Определите модуль под названием «приложение», который будет содержать контроллер вместе с его функциями.
Создайте контроллер с именем «HelloWorldCtrl». Этот контроллер будет использоваться для отображения сообщения «Hello World».
Объект области используется для передачи информации от контроллера к представлению. Итак, в нашем случае объект области будет использоваться для хранения переменной с именем «сообщение».
Мы определяем переменную 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.
Контроллеры можно определить во внешних файлах, чтобы отделить этот уровень от слоя представления. Обычно это лучшая практика при создании веб-приложений.

Вы могли бы: