AngularJS Controllere med ng-Controller Eksempel

Af: James Hartman James Hartman
Hours Opdateret

⚡ Smart opsummering

En controller i AngularJS indeholder forretningslogikken for en skærm. Den modtager data gennem scope-objektet, behandler dem og viser resultatet tilbage til visningen.ping præsentationsmarkup fri for applikationslogik.

  • 🎯 Kerneansvar: En controller udfylder scope-objektet og eksponerer metoder for viewet; den manipulerer ikke DOM'en.
  • 🔗 Ledningsføring: ng-controller-direktivet binder en navngiven controller til et element, hvilket giver dette element og dets underordnede elementer adgang til controllerens scope.
  • 🔁 Tovejsbinding: ng-model linker et formularfelt til en scope-egenskab, så redigeringer i visningen opdaterer controlleren og omvendt.
  • 🧩 Metoder: Funktioner, der er knyttet til omfanget, adskiller forskellige dele af logikken og kan kaldes direkte fra visningsudtryk.
  • 🏷️ controllerAs syntaks: Aliasering af en controller og binding til this fjerner tvetydighed, når controllere er indlejret i hinanden.
  • 📁 Adskillelse: Ved at flytte controllere til en dedikeret app.js forbliver view-laget uafhængigt af logik-laget.
Læs mere

AngularJS-controllere med ng-controller

Hvad er controller i AngularJS?

A controller I AngularJS tager controlleren data fra visningen, behandler dataene og sender derefter disse data videre til visningen, som vises for slutbrugeren. Controlleren indeholder din kerneforretningslogik. Den bruger datamodellen, udfører den nødvendige behandling og sender derefter outputtet til visningen.

⚠️ Versionsnotat: AngularJS (1.x-grenen) nåede slutningen af ​​sin levetid den 31. december 2021 og modtager ikke yderligere sikkerhedsrettelser. Koncepterne nedenfor gælder stadig for ældre applikationer; i moderne Angular udfyldes den samme rolle af en komponentklasse i stedet for en controller.

Når man ved, hvad en controller er, står der ét spørgsmål åbent: hvordan den rent faktisk kommunikerer med visningen. Det besvares i næste afsnit.

Hvad en controller gør fra Angulars perspektiv

Følgende er en simpel definition af, hvordan en AngularJS-controller fungerer:

Arbejder med AngularJS Controller
Arbejder med AngularJS Controller
  • Den dataansvarliges primære ansvar er at kontrollere de data, der videregives til visningen. Omfanget og udsigten har tovejskommunikation.
  • Visningsegenskaber og hændelser kan kalde funktioner på omfanget. Uddraget nedenfor viser funktion($omfang) deklareret med controlleren plus en intern funktion, der returnerer $scope.firstName og $scope.lastName sluttede sig til. I AngularJS, en funktion defineret som en variabel er en metode.

Arbejder med AngularJS Controller

  • Data passerer fra controlleren til oscilloskopet, og derefter frem og tilbage mellem oscilloskopet og visningen.
  • Scopet eksponerer modellen for viewet. Modellen kan ændres via metoder defineret på scopet, som udløses af hændelser fra viewet.
  • Controllere bør ikke bruges til at manipulere DOM. Det er opgaven for direktiver.
  • Bedste praksis er at basere controllere på funktionalitet. Hvis du har en inputformular, der kræver en controller, skal du oprette en kaldet "form controller".

Når mekanismen er forstået, bygger næste afsnit en controller ud fra en tom side.

Sådan bygger du en grundlæggende controller i AngularJS

Nedenfor er trinnene til at oprette en controller i AngularJS.

Trin 1) Opret en grundlæggende HTML-side

Før en controller oprettes, skal den grundlæggende HTML-side være på plads. Kodestykket nedenfor er en simpel side med titlen "Begivenhedsregistrering", der refererer til Bootstrap og AngularJS.

Byg en grundlæggende controller i AngularJS

  1. Henvisninger til Bootstrap CSS-stylark, brugt sammen med Bootstrap bibliotek.
  2. En reference til AngularJS-biblioteket. Alt, der gøres med AngularJS fremover, løses fra denne fil.
  3. En henvisning til Bootstrap bibliotek, hvilket gør visse kontroller responsive.

