AngularJS Controllers med ng-Controller Exempel

Vad är Controller i AngularJS?

A Regulator I AngularJS tar den data från vyn, bearbetar den och skickar sedan den till vyn som visas för slutanvändaren. Controllern innehåller din kärnverksamhetslogik. Den använder datamodellen, utför den nödvändiga bearbetningen och skickar sedan utdata till vyn.

⚠️ Versionsnotering: AngularJS (1.x-grenen) nådde slutet av sin livscykel den 31 december 2021 och får inga ytterligare säkerhetsuppdateringar. Koncepten nedan gäller fortfarande för äldre applikationer; i moderna Angular fylls samma roll av en komponentklass snarare än en kontroller.

Att veta vad en kontroller är lämnar en fråga öppen: hur den faktiskt kommunicerar med vyn. Nästa avsnitt besvarar det.

Vad Controller gör från Angulars perspektiv

Följande är en enkel definition av hur en AngularJS-kontroller fungerar:

• Den registeransvariges primära ansvar är att kontrollera de uppgifter som skickas till vyn. Omfattningen och utsikten har tvåvägskommunikation.
• Visa egenskaper och händelser kan anropa funktioner på omfånget. Utdraget nedan visar function($scope) deklarerad med kontrollenheten plus en intern funktion som returnerar $scope.firstName och $scope.lastName gick med. I AngularJS, en funktion definierad som en variabel är en metod.

• Data passerar från kontrollenheten till oscilloskopet, och sedan fram och tillbaka mellan oscilloskopet och vyn.
• Scopet exponerar modellen för vyn. Modellen kan modifieras via metoder definierade för scopet, vilka utlöses av händelser från vyn.
• Kontroller bör inte användas för att manipulera DOM. Det är jobbet för direktiv.
• Bästa praxis är att basera kontrollerna på funktionalitet. Om du har ett inmatningsformulär som behöver en kontrollant, skapa en som heter "formkontrollant".

Med mekanismen förstått bygger nästa avsnitt en kontroller från en tom sida.

Hur man bygger en grundläggande styrenhet i AngularJS

Nedan följer stegen för att skapa en kontroller i AngularJS.

Steg 1) Skapa en grundläggande HTML-sida

Innan en controller skapas måste den grundläggande HTML-sidan vara på plats. Kodavsnittet nedan är en enkel sida med titeln "Händelseregistrering" som refererar till Bootstrap och AngularJS.

1. Hänvisningar till Bootstrap CSS-stilmall, som används tillsammans med Bootstrap bibliotek.
2. En referens till AngularJS-biblioteket. Allt som görs med AngularJS från och med nu löses från den här filen.
3. En hänvisning till Bootstrap bibliotek, vilket gör vissa kontroller responsiva.

⚠️ Rättelse: den ursprungliga inlästa jQuery och angav att AngularJS är beroende av den. Det är den inte. AngularJS levereras med jqLite, en inbyggd delmängd av jQuery API, och uppgraderas bara till fullständig jQuery om jQuery laddas. innan det. Referensen har tagits bort.

Steg 2) Kontrollera filerna och filstrukturen

1. Filer delas upp i två mappar som i alla vanliga webbapplikationer: ”css” för stilmallar och ”lib” för JavaScript filer.
2. bootstrap.css finns i css-mappen och ger webbplatsen dess utseende och känsla.
3. angular.js är huvudbiblioteket, nedladdat från AngularJS-webbplatsen och lagrat i lib.
4. app.js kommer att innehålla koden för kontrollerna.

Steg 3) Använd AngularJS-kod för att visa utdata

Målet här är att visa orden ”AngularJS” både som vanlig text och inuti en textruta när sidan öppnas i webbläsaren.

<!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 Förklaring:

1. ng-app markerar detta element som roten till en AngularJS-applikation. Attribut med prefixet ng- är inbyggda direktiv. ”DemoApp” är namnet på applikationen.
2. Diven bär ng-kontroller med namnet ”DemoController”, vilket ger det elementet och allt inuti det åtkomst till kontrollenhetens omfattning.
3. ng-modell skapar modellbindningen och knyter textrutan Handledningsnamn till scope-egenskapen tutorialName.
4. Modulen DemoApp skapas, och kontrollenheten tilldelar standardvärdet "AngularJS" till tutorialName.

⚠️ Korrigeringar har tillämpats. Den ursprungliga listningen deklarerades chrset="UTF 8", vilket varken är ett giltigt attribut eller ett giltigt kodningsnamn, och laddade AngularJS två gånger – en gång från CDN och en gång från lib/angular.jsAtt ladda biblioteket två gånger omregistrerar modulsystemet och producerar oförutsägbart beteende. Annoteringen av beroendematrisen ['$scope', function($scope){…}] lades också till, utan vilken kontrollanten bryts i det ögonblick filen minimeras.

