AngularJS контролери с пример за ng-контролер

⚡ Умно обобщение

Контролерът в AngularJS съхранява бизнес логиката на екрана. Той получава данни чрез обекта scope, обработва ги и показва резултата обратно на изгледа (view).ping маркиране на презентации, освободено от логиката на приложението.

🎯 Основна отговорност: Контролерът попълва обекта в обхвата и предоставя методи на изгледа; той не манипулира DOM.
🔗 Окабеляване: Директивата ng-controller свързва именуван контролер с елемент, предоставяйки на този елемент и неговите деца достъп до обхвата на контролера.
🔁 Двупосочно подвързване: ng-model свързва поле на формуляр със свойство на обхват, така че редакциите в изгледа актуализират контролера и обратното.
🧩 Методи: Функциите, прикрепени към обхвата, разделят отделни части от логиката и могат да се извикват директно от изрази за изглед.
???? ️ Синтаксис на controllerAs: Алиасинг на контролер и свързване към него this Премахва неяснотата, когато контролерите са вложени един в друг.
📁 Разделяне: Преместването на контролерите в специален app.js файл запазва слоя за изглед независим от логическия слой.

Прочетете повече

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

A Регулатор В AngularJS данните се вземат от изгледа (View), обработват се и след това се изпращат към изгледа (View), който се показва на крайния потребител. Контролерът (Controller) съхранява основната бизнес логика. Той използва модела на данните, извършва необходимата обработка и след това предава резултата към изгледа (View).

⚠️ Бележка към версията: AngularJS (клон 1.x) достигна края на жизнения си цикъл на 31 декември 2021 г. и не получава допълнителни корекции за сигурност. Концепциите по-долу все още се отнасят за наследени приложения; в съвременния Angular същата роля се изпълнява от клас компонент, а не от контролер.

Знанието какво представлява контролерът оставя един отворен въпрос: как той всъщност комуникира с изгледа. Следващият раздел отговаря на това.

Какво прави контролерът от гледна точка на Angular

Следва едно просто определение за работата на AngularJS контролер:

Основната отговорност на администратора е да контролира данните, които се предават на изгледа. Обхватът и изгледът имат двупосочна комуникация.
Свойствата и събитията на изгледа могат да извикват функции в обхвата. Фрагментът по-долу показва функция ($ обхват) декларирано с контролера плюс вътрешна функция, връщаща $scope.firstName намлява $scope.lastName присъедини се. В AngularJS, функция, дефинирана като променлива, е метод.

Данните преминават от контролера към обхвата (scope) и след това напред-назад между обхвата (scope) и изгледа (view).
Обхватът предоставя модела на изгледа. Моделът може да бъде модифициран чрез методи, дефинирани в обхвата, които се задействат от събития от изгледа.
Контролерите не трябва да се използват за манипулиране на DOM. Това е задачата на директиви.
Най-добрата практика е контролерите да се базират на функционалност. Ако имате входна форма, която се нуждае от контролер, създайте такъв, наречен „контролер на форма“.

След като механизмът е разбран, следващият раздел изгражда контролер от празна страница.

Как да изградите основен контролер в AngularJS

По-долу са стъпките за създаване на контролер в AngularJS.

Стъпка 1) Създайте основна HTML страница

Преди да се създаде контролер, основната HTML страница трябва да е налична. Фрагментът по-долу е проста страница, озаглавена „Регистрация на събитие“, която препраща към Bootstrap и AngularJS.

Препратки към Bootstrap CSS стилов лист, използван заедно с Bootstrap библиотека.
Препратка към библиотеката AngularJS. Всичко, което се прави с AngularJS оттук нататък, се обработва от този файл.
Препратка към Bootstrap библиотека, която прави определени контроли адаптивни.

⚠️ Корекция: оригинално зареденият jQuery и заявяваше, че AngularJS зависи от него. Не е така. AngularJS се доставя с jqLite, вградено подмножество на jQuery API, и се надгражда до пълната версия на jQuery само ако jQuery се зареди. преди то. Препратката е премахната.

Стъпка 2) Проверете файловете и файловата структура

Файловете са разделени в две папки, както във всяко конвенционално уеб приложение: „css“ за стилови таблици и „lib“ за JavaСценарий файлове.
bootstrap.css се намира в папката css и придава на сайта неговия вид и усещане.
angular.js е основната библиотека, изтеглена от сайта на AngularJS и съхранявана в lib.
app.js ще съдържа кода за контролерите.

Стъпка 3) Използвайте AngularJS код за показване на изхода