⚠️ Rettelse: den oprindelige indlæste jQuery og angav, at AngularJS er afhængig af den. Det er den ikke. AngularJS leveres med jqLite, en indbygget delmængde af jQuery API'en, og opgraderes kun til fuld jQuery, hvis jQuery indlæses. før det. Referencen er blevet fjernet.

Trin 2) Tjek filerne og filstrukturen

Byg en grundlæggende controller i AngularJS

  1. Filer er opdelt i to mapper som i enhver konventionel webapplikation: "css" for stylesheets og "lib" for JavaScript filer.
  2. bootstrap.css ligger i css-mappen og giver webstedet dets udseende og funktionalitet.
  3. angular.js er hovedbiblioteket, downloadet fra AngularJS-webstedet og opbevaret i lib.
  4. app.js vil indeholde koden til controllerne.

Trin 3) Brug AngularJS-kode til at vise outputtet

Målet her er at vise ordene "AngularJS" både som almindelig tekst og i en tekstboks, når siden åbnes i browseren.

Byg en grundlæggende 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 Forklaring:

  1. ng-app markerer dette element som roden af ​​en AngularJS-applikation. Attributter præfikset med ng- er indbyggede direktiver. "DemoApp" er navnet på applikationen.
  2. Div'en bærer ng-controller med navnet “DemoController”, som giver elementet og alt indeni adgang til controllerens omfang.
  3. ng-model opretter modelbindingen og knytter tekstfeltet Tutorial Name til scope-egenskaben tutorialName.
  4. Modulet DemoApp oprettes, og controlleren tildeler standardværdien “AngularJS” til tutorialName.

⚠️ Rettelser anvendt. Den oprindelige liste erklærede chrset="UTF 8", som hverken er en gyldig attribut eller et gyldigt kodningsnavn, og indlæste AngularJS to gange — én gang fra CDN'et og én gang fra lib/angular.jsHvis biblioteket indlæses to gange, registreres modulsystemet igen, hvilket resulterer i uforudsigelig adfærd. Annotationen af ​​afhængighedsarrayet ['$scope', function($scope){…}] blev også tilføjet, uden hvilken controlleren afbrydes i det øjeblik filen minimeres.

Output:

Byg en grundlæggende controller i AngularJS

Fordi tutorialName blev tildelt værdien "AngularJS", vises denne værdi i tekstboksen og i den almindelige tekstlinje. En enkelt egenskab er nok til en demonstration; rigtige controllere eksponerer normalt også adfærd, hvilket næste afsnit dækker.

RELATEREDE ARTIKLER

Sådan defineres metoder i AngularJS-controllere

Normalt ville man definere flere metoder i en controller for at adskille forretningslogikken. Hvis controlleren skulle addere to tal og sub-taltracMed to tal ville du oprette én metode for hver operation.

Eksemplet nedenfor definerer en brugerdefineret metode i en AngularJS-controller, der returnerer en streng.

Definer metoder i AngularJS-controllere

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

  1. En funktion er knyttet til scope-objektet som medlemmet tNameDen returnerer den aktuelle værdi af tutorialName.
  2. Udsigten kalder metoden med {{tName()}}Parenteserne er vigtige: uden dem udskriver udtrykket selve funktionen i stedet for dens resultat.

⚠️ Rettelse: den oprindelige metode læst $scope.tName = function() { return $scope.tName; };Funktionen returnerer sig selv, ikke navnet på vejledningen, så siden gengivede en funktionsbrødtekst i stedet for tekst. Den returnerer nu $scope.tutorialName.

Output:

Definer metoder i AngularJS-controllere

Indtil videre har alting ligget i én fil. Produktionsapplikationer holder controllere adskilte, hvilket er, hvad næste afsnit demonstrerer.

AngularJS Controller med ng-Controller Eksempel

I eksemplet "HelloWorld" ovenfor blev al funktionalitet placeret i en enkelt fil. Det er nu tid til at flytte controllerkoden til sin egen fil.

Trin 1) I app.js-filen skal du tilføje følgende kode til din controller.

AngularJS Controller med ng-Controller

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

Ovenstående kode gør følgende:

  1. Definerer et modul kaldet "app", som indeholder controlleren.
  2. Opretter en controller med navnet "HelloWorldCtrl", der viser en "Hello World"-meddelelse.
  3. Bruger scope-objektet til at sende information fra controlleren til viewet, i dette tilfælde en variabel kaldet message.

