AngularJS-controllers met ng-controllervoorbeeld

⚡ Slimme samenvatting

Een controller in AngularJS bevat de bedrijfslogica van een scherm. Hij ontvangt gegevens via het scope-object, verwerkt deze en geeft het resultaat terug aan de view.ping Presentatiemarkering zonder toepassingslogica.

🎯 Kernverantwoordelijkheid: Een controller vult het scope-object en stelt methoden beschikbaar aan de view; hij manipuleert de DOM niet.
🔗 Bedrading: De ng-controller-richtlijn koppelt een benoemde controller aan een element, waardoor dat element en zijn kinderen toegang krijgen tot de controller-scope.
🔁 Tweewegbinding: ng-model koppelt een formulierveld aan een scope-eigenschap, waardoor wijzigingen in de view de controller bijwerken en omgekeerd.
🧩 Methoden: Functies die aan het bereik zijn gekoppeld, scheiden afzonderlijke logische onderdelen en kunnen rechtstreeks vanuit weergave-expressies worden aangeroepen.
???? ️ controllerAs Syntaxis: Een controller een alias geven en deze binden aan this Dit voorkomt onduidelijkheid wanneer controllers in elkaar genesteld zijn.
📁 Scheiding: Door controllers naar een apart app.js-bestand te verplaatsen, blijft de weergavelaag onafhankelijk van de logicalaag.

Meer informatie

Wat is controller in AngularJS?

A Controller In AngularJS haalt de controller de gegevens uit de view, verwerkt deze en stuurt ze vervolgens door naar de view die aan de eindgebruiker wordt getoond. De controller bevat de kern van je bedrijfslogica. Deze gebruikt het datamodel, voert de benodigde verwerking uit en geeft de output door aan de view.

⚠️ Versie-opmerking: AngularJS (de 1.x-versie) heeft op 31 december 2021 het einde van zijn levenscyclus bereikt en ontvangt geen verdere beveiligingsupdates meer. De onderstaande concepten zijn nog steeds van toepassing op oudere applicaties; in het moderne Angular wordt dezelfde rol vervuld door een componentklasse in plaats van een controller.

Als we weten wat een controller is, blijft er één vraag open: hoe communiceert deze nu precies met de view? Het volgende gedeelte geeft daar antwoord op.

Wat doet de Controller vanuit het perspectief van Angular?

Hieronder volgt een eenvoudige definitie van de werking van een AngularJS-controller:

De primaire verantwoordelijkheid van de controller is het controleren van de gegevens die aan de weergave worden doorgegeven. De reikwijdte en de visie communiceren in twee richtingen.
Eigenschappen en gebeurtenissen van een weergave kunnen functies op het bereik aanroepen. Het onderstaande codefragment laat dit zien. functie($scope) gedeclareerd met de controller plus een interne functie die retourneert $scope.firstName en $scope.lastName aangesloten. In angularjsEen functie die als variabele is gedefinieerd, is een methode.

Gegevens worden van de controller naar de scope doorgegeven, en vervolgens heen en weer tussen de scope en de view.
De scope stelt het model beschikbaar aan de view. Het model kan worden aangepast via methoden die op de scope zijn gedefinieerd en die worden geactiveerd door gebeurtenissen vanuit de view.
Controllers mogen niet worden gebruikt om de DOM te manipuleren. Dat is de taak van... richtlijnen.
Het is aan te raden controllers te baseren op functionaliteit. Als je een invoerformulier hebt dat een controller nodig heeft, maak er dan een aan met de naam "formuliercontroller".

Nu het mechanisme duidelijk is, bouwen we in het volgende gedeelte een controller op vanuit een lege pagina.

Hoe u een basiscontroller bouwt in AngularJS

Hieronder volgen de stappen om een controller in AngularJS te maken.

Stap 1) Maak een eenvoudige HTML-pagina

Voordat je een controller maakt, moet de basis-HTML-pagina al aanwezig zijn. Het onderstaande codefragment is een eenvoudige pagina met de titel "Evenementregistratie" die verwijst naar... Bootstrap en AngularJS.

Verwijzingen naar de Bootstrap CSS-stijlbestand, gebruikt in combinatie met de Bootstrap bibliotheek.
Een verwijzing naar de AngularJS-bibliotheek. Alles wat vanaf hier met AngularJS wordt gedaan, wordt vanuit dit bestand afgehandeld.
Een verwijzing naar de Bootstrap bibliotheek, die ervoor zorgt dat bepaalde besturingselementen responsief worden.

⚠️ correctie: De oorspronkelijke versie laadde jQuery en stelde dat AngularJS ervan afhankelijk is. Dat is niet het geval. AngularJS wordt geleverd met jqLite, een ingebouwde subset van de jQuery API, en wordt alleen geüpgraded naar de volledige jQuery-versie als jQuery wordt geladen. vaardigheden Het. De verwijzing is verwijderd.

Stap 2) Controleer de bestanden en bestandsstructuur