Целта тук е думите „AngularJS“ да се показват както като обикновен текст, така и в текстово поле, когато страницата се отвори в браузъра.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1> Guru99 Global Event</h1>

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

<script src="lib/angular.js"></script>
<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";
}]);
</script>
</body>
</html>

Code Обяснение:

ng-приложение маркира този елемент като корен на AngularJS приложение. Атрибути с префикс нг- са вградени директиви. „DemoApp“ е името, дадено на приложението.
Дивът носи ng-контролер с името „DemoController“, което дава на този елемент и всичко в него достъп до обхвата на контролера.
ng-модел създава обвързване на модела, като обвързва текстовото поле „Име на урока“ със свойството „обхват“ tutorialName.
Модулът DemoApp се създава и контролерът присвоява стойност по подразбиране „AngularJS“ на tutorialName.

⚠️ Приложени са корекции. Първоначалната обява е декларирана chrset="UTF 8", което не е нито валиден атрибут, нито валидно име за кодиране, и зареди AngularJS два пъти — веднъж от CDN и веднъж от lib/angular.jsДвойното зареждане на библиотеката пререгистрира модулната система и води до непредсказуемо поведение. Анотацията на масива от зависимости ['$scope', function($scope){…}] беше добавен и , без който контролерът прекъсва в момента, в който файлът бъде минифициран.

Изход:

защото tutorialName беше присвоена стойност „AngularJS“, тази стойност се появява в текстовото поле и в реда за обикновен текст. Едно свойство е достатъчно за демонстрация; реалните контролери обикновено също показват поведение, което е разгледано в следващия раздел.

Как да дефинирате методи в AngularJS контролери

Обикновено в контролер се дефинират множество методи, за да се раздели бизнес логиката. Ако контролерът трябва да добави две числа и подчинени...tracАко имате две числа, бихте създали по един метод за всяка операция.

Примерът по-долу дефинира персонализиран метод вътре в AngularJS контролер, който връща низ.

<!-- The head and library references are unchanged from Step 3 -->
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tName()}}
</div>

<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";

  // A method on the scope, callable from the view as tName()
  $scope.tName = function() {
    return $scope.tutorialName;
  };
}]);
</script>

Code Обяснение:

Функция е прикачена към обекта на обхвата като член tNameВръща текущата стойност на tutorialName.
Изгледът извиква метода с {{tName()}}Скобите са от значение: без тях изразът отпечатва самата функция, а не нейния резултат.

⚠️ Корекция: оригиналният метод е прочетен $scope.tName = function() { return $scope.tName; };Тази функция връща себе си, а не името на урока, така че страницата е рендирала тялото на функцията вместо текст. Сега тя връща $scope.tutorialName.

Изход:

Досега всичко се съхраняваше в един файл. Производствените приложения държат контролерите отделно, което е демонстрирано в следващия раздел.

AngularJS контролер с пример за ng-контролер

Примерът „HelloWorld“ по-горе е поставил цялата функционалност в един файл. Сега е време да преместим кода на контролера в негов собствен файл.

Стъпка 1) Във файла app.js добавете следния код за вашия контролер.

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

Горният код прави следното:

Дефинира модул, наречен „app“, който съдържа контролера.
Създава контролер с име „HelloWorldCtrl“, който показва съобщение „Здравей, свят“.
Използва обекта scope, за да предаде информация от контролера към изгледа, в този случай променлива, наречена message.

Стъпка 2) В Sample.html добавете div, съдържащ директивата ng-controller и препратка към променливата член. messageНе забравяйте да се обърнете към app.js, който съдържа изходния код на контролера.

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="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="lib/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

⚠️ Корекция: app.js трябва да бъде зареден след angular.js, тъй като той извиква angular.moduleОригиналът също така е заредил библиотеката два пъти и е носил същото chrset печатна грешка.

Изход:

Всеки пример досега е имал свойства за четене и запис директно върху $scopeРазделът по-долу разглежда алтернативата, която екипът на AngularJS препоръчва.

Как да използваме синтаксиса на controllerAs в AngularJS

Директно свързване към $scope работи, но става двусмислено веднага щом контролерите са вложени. Израз за изглед, като например {{name}} не дава никаква представа кой контролер притежава nameи тъй като дъщерните области наследяват от родителските области прототипно, вложен контролер, който записва в наследен примитив, тихомълком създава свое собствено скрито копие. controllerAs Синтаксисът премахва и двата проблема, като дава на всеки контролер псевдоним.

Стъпка 1) Псевдоним на контролера в изгледа, използвайки as ключова дума, след което добавете този псевдоним към всяко свързване.

