AngularJS Controller-zelfstudie met voorbeeld

Wat is Controller in AngularJs?

Een controller in AngularJs haalt de gegevens uit de weergave, verwerkt de gegevens en stuurt die gegevens vervolgens naar de weergave die aan de eindgebruiker wordt weergegeven. De controller heeft uw core business logica.

De controller gebruikt het datamodel, voert de vereiste bewerkingen uit en geeft de output vervolgens door aan de weergave die op zijn beurt wordt weergegeven aan de eindgebruiker.

In deze tutorial leer je-

Wat Controller doet vanuit het perspectief van Angular
Hoe een basiscontroller te bouwen
Hoe methoden in Controller te definiëren
Met behulp van ng-controller in externe bestanden

Wat Controller doet vanuit het perspectief van Angular

Hieronder volgt een eenvoudige definitie van de werking van Angular JS Controller.

De primaire verantwoordelijkheid van de controller is om de gegevens te controleren die aan de weergave worden doorgegeven. De reikwijdte en het uitzicht hebben een tweerichtingscommunicatie.
De eigenschappen van de view kunnen "functies" op de scope aanroepen. Bovendien kunnen gebeurtenissen op de weergave "methoden" op de scope aanroepen. Het onderstaande codefragment geeft een eenvoudig voorbeeld van een functie.
- De functie ($ scope) die is gedefinieerd bij het definiëren van de controller en een interne functie die wordt gebruikt om de aaneenschakeling van $ scope.firstName en $ scope.lastName te retourneren.
- Wanneer u in AngularJS een functie als een variabele definieert, staat deze bekend als een methode.

Gegevens gaan op deze manier van de controller naar de scope, en vervolgens gaan de gegevens heen en weer van de scope naar de weergave.
De scope wordt gebruikt om het model aan het zicht bloot te stellen. Het model kan worden gewijzigd via methoden die in de scope zijn gedefinieerd en die kunnen worden geactiveerd via gebeurtenissen vanuit de weergave. We kunnen modelbinding in twee richtingen definiëren van de scope naar het model.
Controllers zouden idealiter niet moeten worden gebruikt voor het manipuleren van de DOM. Dit moet gebeuren door de richtlijnen die we later zullen zien.
Het beste is om controllers te hebben op basis van functionaliteit. Als je bijvoorbeeld een formulier hebt om in te voeren en je hebt daarvoor een controller nodig, maak dan een controller aan met de naam "form controller".

Hoe een basiscontroller te bouwen

Voordat we beginnen met het maken van een controller, moeten we eerst onze basis HTML-pagina-instellingen hebben.

Het onderstaande codefragment is een eenvoudige HTML-pagina met de titel "Evenementregistratie" en bevat verwijzingen naar belangrijke bibliotheken zoals Bootstrap, jquery en Angular.

We voegen verwijzingen toe aan de bootstrap CSS-stylesheets, die in combinatie met de bootstrap-bibliotheken zullen worden gebruikt.
We voegen verwijzingen toe naar de angularjs-bibliotheken. Dus alles wat we in de toekomst met angular.js doen, zal in deze bibliotheek worden verwezen.
We voegen verwijzingen toe aan de bootstrap-bibliotheek om onze webpagina beter te laten reageren op bepaalde besturingselementen.
We hebben verwijzingen toegevoegd naar jQuery-bibliotheken die zullen worden gebruikt voor DOM-manipulatie. Dit is vereist door Angular omdat een deel van de functionaliteit in Angular afhankelijk is van deze bibliotheek.

Standaard is het bovenstaande codefragment aanwezig in al onze voorbeelden, zodat we alleen de specifieke angularJS-code in de volgende secties kunnen tonen.

Laten we ten tweede kijken naar onze bestanden en bestandsstructuur waarmee we beginnen tijdens de duur van onze cursus.

Eerst scheiden we onze bestanden in 2 mappen, zoals bij elke conventionele webapplicatie. We hebben de map "CSS". Het zal al onze trapsgewijze style sheet-bestanden bevatten, en dan hebben we onze "lib" -map met al onze JavaScript-bestanden.
Het bestand bootstrap.css wordt in de CSS-map geplaatst en wordt gebruikt om een goede look en feel voor onze website te geven.
De angular.js is ons hoofdbestand dat werd gedownload van de angularJS-site en bewaard in onze lib-map.
Het app.js-bestand bevat onze code voor de controllers.
Het bestand bootstrap.js wordt gebruikt als aanvulling op het bestand bootstrap.cs om bootstrap-functionaliteit toe te voegen aan onze webapplicatie.
Het jQuery-bestand wordt gebruikt om DOM-manipulatiefunctie aan onze site toe te voegen.

Laten we een voorbeeld bekijken van het gebruik van angular.js,