De bestanden zijn, net als in elke conventionele webapplicatie, verdeeld over twee mappen: "css" voor stylesheets en "lib" voor de code. JavaScript bestanden.
Het bestand bootstrap.css bevindt zich in de map css en bepaalt de vormgeving van de website.
angular.js is de belangrijkste bibliotheek, gedownload van de AngularJS-website en bewaard in de map lib.
Het bestand app.js bevat de code voor de controllers.

Stap 3) Gebruik AngularJS-code om de uitvoer weer te geven

Het doel is om de woorden "AngularJS" zowel als platte tekst als in een tekstvak weer te geven wanneer de pagina in de browser wordt geopend.

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

ng-app markeert dit element als de root van een AngularJS-applicatie. Attributen met het voorvoegsel NG- Dit zijn ingebouwde richtlijnen. "DemoApp" is de naam die aan de applicatie is gegeven.
De divisie draagt ng-controller met de naam "DemoController", waardoor dat element en alles wat zich daarin bevindt toegang krijgt tot de controller-scope.
ng-model Hiermee wordt de modelbinding gemaakt, waarbij het tekstvak 'Tutorial Name' wordt gekoppeld aan de scope-eigenschap. tutorialName.
De module DemoApp wordt aangemaakt en de controller kent een standaardwaarde van "AngularJS" toe aan tutorialName.

⚠️ Correcties toegepast. De oorspronkelijke vermelding verklaarde chrset="UTF 8", wat noch een geldig attribuut noch een geldige coderingsnaam is, en AngularJS werd twee keer geladen: één keer vanaf het CDN en één keer vanaf lib/angular.jsHet tweemaal laden van de bibliotheek zorgt ervoor dat het modulesysteem opnieuw wordt geregistreerd, wat onvoorspelbaar gedrag veroorzaakt. De annotatie van de afhankelijkheidsarray. ['$scope', function($scope){…}] werd ook toegevoegd, zonder welke de controller vastloopt zodra het bestand wordt geminificeerd.

Output:

Omdat tutorialName Aan de eigenschap werd de waarde "AngularJS" toegekend; deze waarde verschijnt in het tekstvak en in de tekstregel. Eén eigenschap is voldoende voor een demonstratie; echte controllers tonen meestal ook gedrag, wat in de volgende sectie wordt behandeld.

Methoden definiëren in AngularJS-controllers

Normaal gesproken definieert men meerdere methoden in een controller om de bedrijfslogica te scheiden. Als de controller bijvoorbeeld twee getallen moest optellen en aftrekken, zou dat een goede stap zijn.tracAls je twee getallen hebt, maak je voor elke bewerking een aparte methode.

Het onderstaande voorbeeld definieert een aangepaste methode binnen een AngularJS-controller die een tekenreeks retourneert.

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

Een functie wordt als lid aan het scope-object gekoppeld. tNameHet retourneert de huidige waarde van tutorialName.
De weergave roept de methode aan met {{tName()}}De haakjes zijn belangrijk: zonder haakjes print de expressie de functie zelf in plaats van het resultaat.

⚠️ correctie: de oorspronkelijke methode lezen $scope.tName = function() { return $scope.tName; };Die functie retourneert zichzelf, niet de naam van de tutorial, waardoor de pagina de functiebody in plaats van tekst weergaf. Nu retourneert de pagina zichzelf. $scope.tutorialName.

Output:

Tot nu toe stond alles in één bestand. In productieomgevingen worden controllers echter gescheiden gehouden, zoals in het volgende gedeelte wordt aangetoond.

AngularJS-controller met ng-controllervoorbeeld

Het bovenstaande "HelloWorld"-voorbeeld plaatste alle functionaliteit in één bestand. Het is nu tijd om de controllercode naar een eigen bestand te verplaatsen.

Stap 1) Voeg in het bestand app.js de volgende code toe voor je controller.

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

De bovenstaande code doet het volgende:

Definieert een module genaamd "app" die de controller bevat.
Hiermee wordt een controller met de naam "HelloWorldCtrl" aangemaakt die een "Hallo wereld"-bericht weergeeft.
Gebruikt het scope-object om informatie van de controller naar de view door te geven, in dit geval een variabele genaamd message.

Stap 2) Voeg in Sample.html een div toe met de ng-controller-richtlijn en een verwijzing naar de lidvariabele. messageVergeet niet te verwijzen naar app.js, waarin de broncode van de controller staat.

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

⚠️ correctie: app.js moet geladen zijn na angular.js, omdat het aanroept angular.moduleHet origineel laadde de bibliotheek ook twee keer en bevatte dezelfde gegevens. chrset typfout.

Output:

Elk voorbeeld tot nu toe heeft direct lees- en schrijfeigenschappen op $scopeHet onderstaande gedeelte beschrijft het alternatief dat het AngularJS-team aanbeveelt.

Hoe gebruik je de `controllerAs`-syntaxis in AngularJS?

Rechtstreeks binden aan $scope Het werkt, maar het wordt onduidelijk zodra controllers genesteld zijn. Een view-expressie zoals {{name}} geeft geen enkele aanwijzing welke controller de eigenaar is. nameEn omdat subbereiken prototypisch van bovenliggende bereiken erven, creëert een geneste controller die naar een overgeërfd primitief type schrijft, stilletjes zijn eigen schaduwkopie. controllerAs De syntaxis lost beide problemen op door elke controller een alias te geven.

