AngularJS-kontrollere med ng-kontroller eksempel

⚡ Smart oppsummering

En kontroller i AngularJS inneholder forretningslogikken til en skjerm. Den mottar data gjennom scope-objektet, behandler dem og eksponerer resultatet tilbake til visningen, keeping presentasjonsmarkering fri for applikasjonslogikk.

🎯 Kjerneansvar: En kontroller fyller ut omfangsobjektet og eksponerer metoder for visningen; den manipulerer ikke DOM-en.
🔗 kabling: Direktivet ng-controller binder en navngitt kontroller til et element, og gir det elementet og dets underordnede tilgang til kontrollerens omfang.
🔁 Toveisbinding: ng-model kobler et skjemafelt til en omfangsegenskap, slik at redigeringer i visningen oppdaterer kontrolleren og omvendt.
🧩 Metoder: Funksjoner knyttet til omfanget skiller separate deler av logikken og kan kalles direkte fra visningsuttrykk.
🏷️ controllerAs-syntaks: Aliasing av en kontroller og binding til this fjerner tvetydighet når kontrollere er nestet inni hverandre.
📁 Atskillelse: Å flytte kontrollere til en dedikert app.js holder visningslaget uavhengig av logikklaget.

Les mer

Hva er kontroller i AngularJS?

A controller I AngularJS tar den dataene fra visningen, behandler dataene og sender deretter disse dataene over til visningen som vises for sluttbrukeren. Kontrolleren inneholder kjernevirksomhetslogikken din. Den bruker datamodellen, utfører den nødvendige behandlingen og sender deretter utdataene til visningen.

⚠️ Versjonsmerknad: AngularJS (1.x-grenen) nådde slutten av sin levetid 31. desember 2021 og mottar ingen ytterligere sikkerhetsoppdateringer. Konseptene nedenfor gjelder fortsatt for eldre applikasjoner; i moderne Angular fylles den samme rollen av en komponentklasse i stedet for en kontroller.

Når man vet hva en kontroller er, står ett spørsmål åpent: hvordan den faktisk kommuniserer med visningen. Neste avsnitt besvarer det.

Hva kontrolleren gjør fra Angulars perspektiv

Følgende er en enkel definisjon av hvordan en AngularJS-kontroller fungerer:

Den behandlingsansvarliges primære ansvar er å kontrollere dataene som sendes til visningen. Omfanget og utsikten har toveiskommunikasjon.
Visningsegenskaper og hendelser kan kalle funksjoner på omfanget. Kodeutdraget nedenfor viser funksjon($omfang) deklarert med kontrolleren pluss en intern funksjon som returnerer $scope.firstName og $scope.lastName ble med. Inn AngularJS, en funksjon definert som en variabel er en metode.

Data går fra kontrolleren til oscilloskopet, og deretter frem og tilbake mellom oscilloskopet og visningen.
Scope eksponerer modellen for viewet. Modellen kan endres via metoder definert på scopeet, som utløses av hendelser fra viewet.
Kontrollere bør ikke brukes til å manipulere DOM. Det er jobben til direktiver.
Beste praksis er å basere kontrollere på funksjonalitet. Hvis du har et inputskjema som trenger en kontroller, opprett en som heter «skjemakontroller».

Når mekanismen er forstått, bygger neste avsnitt en kontroller fra en tom side.

Hvordan bygge en grunnleggende kontroller i AngularJS

Nedenfor finner du trinnene for å opprette en kontroller i AngularJS.

Trinn 1) Lag en grunnleggende HTML-side

Før du oppretter en kontroller, må den grunnleggende HTML-siden være på plass. Kodeutdraget nedenfor er en enkel side med tittelen «Hendelsesregistrering» som refererer til Bootstrap og AngularJS.

Referanser til Bootstrap CSS-stilark, brukt sammen med Bootstrap bibliotek.
En referanse til AngularJS-biblioteket. Alt som gjøres med AngularJS fra nå av løses fra denne filen.
En referanse til Bootstrap bibliotek, som gjør visse kontroller responsive.

⚠️ Korreksjon: den opprinnelig lastede jQuery og oppga at AngularJS er avhengig av den. Det er den ikke. AngularJS leveres med jqLite, et innebygd delsett av jQuery API, og oppgraderes bare til full jQuery hvis jQuery lastes inn. før du det. Referansen er fjernet.

Trinn 2) Sjekk filene og filstrukturen

Filene deles inn i to mapper som i alle vanlige webapplikasjoner: «css» for stilark og «lib» for JavaScript filer.
bootstrap.css ligger i css-mappen og gir nettstedet sitt utseende og preg.
angular.js er hovedbiblioteket, lastet ned fra AngularJS-nettstedet og oppbevart i lib.
app.js vil inneholde koden for kontrollerne.

