AngularJS Controllers med ng-Controller Exempel

By: James Hartman James Hartman
Hours Uppdaterad

⚡ Smart sammanfattning

En kontroller i AngularJS lagrar affärslogiken för en skärm. Den tar emot data via scope-objektet, bearbetar den och visar resultatet tillbaka till vyn, keeping presentationsmarkering fri från applikationslogik.

  • 🎯 Kärnansvar: En kontroller fyller i scope-objektet och exponerar metoder för vyn; den manipulerar inte DOM:en.
  • 🔗 Inkoppling: Direktivet ng-controller binder en namngiven kontroller till ett element, vilket ger det elementet och dess underordnade element åtkomst till kontrollerns omfattning.
  • 🔁 Tvåvägsbindning: ng-model länkar ett formulärfält till en scope-egenskap, så redigeringar i vyn uppdaterar kontrollenheten och vice versa.
  • 🧩 Metoder: Funktioner som är kopplade till omfånget separerar distinkta logikdelar och kan anropas direkt från vyuttryck.
  • 🏷️ controllerAs-syntax: Aliasera en kontroller och binda till this tar bort tvetydighet när kontrollanter är kapslade inuti varandra.
  • 📁 Separation: Att flytta kontroller till en dedikerad app.js håller vylagret oberoende av logiklagret.
Läs mer

AngularJS-kontroller med ng-controller

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:

Fungerar med AngularJS Controller
Fungerar med AngularJS Controller
  • 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.

Fungerar med AngularJS Controller

  • 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.

Bygg en Basic Controller i 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

Bygg en Basic Controller i AngularJS

  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.

Bygg en Basic Controller i 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 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:

Bygg en Basic Controller i AngularJS

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.

RELATERADE ARTIKLAR

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.

Definiera metoder i AngularJS-kontroller

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

Definiera metoder i AngularJS-kontroller

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.

AngularJS Controller med ng-Controller

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.

AngularJS Controller med ng-Controller

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

AngularJS Controller med ng-Controller

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.

Aspect Regulator Service
Livslängd Skapad och förstörd med utsikten Enskild instans för hela applikationen
Syfte Förbered data för en vy Delad logik, tillstånd och serveranrop
Återanvändbara Nej, knuten till dess synsätt Ja, injicerbar var som helst
Håller tillstånd mellan vyer Nej, tillståndet går förlorat vid navigering Ja, tillståndet består
Typiskt innehåll Omfångsegenskaper och vymetoder HTTP-anrop, cachning, affärsregler

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

Ja. AngularJS skapar en separat instans och ett separat scope för varje element som bär direktivet. Instanserna delar inget tillstånd, så en förändring i den ena visas inte i den andra.

Deklarera det i rutten när kontrollanten tillhör en hel vy som laddats av routingAnvänd ng-controller för en komponent som visas inuti en sida oavsett aktuell rutt. Deklarera aldrig båda, annars körs kontrollanten två gånger.

Använd array-annoteringen och lista beroenden som strängar före funktionen. Minifierare byter namn på funktionsargument men aldrig strängliteraler, så injektorn löser fortfarande $scope och eventuella tjänster korrekt.

Ja. AI Assistenter producerar bindningarna för modul, kontrollenhet och omfång från en enkel beskrivning av skärmen. Kontrollera alltid beroendeannoteringen, eftersom genererad kod ofta utelämnar den.

AI-verktyg skriver om omfångstilldelningar som egenskaper på en infångad virtuell maskin-variabel och prefixar varje matchande vybindning med aliaset. Revvisa $watch-anrop och händelselyssnare manuellt, eftersom de fortfarande kräver scope-objektet.

Sammanfatta detta inlägg med: