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

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

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

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

Фоллоwing это простое определение работы AngularJS Controller:

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

Работа контроллера AngularJS

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

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

Ниже приведены шаги по созданию контроллера в AngularJS:

Шаг 1) Создайте базовую HTML-страницу.

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

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

Создайте базовый контроллер в AngularJS

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

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

Шаг 2) Проверьте файлы и файловую структуру.

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

Создайте базовый контроллер в AngularJS

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

Шаг 3) Используйте код AngularJS для отображения результатов.

Здесь мы хотим просто отобразить слова «AngularJS» как в текстовом формате, так и в текстовом формате. box при просмотре страницы в браузере. Давайте посмотрим пример того, как использовать 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. нг-приложение Ключевое слово используется для обозначения того, что это приложение следует рассматривать как приложение Angular. Все, что начинается с префикса 'нг' известен как Директивы. «DemoApp» — это имя, присвоенное нашему приложению Angular.JS.
  2. Мы создали тег div и в этот тег добавили директиву ng-controller вместе с именем нашего контроллера «DemoController». По сути, это дает нашему тегу div возможность доступа к содержимому демонстрационного контроллера. Вам необходимо указать имя контроллера в директиве, чтобы гарантировать доступ к функциям, определенным в контроллере.
  3. Мы создаем привязку модели, используя директиву ng-model. Это означает, что он связывает текст box чтобы имя учебника было привязано к переменной-члену «tutorialName».
  4. Мы создаем переменную-член под названием «tutorialName», которая будет использоваться для отображения информации, которую пользователь вводит в текст. box для названия учебника.
  5. Мы создаем модуль, который будет прикреплен к нашему приложению DemoApp. Итак, этот модуль теперь становится частью нашего приложения.
  6. В модуле мы определяем функцию, которая присваивает значение по умолчанию «AngularJS» нашей переменной TutorialName.

Если команда выполнена успешно, тоwing Вывод будет показан, когда вы запустите свой код в браузере.

Вывод:

Создайте базовый контроллер в AngularJS

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

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

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

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

  1. Выполнить сложение 2 чисел
  2. Выполните вычитание 2 чисел

В идеале вам следует создать внутри вашего контроллера два метода: один для сложения, а другой для вычитания.

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

Определение методов в контроллерах AngularJS

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

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

  1. Здесь мы просто определяем функцию, которая возвращает строку «AngularJS». Функция прикрепляется к объекту области через переменную-член под названием TutorialName.
  2. Если команда выполнена успешно, тоwing Вывод будет показан, когда вы запустите свой код в браузере.

Вывод:

Определение методов в контроллерах AngularJS

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

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

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

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

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

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

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

  1. Определите модуль под названием «приложение», который будет содержать контроллер вместе с его функциями.
  2. Создайте контроллер с именем «HelloWorldCtrl». Этот контроллер будет использоваться для отображения сообщения «Hello World».
  3. Объект области используется для передачи информации от контроллера к представлению. Итак, в нашем случае объект области будет использоваться для хранения переменной с именем «сообщение».
  4. Мы определяем переменную message и присваиваем ей значение «Hello World».

Шаг 2) Теперь в файл Sample.html добавьте класс div, который будет содержать директиву ng-controller, а затем добавьте ссылку на переменную-член «message».

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

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

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

Если приведенный выше код введен правильно, произойдет следующее:wing Вывод будет показан, когда вы запустите свой код в браузере.

Вывод:

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

Выводы

  • Основная ответственность контроллера — создать объект области видимости, который, в свою очередь, передается представлению.
  • Как создать простой контроллер с помощью директив ng-app, ng-controller и ng-model
  • Как добавить в контроллер собственные методы, которые можно использовать для разделения различных функций внутри модуля angularjs.
  • Контроллеры можно определить во внешних файлах, чтобы отделить этот уровень от слоя представления. Обычно это лучшая практика при создании веб-приложений.