Trin 2) I Sample.html skal du tilføje en div, der indeholder ng-controller-direktivet, og en reference til medlemsvariablen messageHusk at referere til app.js, som indeholder controller-kildekoden.

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>

⚠️ Rettelse: app.js skal indlæses efter angular.js, da den kalder angular.moduleOriginalen indlæste også biblioteket to gange og indeholdt det samme chrset tastefejl.

Output:

AngularJS Controller med ng-Controller

Alle eksempler indtil videre har læst og skrevet egenskaber direkte på $scopeAfsnittet nedenfor dækker det alternativ, som AngularJS-teamet anbefaler i stedet.

Sådan bruger du controllerAs-syntaksen i AngularJS

Bindende direkte til $scope fungerer, men det bliver tvetydigt, så snart controllere er indlejret. Et view-udtryk som f.eks. {{name}} giver ingen anelse om, hvilken controller der ejer name, og fordi underordnede scopes prototypisk arver fra overordnede scopes, opretter en indlejret controller, der skriver til en nedarvet primitiv, lydløst sin egen skyggekopi. controllerAs Syntaksen fjerner begge problemer ved at give hver controller et alias.

Trin 1) Alias ​​controlleren i visningen ved hjælp af as nøgleord, og giv derefter hver binding præfikset med det pågældende alias.

Trin 2) Inde i controlleren skal du knytte egenskaber til this snarere end at $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 bliver selvdokumenterende, fordi demo.tutorialName navngiver sin ejer. Indlejrede controllere stopper med at kollidere, da en forælder aliaserede outer og et barn med alias inner kan begge afsløre nameVærdier binder sig også gennem et objekt snarere end et rent primitivt sidespring.ping fælden hvor en rettelse i et barn aldrig når forælderen.

💡 Tip: Fange this ind i en variabel som f.eks. vm øverst på controlleren. Inde i et tilbagekald, this refererer til noget helt andet, og den registrerede reference holder bindingen korrekt.

At vælge en bindingsstil er én beslutning. At afgøre, hvad der overhovedet hører hjemme i en controller, er en anden, og sammenligningen nedenfor trækker den linje.

Controller vs. Service i AngularJS

Begyndere overbelaster ofte controlleren med arbejde, der hører hjemme i en service. Forskellen ligger i levetid og genbrug: en controller eksisterer kun, mens dens visning er på skærmen, hvorimod en service er en singleton, der lever i applikationens levetid.

Aspect controller Service
Levetid Skabt og ødelagt med udsigten Enkelt instans for hele applikationen
Formål Forbered data til én visning Delt logik, tilstand og serverkald
Genanvendelig Nej, knyttet til dens synspunkt Ja, kan injiceres hvor som helst
Holder tilstand mellem visninger Nej, tilstanden går tabt under navigation Ja, staten fortsætter
Typisk indhold Scope-egenskaber og visningsmetoder HTTP-kald, caching, forretningsregler

Hold controllerne slanke. Hvis to controllere har brug for den samme logik, eller hvis en værdi skal overleve navigation mellem visninger, skal den flyttes til en service og injiceres, hvor den er nødvendig. En praktisk test er at spørge, om koden stadig ville give mening med den aktuelle skærm lukket. Hvis svaret er ja, hører den hjemme i en service.

Ofte Stillede Spørgsmål

Ja. AngularJS opretter en separat instans og et separat scope for hvert element, der bærer direktivet. Instanserne deler ingen tilstand, så en ændring i den ene vises ikke i den anden.

Deklarer det i ruten, når controlleren tilhører en hel visning indlæst af routingBrug ng-controller til en komponent, der vises på en side uanset den aktuelle rute. Deklarer aldrig begge, ellers kører controlleren to gange.

Brug array-annotationen, hvor afhængighedsnavne anføres som strenge før funktionen. Minifikatorer omdøber funktionsargumenter, men aldrig strengliteraler, så injektoren stadig løser $scope og eventuelle tjenester korrekt.

Ja. AI Assistenter producerer modul-, controller- og scope-bindinger ud fra en simpel beskrivelse af skærmen. Kontroller altid afhængighedsannotationen, da genereret kode ofte udelader den.

AI-værktøjer omskriver omfangstildelinger som egenskaber på en registreret VM-variabel og sætter aliaset foran hver matchende visningsbinding. Revse $watch-kald og eventlyttere manuelt, fordi disse stadig kræver scope-objektet.

Opsummer dette indlæg med: