AngularJS kontroleri s primjerom ng-kontrolera

Što je Controller u AngularJS?

A kontrolor u AngularJS-u uzima podatke iz prikaza, obrađuje ih i zatim šalje te podatke u prikaz koji se prikazuje krajnjem korisniku. Kontrolor će imati vašu temeljnu poslovnu logiku. Kontrolor će koristiti podatkovni model, izvršiti potrebnu obradu i zatim proslijediti izlaz u pogled koji se zatim prikazuje krajnjem korisniku.

Što kontroler radi iz Angularove perspektive?

Slijedi jednostavna definicija rada AngularJS Controllera:

Primarna odgovornost kontrolora je kontrolirati podatke koji se prosljeđuju prikazu. Opseg i pogled imaju dvosmjernu komunikaciju.
Svojstva pogleda mogu pozivati "funkcije" na opsegu. Štoviše, događaji na pogledu mogu pozvati "metode" na opsegu. Donji isječak koda daje jednostavan primjer funkcije.

The funkcija ($scope) koji se definira prilikom definiranja kontrolera i interne funkcije koja se koristi za vraćanje ulančavanja $scope.firstName i $scope.lastName.
In AngularJS, kada definirate funkciju kao varijablu, ona je poznata kao metoda.

Podaci na ovaj način prolaze od kontrolera do opsega, a zatim podaci prolaze naprijed i natrag od opsega do pogleda.
Opseg se koristi za izlaganje modela pogledu. Model se može modificirati pomoću metoda definiranih u opsegu koje se mogu pokrenuti putem događaja iz prikaza. Možemo definirati dvosmjerno vezanje modela iz opsega u model.
Upravljači se idealno ne bi trebali koristiti za manipuliranje DOM-om. To bi trebalo učiniti direktivama koje ćemo vidjeti kasnije.
Najbolja praksa je da se kontroleri temelje na funkcionalnosti. Na primjer, ako imate obrazac za unos i za to vam je potreban kontroler, stvorite kontroler pod nazivom "kontroler obrasca".

Kako izgraditi osnovni kontroler u AngularJS

U nastavku su navedeni koraci za stvaranje kontrolera u AngularJS:

Korak 1) Napravite osnovnu HTML stranicu

Prije nego što počnemo s izradom kontrolera, prvo moramo imati osnovne postavke HTML stranice.

Donji isječak koda je jednostavna HTML stranica koja ima naslov "Registracija događaja" i ima reference na važne biblioteke kao što su Bootstrap, jquery i Angular.

Dodajemo reference na bootstrap CSS stylesheets, koji će se koristiti u kombinaciji s bootstrap bibliotekama.
Dodajemo reference na angularjs knjižnice. Što god sada učinimo s angular.js ubuduće, bit će referencirano iz ove biblioteke.
Dodajemo reference na bootstrap biblioteku kako bi naša web stranica bolje reagirala na određene kontrole.
Dodali smo reference na jquery biblioteke koje će se koristiti za manipulaciju DOM-om. To zahtijeva Angular jer neke od funkcionalnosti u Angularu ovise o ovoj biblioteci.

Prema zadanim postavkama, gornji isječak koda bit će prisutan u svim našim primjerima, tako da možemo prikazati samo određeni angularJS kod u sljedećim odjeljcima.

Korak 2) Provjerite datoteke i strukturu datoteka

Drugo, pogledajmo naše datoteke i strukturu datoteka s kojima ćemo započeti tijekom trajanja našeg tečaja.

Najprije odvajamo naše datoteke u 2 mape kao što se radi s bilo kojom konvencionalnom web aplikacijom. Imamo mapu "CSS". Sadržat će sve naše kaskadne stilske datoteke, a zatim ćemo imati našu mapu "lib" koja će sadržavati sve naše JavaScript slika.
Datoteka bootstrap.css smještena je u CSS mapu i koristi se za dodavanje dobrog izgleda i dojma našoj web stranici.
Angular.js je naša glavna datoteka koja je preuzeta sa stranice angularJS i čuvana u našoj mapi lib.
Datoteka app.js sadržavat će naš kod za kontrolere.
Datoteka bootstrap.js koristi se kao dopuna datoteci bootstrap.cs za dodavanje funkcionalnosti pokretanja našoj web aplikaciji.
Datoteka jquery koristit će se za dodavanje funkcionalnosti manipulacije DOM-om na našu stranicu.

Korak 3) Koristite AngularJS kod za prikaz rezultata

Ono što ovdje želimo učiniti je samo prikazati riječi "AngularJS" u tekstualnom formatu i u tekstualnom okviru kada se stranica gleda u pregledniku. Pogledajmo primjer kako koristiti angular.js za ovo:

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

Objašnjenje koda:

The ng-aplikacija ključna riječ koristi se za označavanje da ovu aplikaciju treba smatrati kutnom aplikacijom. Sve što počinje prefiksom 'ng' je poznat kao Direktiva. “DemoApp” je naziv dat našoj Angular.JS aplikaciji.
Stvorili smo oznaku div i u ovu oznaku dodali smo direktivu ng-controller zajedno s nazivom našeg kontrolera "DemoController". Ovo u osnovi čini našu div oznaku mogućnošću pristupa sadržaju Demo Controllera. Morate spomenuti naziv kontrolera pod direktivom kako biste bili sigurni da možete pristupiti funkcionalnosti definiranoj unutar kontrolera.
Stvaramo uvezivanje modela pomoću direktive ng-model. Ono što ovo čini je da veže tekstualni okvir za naziv vodiča da bude vezan na varijablu člana “tutorialName”.
Stvaramo varijablu člana pod nazivom "tutorialName" koja će se koristiti za prikaz informacija koje korisnik upisuje u okvir za tekst za Tutorial Name.
Stvaramo modul koji će biti priključen na našu DemoApp aplikaciju. Tako ovaj modul sada postaje dio naše aplikacije.
U modulu definiramo funkciju koja dodjeljuje zadanu vrijednost "AngularJS" našoj varijabli tutorialName.

Ako je naredba uspješno izvršena, sljedeći će se izlaz prikazati kada pokrenete svoj kod u pregledniku.

Izlaz:

Budući da smo varijabli tutorialName dodijelili vrijednost "Angular JS", to se prikazuje u tekstualnom okviru i u retku običnog teksta.

Kako definirati metode u AngularJS kontrolerima

Obično bi se željelo definirati više metoda u kontroleru za odvajanje poslovne logike.

Na primjer, pretpostavimo da želite da vaš kontroler radi 2 osnovne stvari,

Izvršite zbrajanje 2 broja
Izvršite oduzimanje 2 broja

Tada biste idealno stvorili 2 metode unutar vašeg kontrolera, jednu za izvođenje zbrajanja, a drugu za izvođenje oduzimanja.

Pogledajmo jednostavan primjer kako možete definirati prilagođene metode unutar Angular.JS kontrolera. Kontroler će jednostavno vratiti niz.

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

Objašnjenje koda:

Ovdje samo definiramo funkciju koja vraća niz "AngularJS". Funkcija je pridružena objektu opsega preko varijable člana pod nazivom tutorialName.
Ako je naredba uspješno izvršena, sljedeći će se izlaz prikazati kada pokrenete svoj kod u pregledniku.

Izlaz:

AngularJS kontroler s primjerom ng-kontrolera

Pogledajmo primjer "HelloWorld" gdje su sve funkcije smještene u jednu datoteku. Sada je vrijeme da kod za kontroler smjestite u zasebne datoteke.

Slijedimo korake u nastavku da to učinimo:

Korak 1) U datoteci app.js dodajte sljedeći kod za svoj kontroler

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

Gornji kod radi sljedeće stvari:

Definirajte modul pod nazivom "app" koji će držati kontroler zajedno s funkcionalnošću kontrolera.
Napravite kontroler pod nazivom "HelloWorldCtrl". Ovaj kontroler koristit će se za funkciju prikaza poruke "Hello World".
Objekt opsega koristi se za prijenos informacija od kontrolera do pogleda. Dakle, u našem slučaju, objekt opsega koristit će se za držanje varijable pod nazivom "poruka".
Definiramo varijablu message i dodjeljujemo joj vrijednost “Hello World”.

Korak 2) Sada u svoju datoteku Sample.html dodajte div klasu koja će sadržavati direktivu ng-controller i zatim dodajte referencu na varijablu člana “message”

Također ne zaboravite dodati referencu na datoteku skripte app.js koja sadrži izvorni kod za vaš kontroler.

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

Ako je gornji kôd ispravno unesen, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz:

Rezime

Primarna odgovornost kontrolera je stvoriti objekt opsega koji se zauzvrat prosljeđuje prikazu
Kako izgraditi jednostavan kontroler pomoću direktiva ng-app, ng-controller i ng-model
Kako dodati prilagođene metode kontroleru koje se mogu koristiti za odvajanje različitih funkcionalnosti unutar angularjs modula.
Kontroleri se mogu definirati u vanjskim datotekama kako bi se ovaj sloj odvojio od sloja Pogled. Ovo je inače najbolja praksa pri izradi web aplikacija.

Što je Controller u AngularJS?

Što kontroler radi iz Angularove perspektive?

Kako izgraditi osnovni kontroler u AngularJS

POVEZANI ČLANCI

Kako definirati metode u AngularJS kontrolerima

AngularJS kontroler s primjerom ng-kontrolera

Rezime

Prijavite se za bilten