Wat we hier willen doen, is alleen de woorden "AngularJS" zowel in tekstformaat als in een tekstvak weergeven wanneer de pagina in de browser wordt bekeken.



Guru99 Global Event
Tutorial Name : 
This tutorial is {{tutorialName}}

Code Verklaring:

Het sleutelwoord ng-app wordt gebruikt om aan te geven dat deze applicatie moet worden beschouwd als een hoekapplicatie. Alles dat begint met het voorvoegsel 'ng', staat bekend als een richtlijn. "DemoApp" is de naam die aan onze Angular.JS-applicatie is gegeven.
We hebben een div-tag gemaakt en in deze tag hebben we een ng-controller-instructie toegevoegd samen met de naam van onze controller "DemoController". Dit maakt in feite onze div-tag de mogelijkheid om toegang te krijgen tot de inhoud van de demo-controller. U moet de naam van de controller vermelden onder de richtlijn om ervoor te zorgen dat u toegang hebt tot de functionaliteit die binnen de controller is gedefinieerd.
We maken een modelbinding met behulp van de ng-model-richtlijn. Wat dit doet, is dat het het tekstvak voor Tutorial Name bindt aan de lidvariabele "tutorialName".
We maken een lidvariabele genaamd "tutorialName" die zal worden gebruikt om de informatie weer te geven die de gebruiker typt in het tekstvak voor Tutorial Name.
We maken een module die aan onze DemoApp-applicatie wordt toegevoegd. Dus deze module wordt nu onderdeel van onze applicatie.
In de module definiëren we een functie die een standaardwaarde "AngularJS" toewijst aan onze tutorialName-variabele.

Als de opdracht met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

Omdat we de variabele tutorialName de waarde "Angular JS" hebben toegekend, wordt deze weergegeven in het tekstvak en in de regel met platte tekst.

Hoe methoden in Controller te definiëren

Normaal gesproken zou men meerdere methoden in de controller willen definiëren om de bedrijfslogica te scheiden.

Stel dat u wilt dat uw controller twee basisdingen doet,

Voer de toevoeging van 2 getallen uit
Voer het aftrekken van 2 getallen uit

U zou dan idealiter 2 methoden in uw controller creëren, een om de optelling uit te voeren en de andere om de aftrekking uit te voeren.

Laten we een eenvoudig voorbeeld bekijken van hoe u aangepaste methoden kunt definiëren binnen een Angular.JS-controller. De controller retourneert gewoon een string.

Event Registration

Guru99 Global Event
Tutorial Name :

This tutorial is {{tutorialName}}

Code Verklaring:

Hier definiëren we slechts een functie die een string van "AngularJS" retourneert. De functie is aan het scope-object gekoppeld via een lidvariabele genaamd tutorialName.
Als de opdracht met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

Met behulp van ng-controller in externe bestanden

Laten we eens kijken naar een voorbeeld van "HelloWorld" waar alle functionaliteit in een enkel bestand is geplaatst. Nu is het tijd om de code voor de controller in aparte bestanden te plaatsen.

Laten we de onderstaande stappen volgen om dit te doen.

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

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

De bovenstaande code doet de volgende dingen,

Definieer een module met de naam "app" die de controller samen met de controllerfunctionaliteit zal bevatten.
Maak een controller met de naam "HelloWorldCtrl". Deze controller zal worden gebruikt om een functionaliteit te hebben om een "Hello World" -bericht weer te geven.
Het scoopobject wordt gebruikt om informatie van de controller naar de weergave door te geven. Dus in ons geval zal het scope-object worden gebruikt om een variabele met de naam "message" te bevatten.
We definiëren het variabele bericht en kennen er de waarde "Hallo wereld" aan toe.

Stap 2) Voeg nu in uw Sample.html-bestand een div-klasse toe die de ng-controller-instructie bevat en voeg vervolgens een verwijzing toe naar de lidvariabele "message"

Vergeet ook niet om een verwijzing toe te voegen naar het scriptbestand app.js dat de broncode voor uw controller bevat.

Event Registration

Guru99 Global Event
{{message}}

Als de bovenstaande code correct is ingevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Uitgang:

Overzicht

De primaire verantwoordelijkheid van de controller is om een scope-object te maken dat op zijn beurt wordt doorgegeven aan de weergave
Hoe een eenvoudige controller te bouwen met behulp van de ng-app, ng-controller en ng-model richtlijnen
Hoe aangepaste methoden aan een controller kunnen worden toegevoegd die kunnen worden gebruikt om verschillende functionaliteiten binnen een angularjs-module te scheiden.
Controllers kunnen in externe bestanden worden gedefinieerd om deze laag te scheiden van de weergavelaag. Dit is normaal gesproken een best practice bij het maken van webtoepassingen.