Trinn 3) Bruk AngularJS-koden for å vise utdataene

Målet her er å vise ordene «AngularJS» både som ren tekst og i en tekstboks når siden åpnes i nettleseren.

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

ng-app markerer dette elementet som roten til et AngularJS-program. Attributter med prefikset ng- er innebygde direktiver. «DemoApp» er navnet på applikasjonen.
Diven bærer ng-kontroller med navnet «DemoController», som gir det elementet og alt i det tilgang til kontrollerens omfang.
ng-modell oppretter modellbindingen, og knytter tekstboksen Opplæringsnavn til omfangsegenskapen tutorialName.
Modulen DemoApp opprettes, og kontrolleren tildeler standardverdien «AngularJS» til tutorialName.

⚠️ Rettelser er iverksatt. Den opprinnelige oppføringen erklærte chrset="UTF 8", som verken er et gyldig attributt eller et gyldig kodingsnavn, og lastet inn AngularJS to ganger – én gang fra CDN-et og én gang fra lib/angular.jsHvis du laster biblioteket to ganger, registreres modulsystemet på nytt og det fører til uforutsigbar oppførsel. Avhengighetsmatriseannotasjonen ['$scope', function($scope){…}] ble også lagt til, uten hvilken kontrolleren brytes i det øyeblikket filen minimeres.

Utgang:

Fordi tutorialName ble tildelt verdien «AngularJS», vises den verdien i tekstboksen og i ren tekstlinje. Én enkelt egenskap er nok for en demonstrasjon; ekte kontrollere eksponerer vanligvis også atferd, noe neste avsnitt dekker.

Hvordan definere metoder i AngularJS-kontrollere

Normalt ville man definere flere metoder i en kontroller for å separere forretningslogikken. Hvis kontrolleren måtte legge sammen to tall og sub-talltracMed to tall, ville du opprette én metode for hver operasjon.

Eksemplet nedenfor definerer en tilpasset metode i en AngularJS-kontroller som returnerer en streng.

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

En funksjon er knyttet til omfangsobjektet som medlemmet tNameDen returnerer gjeldende verdi av tutorialName.
Visningen kaller metoden med {{tName()}}Parentesene er viktige: uten dem skriver uttrykket selve funksjonen i stedet for resultatet.

⚠️ Korreksjon: den opprinnelige metoden lest $scope.tName = function() { return $scope.tName; };. Funksjonen returnerer seg selv, ikke navnet på veiledningen, så siden gjenga en funksjonsbrødtekst i stedet for tekst. Den returnerer nå $scope.tutorialName.

Utgang:

Så langt har alt ligget i én fil. Produksjonsapplikasjoner holder kontrollere separate, noe som er det neste avsnitt demonstrerer.

AngularJS Controller med ng-Controller Eksempel

I eksemplet «HelloWorld» ovenfor ble all funksjonalitet plassert i én fil. Det er nå på tide å flytte kontrollerkoden til en egen fil.

Trinn 1) I app.js-filen legger du til følgende kode for kontrolleren din.

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

Koden ovenfor gjør følgende:

Definerer en modul kalt «app» som inneholder kontrolleren.
Oppretter en kontroller kalt «HelloWorldCtrl» som viser en «Hello World»-melding.
Bruker scope-objektet til å sende informasjon fra kontrolleren til visningen, i dette tilfellet en variabel kalt message.

Trinn 2) I Sample.html, legg til en div som inneholder ng-controller-direktivet og en referanse til medlemsvariabelen. messageHusk å referere til app.js, som inneholder kildekoden til kontrolleren.

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

⚠️ Korreksjon: app.js må lastes inn etter angular.js, siden den kaller angular.moduleOriginalen lastet også biblioteket to ganger og hadde det samme chrset skrivefeil.

Utgang:

Alle eksempler så langt har lest og skrevet egenskaper direkte på $scopeAvsnittet nedenfor dekker alternativet som AngularJS-teamet anbefaler i stedet.

Slik bruker du controllerAs-syntaksen i AngularJS

Bindende direkte til $scope fungerer, men det blir tvetydig så snart kontrollere er nestet. Et visningsuttrykk som {{name}} gir ingen anelse om hvilken kontrollør som eier name, og fordi underordnede omfang arver prototypisk fra overordnede omfang, oppretter en nestet kontroller som skriver til en arvet primitiv i stillhet sin egen skyggekopi. controllerAs syntaks fjerner begge problemene ved å gi hver kontroller et alias.

