AngularJS-controllers met ng-controllervoorbeeld

Welke controller doet vanuit het perspectief van Angular?

Hieronder volgt een eenvoudige definitie van de werking van 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.
• De eigenschappen van de weergave kunnen “functies” op de scope aanroepen. Bovendien kunnen gebeurtenissen in de weergave ‘methoden’ op de reikwijdte oproepen. Het onderstaande codefragment geeft een eenvoudig voorbeeld van een functie.
• Uw partner voor functie($scope) die wordt 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.
• In angularjsWanneer u 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.
• Het bereik wordt gebruikt om het model aan de weergave bloot te stellen. Het model kan worden gewijzigd via methoden die in het bereik zijn gedefinieerd en die kunnen worden geactiveerd via gebeurtenissen uit de weergave. We kunnen tweerichtingsmodelbinding definiëren van de scope naar het model.
• Controllers zouden idealiter niet gebruikt moeten worden om de DOM te manipuleren. Dit zou gedaan moeten worden door de directives die we later zullen zien.
• De beste praktijk is om controllers te gebruiken op basis van functionaliteit. Als u bijvoorbeeld een formulier voor invoer heeft en daarvoor een controller nodig heeft, maakt u een controller met de naam “formuliercontroller”.

Hoe u een basiscontroller bouwt in AngularJS

Hieronder staan ​​de stappen om een ​​controller in AngularJS te maken:

Stap 1) Maak een eenvoudige HTML-pagina

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 verwijzingen naar belangrijke bibliotheken zoals Bootstrap, jQuery en Angular.

1. We voegen verwijzingen toe naar de bootstrap CSS-stylesheets, die zullen worden gebruikt in combinatie met de bootstrap-bibliotheken.
2. We voegen verwijzingen toe naar de angularjs-bibliotheken. Dus naar alles wat we in de toekomst met angular.js doen, wordt vanuit deze bibliotheek verwezen.
3. We voegen verwijzingen toe naar de bootstrapbibliotheek om onze webpagina beter te laten reageren op bepaalde bedieningselementen.
4. 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 zal het bovenstaande codefragment aanwezig zijn in al onze voorbeelden, zodat we in de volgende secties alleen de specifieke angularJS-code kunnen weergeven.

Stap 2) Controleer de bestanden en bestandsstructuur

Laten we ten tweede eens kijken naar onze bestanden en bestandsstructuur waarmee we tijdens onze cursus gaan beginnen.

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

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

Wat we hier willen doen is de woorden "AngularJS" weergeven in zowel tekstformaat als in een tekstvak wanneer de pagina in de browser wordt bekeken. Laten we een voorbeeld bekijken van hoe je angular.js hiervoor kunt gebruiken:

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">

	Tutorial Name : <input type="text" ng-model="tutorialName"><br>

	This tutorial is {{tutorialName}}
</div>
<script>
	var app = angular.module('DemoApp',[]);

	app.controller('DemoController', function($scope){
	$scope.tutorialName = "Angular JS";
	});
</script>

</body>
</html>

Code Verklaring:

1. Uw partner voor ng-app trefwoord wordt gebruikt om aan te geven dat deze toepassing als een hoektoepassing moet worden beschouwd. Alles wat begint met het voorvoegsel 'ng' staat bekend als een Richtlijnen. “DemoApp” is de naam die wordt gegeven aan onze Angular.JS-applicatie.
2. We hebben een div-tag gemaakt en in deze tag hebben we een ng-controller-richtlijn toegevoegd, samen met de naam van onze controller “DemoController”. Dit zorgt er feitelijk voor dat onze div-tag toegang krijgt tot de inhoud van de democontroller. U moet de naam van de controller onder de richtlijn vermelden om ervoor te zorgen dat u toegang hebt tot de functionaliteit die binnen de controller is gedefinieerd.
3. We maken een modelbinding met behulp van de ng-model-richtlijn. Wat dit doet, is dat het de tekstbox voor Tutorial Name bindt om gebonden te worden aan de lidvariabele "tutorialName".
4. We maken een lidvariabele genaamd “tutorialName” die gebruikt zal worden om de informatie weer te geven die de gebruiker typt in het tekstvak voor Tutorial Name.
5. We maken een module die aan onze DemoApp-applicatie wordt gekoppeld. Deze module wordt nu dus onderdeel van onze applicatie.
6. In de module definiëren we een functie die een standaardwaarde van “AngularJS” toewijst aan onze tutorialName-variabele.

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

Output:

Omdat we de variabele tutorialName de waarde “Angular JS” hebben gegeven, wordt deze weergegeven in het tekstvak en in de platte tekstregel.

Methoden definiëren in AngularJS-controllers

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

Stel dat u uw controller twee basisdingen wilt laten doen:

1. De optelling van 2 getallen uitvoeren
2. De aftrekking van 2 getallen uitvoeren

U zou dan idealiter twee methoden in uw controller kunnen creëren, één 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 eenvoudigweg een string.

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
	Tutorial Name :<input type="text" ng-model="tutorialName"><br>
	<br>
	This tutorial is {{tutorialName}}	
</div>

<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
    $scope.tutorialName = "Angular JS";
	$scope.tName = function() {
        return $scope.tName;
    };
});
</script>	
</body>
</html>

Code Verklaring:

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

Output:

AngularJS-controller met ng-controllervoorbeeld

Laten we eens kijken naar een voorbeeld van “HelloWorld” waarbij alle functionaliteit in één 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 toe voor uw controller

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

De bovenstaande code doet het volgende:

1. Definieer een module genaamd “app” die de controller samen met de controllerfunctionaliteit bevat.
2. Maak een controller met de naam “HelloWorldCtrl”. Deze controller zal worden gebruikt om een ​​functionaliteit te hebben om een ​​“Hallo Wereld”-bericht weer te geven.
3. Het scope-object wordt gebruikt om informatie van de controller naar de weergave door te geven. In ons geval zal het scope-object dus worden gebruikt om een ​​variabele vast te houden met de naam "bericht".
4. 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-richtlijn zal bevatten en voeg vervolgens een verwijzing toe naar de lidvariabele "message"

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

<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta chrset="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="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<script src="app.js"></script>

</body>
</html>

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

Output:

Samenvatting

• De primaire verantwoordelijkheid van de controller is het maken van een scope-object dat op zijn beurt wordt doorgegeven aan de weergave
• Hoe je een eenvoudige controller bouwt 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 webapplicaties.