Produktion:

Därför att tutorialName tilldelades värdet "AngularJS", visas det värdet i textrutan och i den oformaterade textraden. En enda egenskap räcker för en demonstration; riktiga kontroller visar vanligtvis också beteenden, vilket nästa avsnitt tar upp.

Hur man definierar metoder i AngularJS-kontroller

Normalt sett skulle man definiera flera metoder i en styrenhet för att separera affärslogiken. Om styrenheten var tvungen att lägga till två tal och subtracMed två tal skulle du skapa en metod för varje operation.

Exemplet nedan definierar en anpassad metod inuti en AngularJS-kontroller som returnerar en sträng.

<!-- 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 Förklaring:

1. En funktion är kopplad till scope-objektet som medlemmen tNameDen returnerar det aktuella värdet av tutorialName.
2. Vyn anropar metoden med {{tName()}}Parenteserna spelar roll: utan dem skriver uttrycket ut själva funktionen snarare än dess resultat.

⚠️ Rättelse: den ursprungliga metoden lästes $scope.tName = function() { return $scope.tName; };Funktionen returnerar sig själv, inte handledningsnamnet, så sidan renderade en funktionstext istället för text. Den returnerar nu $scope.tutorialName.

Produktion:

Hittills har allting legat i en enda fil. Produktionsapplikationer håller styrenheterna separerade, vilket nästa avsnitt visar.

AngularJS Controller med ng-Controller Exempel

I exemplet "HelloWorld" ovan placerades all funktionalitet i en enda fil. Det är nu dags att flytta kontrollkoden till en egen fil.

Steg 1) I app.js-filen lägger du till följande kod för din kontrollant.

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

Ovanstående kod gör följande:

1. Definierar en modul som heter "app" som innehåller kontrollenheten.
2. Skapar en kontroller med namnet "HelloWorldCtrl" som visar meddelandet "Hello World".
3. Använder scope-objektet för att skicka information från kontrollenheten till vyn, i det här fallet en variabel som heter message.

Steg 2) I Sample.html, lägg till en div som innehåller ng-controller-direktivet och en referens till medlemsvariabeln messageKom ihåg att referera till app.js, som innehåller kontrollerkällkoden.

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

⚠️ Rättelse: app.js måste laddas efter angular.js, eftersom den anropar angular.moduleOriginalet laddade också biblioteket två gånger och hade samma chrset stavfel.

Produktion:

Varje exempel hittills har läst och skrivit egenskaper direkt på $scopeAvsnittet nedan behandlar det alternativ som AngularJS-teamet rekommenderar istället.

Hur man använder controllerAs-syntaxen i AngularJS

Bindande direkt till $scope fungerar, men det blir tvetydigt så snart kontrollanter är kapslade. Ett view-uttryck som {{name}} ger ingen aning om vilken kontrollant som äger name, och eftersom underordnade omfattningar prototypiskt ärver från överordnade omfattningar, skapar en kapslad kontroller som skriver till en ärvd primitiv i tysthet sin egen skuggkopia. controllerAs syntaxen eliminerar båda problemen genom att ge varje kontroller ett alias.

Steg 1) Alias ​​för kontrollenheten i vyn med hjälp av as nyckelordet, och lägg sedan till prefixet för varje bindning med det aliaset.

Steg 2) Inuti kontrollenheten, koppla egenskaper till this snarare än att $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>

Tre vinster följer. Bindningar blir självdokumenterande, eftersom demo.tutorialName namnger sin ägare. Kapslade kontrollanter slutar kollidera, eftersom en förälder aliaserade outer och ett barn med alias inner kan båda avslöja nameVärden binder också genom ett objekt snarare än ett rent primitivt, sidostegping fällan där en redigering i ett underordnat objekt aldrig når föräldern.

👍 Dricks: capture this in i en variabel som vm högst upp på kontrollenheten. Inuti en återanropning, this refererar till något helt annat, och den infångade referensen håller bindningen korrekt.

Att välja en bindningsstil är ett beslut. Att avgöra vad som hör hemma i en kontroller är ett annat, och jämförelsen nedan drar den gränsen.

Controller vs. Service i AngularJS

Nybörjare överbelastar ofta kontrollern med arbete som hör hemma i en tjänst. Skillnaden ligger i livslängd och återanvändning: en kontroller existerar bara medan dess vy visas på skärmen, medan en tjänst är en singleton som lever under applikationens livslängd.

Håll kontrollerna tunna. Om två kontrollanter behöver samma logik, eller om ett värde måste överleva navigering mellan vyer, flytta det till en tjänst och injicera den tjänsten där den behövs. Ett praktiskt test är att fråga om koden fortfarande skulle vara meningsfull med den aktuella skärmen stängd. Om svaret är ja, hör den hemma i en tjänst.

Vanliga frågor