Trinn 1) Alias kontrolleren i visningen ved hjelp av as nøkkelordet, og sett deretter det aliaset foran hver binding.

Trinn 2) Inne i kontrolleren, knytt egenskaper til this heller enn å $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 gevinster følger. Bindinger blir selvdokumenterende, fordi demo.tutorialName navngir eieren. Nestede kontrollere slutter å kollidere, siden en overordnet alias outer og et barn med alias inner kan begge eksponere nameVerdier binder seg også gjennom et objekt snarere enn et rent primitivt sidesteg.ping fellen der en redigering i et barn aldri når den overordnede.

👍 Tips: Capture this inn i en variabel som vm øverst på kontrolleren. Inne i et tilbakeringing, this refererer til noe helt annet, og den innfangede referansen holder bindingen riktig.

Å velge en bindingsstil er én avgjørelse. Å bestemme hva som i det hele tatt hører hjemme i en kontroller er en annen, og sammenligningen nedenfor trekker den grensen.

Kontroller vs. tjeneste i AngularJS

Nybegynnere overbelaster ofte kontrolleren med arbeid som hører hjemme i en tjeneste. Forskjellen er levetid og gjenbruk: en kontroller eksisterer bare mens visningen er på skjermen, mens en tjeneste er en singleton som lever for applikasjonens levetid.

Aspekt	controller	Service
Lifetime	Skapt og ødelagt med utsikten	Enkeltstående instans for hele applikasjonen
Formål	Klargjør data for én visning	Delt logikk, tilstand og serverkall
Gjenbruk	Nei, knyttet til synspunktet	Ja, injiserbar hvor som helst
Holder tilstand mellom visninger	Nei, tilstanden går tapt under navigasjon	Ja, staten vedvarer
Typisk innhold	Omfangsegenskaper og visningsmetoder	HTTP-kall, mellomlagring, forretningsregler

Hold kontrollerne tynne. Hvis to kontrollere trenger samme logikk, eller hvis en verdi må overleve navigering mellom visninger, flytt den inn i en tjeneste og injiser den tjenesten der den trengs. En praktisk test er å spørre om koden fortsatt ville gi mening med den gjeldende skjermen lukket. Hvis svaret er ja, hører den hjemme i en tjeneste.

Spørsmål og svar

Ja. AngularJS oppretter en separat instans og et separat omfang for hvert element som bærer direktivet. Instansene deler ingen tilstand, så en endring i den ene vises ikke i den andre.

Deklarer det i ruten når kontrolleren tilhører en hel visning lastet inn av rutingBruk ng-controller for en komponent som vises inne på en side uavhengig av gjeldende rute. Deklarer aldri begge, ellers kjører kontrolleren to ganger.

Bruk array-annotasjonen, og oppgi avhengighetsnavn som strenger før funksjonen. Minifikatorer gir nytt navn til funksjonsargumenter, men aldri strenglitteraler, slik at injektoren fortsatt løser $scope og eventuelle tjenester riktig.

Ja. AI Assistenter produserer modul-, kontroller- og omfangsbindingene fra en enkel beskrivelse av skjermen. Sjekk alltid avhengighetsannotasjonen, siden generert kode ofte utelater den.

AI-verktøy omskriver omfangstildelinger som egenskaper på en registrert VM-variabel og setter aliaset foran hver samsvarende visningsbinding. Revse $watch-kall og hendelseslyttere manuelt, fordi disse fortsatt krever omfangsobjektet.

AngularJS-kontrollere med ng-kontroller eksempel

Hva er kontroller i AngularJS?

Hva kontrolleren gjør fra Angulars perspektiv

Hvordan bygge en grunnleggende kontroller i AngularJS

Hvordan definere metoder i AngularJS-kontrollere

AngularJS Controller med ng-Controller Eksempel

Slik bruker du controllerAs-syntaksen i AngularJS

Kontroller vs. tjeneste i AngularJS

Spørsmål og svar

Oppsummer dette innlegget med:

Registrer deg for nyhetsbrevet

Hva er kontroller i AngularJS?

Hva kontrolleren gjør fra Angulars perspektiv

Hvordan bygge en grunnleggende kontroller i AngularJS

RELATERTE ARTIKLER

Hvordan definere metoder i AngularJS-kontrollere

AngularJS Controller med ng-Controller Eksempel

Slik bruker du controllerAs-syntaksen i AngularJS

Kontroller vs. tjeneste i AngularJS

Spørsmål og svar

Oppsummer dette innlegget med:

Registrer deg for nyhetsbrevet