AngularJS Controllere med ng-Controller Eksempel

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:

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

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

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

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.

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

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.

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.

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

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.

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.

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

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.

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