Stap 1) Geef de controller in de weergave een alias met behulp van de as Gebruik het trefwoord en voeg vervolgens dat alias als voorvoegsel toe aan elke binding.

Stap 2) Koppel in de controller eigenschappen aan this in plaats van naar $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>

Hieruit volgen drie voordelen. De overeenkomsten worden zelfdocumenterend, omdat demo.tutorialName noemt zijn eigenaar. Geneste controllers voorkomen conflicten, omdat een ouder een alias heeft. outer en een kind met een alias inner kunnen beide blootleggen nameWaarden worden ook via een object gekoppeld in plaats van via een kale primitieve, zijstap.ping De valkuil waarbij een bewerking in een kindproces het ouderproces nooit bereikt.

👏 Tip: vangen this in een variabele zoals vm bovenaan de controller. Binnen een callback, this verwijst naar iets heel anders, en de vastgelegde verwijzing zorgt ervoor dat de binding correct blijft.

Het kiezen van een bindingsstijl is één beslissing. Beslissen wat er überhaupt in een controller thuishoort, is een andere, en de onderstaande vergelijking trekt die grens.

Controller versus Service in AngularJS

Beginners overladen de controller vaak met taken die eigenlijk in een service thuishoren. Het verschil zit hem in de levensduur en het hergebruik: een controller bestaat alleen zolang de bijbehorende weergave op het scherm te zien is, terwijl een service een singleton is die de hele levensduur van de applicatie meegaat.

Aspect	Controller	Diensten
Levensduur	Gemaakt en vernietigd met het oog op	Eén instantie voor de gehele applicatie
Doel	Gegevens voorbereiden voor één weergave	Gedeelde logica, status en serveraanroepen
Herbruikbare	Nee, het is verbonden aan het uitzicht.	Ja, overal injecteerbaar.
Behoudt de status tussen weergaven	Nee, de staat is verloren gegaan tijdens de navigatie.	Ja, de toestand blijft bestaan.
Typische inhoud	Bereikeigenschappen en weergavemethoden	HTTP-aanroepen, caching, bedrijfsregels

Houd controllers compact. Als twee controllers dezelfde logica nodig hebben, of als een waarde behouden moet blijven tijdens de navigatie tussen verschillende weergaven, plaats deze dan in een service en injecteer die service waar nodig. Een praktische test is om te controleren of de code nog steeds zinvol is wanneer het huidige scherm gesloten is. Als het antwoord ja is, hoort de code in een service thuis.

Veelgestelde vragen

Ja. AngularJS creëert een aparte instantie en een aparte scope voor elk element dat de directive bevat. De instanties delen geen status, dus een wijziging in de ene instantie is niet zichtbaar in de andere.

Declareer het in de route wanneer de controller deel uitmaakt van een volledige weergave die wordt geladen door routingGebruik `ng-controller` voor een component dat binnen een pagina verschijnt, ongeacht de huidige route. Declareer nooit beide, anders wordt de controller twee keer uitgevoerd.

Gebruik de array-annotatie en vermeld de namen van de afhankelijkheden als tekenreeksen vóór de functie. Minifiers hernoemen functieargumenten, maar nooit tekenreeksliteralen, dus de injector lost $scope en alle services nog steeds correct op.

Ja. AI Assistenten genereren de module-, controller- en scope-bindingen op basis van een eenvoudige beschrijving van het scherm. Controleer altijd de afhankelijkheidsannotatie, aangezien deze in de gegenereerde code vaak ontbreekt.

AI-tools herschrijven bereiktoewijzingen als eigenschappen van een vastgelegde VM-variabele en voegen aan elke overeenkomende weergavebinding het alias toe als voorvoegsel. RevBekijk de `$watch`-aanroepen en gebeurtenislisteners handmatig, omdat die nog steeds het `scope`-object vereisen.

AngularJS-controllers met ng-controllervoorbeeld

Wat is controller in AngularJS?

Wat doet de Controller vanuit het perspectief van Angular?

Hoe u een basiscontroller bouwt in AngularJS

Methoden definiëren in AngularJS-controllers

AngularJS-controller met ng-controllervoorbeeld

Hoe gebruik je de `controllerAs`-syntaxis in AngularJS?

Controller versus Service in AngularJS

Veelgestelde vragen

Vat dit bericht samen met:

Schrijf je in voor de nieuwsbrief

Wat is controller in AngularJS?

Wat doet de Controller vanuit het perspectief van Angular?

Hoe u een basiscontroller bouwt in AngularJS

GERELATEERDE ARTIKELEN

Methoden definiëren in AngularJS-controllers

AngularJS-controller met ng-controllervoorbeeld

Hoe gebruik je de `controllerAs`-syntaxis in AngularJS?

Controller versus Service in AngularJS

Veelgestelde vragen

Vat dit bericht samen met:

Schrijf je in voor de nieuwsbrief