Стъпка 2) Вътре в контролера, прикачете свойства към this а не да $scope.

<div ng-controller="DemoController as demo">
Tutorial Name : <input type="text" ng-model="demo.tutorialName">
This tutorial is {{demo.tutorialName}}
</div>

<script>
app.controller('DemoController', function() {
  // 'vm' is captured so nested functions keep the right reference
  var vm = this;
  vm.tutorialName = "AngularJS";

  vm.tName = function() {
    return vm.tutorialName;
  };
});
</script>

Следват три предимства. Обвързванията стават самодокументиращи се, защото demo.tutorialName именува своя собственик. Вложените контролери спират да се сблъскват, тъй като родителският псевдоним outer и дете с псевдоним inner могат и двете да изложат nameСтойностите също се обвързват чрез обект, а не чрез гол примитив, странична стъпкаping капанът, при който редакция в детето никога не достига до родителя.

💡 Съвет: Улавяне this в променлива, като например vm в горната част на контролера. Вътре в обратно извикване, this препраща към нещо съвсем друго и заснетата препратка поддържа свързването правилно.

Изборът на стил на свързване е едно решение. Да се реши какво изобщо е място в един контролер е съвсем друго, а сравнението по-долу очертава тази граница.

Контролер срещу услуга в AngularJS

Начинаещите често претоварват контролера с работа, която принадлежи на услуга. Разликата е в живота и повторната употреба: контролерът съществува само докато изгледът му е на екрана, докато услугата е сингълтон, който съществува през целия живот на приложението.

Аспект	Регулатор	УСЛУГИ
Човешки живот	Създаден и унищожен с гледката	Един екземпляр за цялото приложение
Цел	Подготовка на данни за един изглед	Споделена логика, състояние и сървърни извиквания
За многократна употреба	Не, обвързано с неговата гледна точка	Да, може да се инжектира навсякъде
Запазва състоянието между изгледите	Не, състоянието се губи при навигация	Да, държавата продължава
Типично съдържание	Свойства на обхвата и методи за преглед	HTTP повиквания, кеширане, бизнес правила

Поддържайте контролерите „тънки“. Ако два контролера се нуждаят от една и съща логика или ако дадена стойност трябва да оцелее при навигация между изгледи, преместете я в услуга и инжектирайте тази услуга там, където е необходима. Практически тест е да се запитате дали кодът все още би имал смисъл, дори когато текущият екран е затворен. Ако отговорът е „да“, той принадлежи към услуга.

Въпроси и Отговори

Да. AngularJS създава отделен екземпляр и отделен обхват за всеки елемент, носещ директивата. Екземплярите нямат общо състояние, така че промяна в единия не се появява в другия.

Декларирайте го в маршрута, когато контролерът принадлежи към цял изглед, зареден от маршрутизацияИзползвайте ng-controller за компонент, който се появява в страница, независимо от текущия маршрут. Никога не декларирайте и двата, в противен случай контролерът ще се изпълни два пъти.

Използвайте анотацията на масива, като изброявате имената на зависимостите като низове преди функцията. Минификаторите преименуват аргументите на функциите, но никога низовите литерали, така че инжекторът все пак разрешава $scope и всички услуги правилно.

Да. AI Асистентите създават обвързвания на модула, контролера и обхвата от просто описание на екрана. Винаги проверявайте анотацията на зависимостите, тъй като генерираният код често я пропуска.

Инструментите с изкуствен интелект пренаписват присвояванията на обхват като свойства на заснетa променлива на виртуална машина и поставят пред всяко съответстващо свързване на изглед с псевдонима. RevПрегледайте извикванията на $watch и слушателите на събития ръчно, защото те все още изискват обекта scope.

AngularJS контролери с пример за ng-контролер

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

Какво прави контролерът от гледна точка на Angular

Как да изградите основен контролер в AngularJS

Как да дефинирате методи в AngularJS контролери

AngularJS контролер с пример за ng-контролер

Как да използваме синтаксиса на controllerAs в AngularJS

Контролер срещу услуга в AngularJS

Въпроси и Отговори

Обобщете тази публикация с:

Регистрирайте се за бюлетина

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

Какво прави контролерът от гледна точка на Angular

Как да изградите основен контролер в AngularJS

СВЪРЗАНИ СТАТИИ

Как да дефинирате методи в AngularJS контролери

AngularJS контролер с пример за ng-контролер

Как да използваме синтаксиса на controllerAs в AngularJS

Контролер срещу услуга в AngularJS

Въпроси и Отговори

Обобщете тази публикация с:

Регистрирайте се за бюлетина