AngularJS kontroleri s primjerom ng-kontrolera

⚡ Pametni sažetak

Kontroler u AngularJS-u sadrži poslovnu logiku ekrana. Prima podatke putem objekta scope, obrađuje ih i izlaže rezultat natrag prikazu, čuvajućiping označavanje prezentacije oslobođeno logike aplikacije.

🎯 Osnovna odgovornost: Kontroler popunjava objekt opsega i izlaže metode pogledu; ne manipulira DOM-om.
🔗 Ožičenje: Direktiva ng-controller veže imenovani kontroler na element, dajući tom elementu i njegovim podređenima pristup opsegu kontrolera.
🔁 Dvosmjerno vezanje: ng-model povezuje polje obrasca sa svojstvom opsega, pa uređivanja u pogledu ažuriraju kontroler i obrnuto.
🧩 Metode: Funkcije pridružene opsegu odvajaju zasebne dijelove logike i mogu se pozvati izravno iz izraza prikaza.
🏷️ controllerAs sintaksa: Aliasiranje kontrolera i povezivanje s njim this uklanja dvosmislenost kada su kontroleri ugniježđeni jedan u drugi.
📁 odvajanje: Premještanje kontrolera u namjensku datoteku app.js održava sloj prikaza neovisnim od logičkog sloja.

Pročitaj više

Što je Controller u AngularJS?

A kontrolor U AngularJS-u, podaci se uzimaju iz Viewa, obrađuju i zatim šalju u View koji se prikazuje krajnjem korisniku. Controller sadrži vašu osnovnu poslovnu logiku. Koristi model podataka, provodi potrebnu obradu, a zatim prosljeđuje izlaz u View.

⚠️ Napomena o verziji: AngularJS (grana 1.x) dosegao je kraj svog životnog vijeka 31. prosinca 2021. i neće primati daljnje sigurnosne zakrpe. Koncepti u nastavku i dalje se primjenjuju na naslijeđene aplikacije; u modernom Angularu istu ulogu ispunjava klasa komponente, a ne kontroler.

Poznavanje što je kontroler ostavlja jedno pitanje otvorenim: kako on zapravo komunicira s pogledom. Sljedeći odjeljak odgovara na to.

Što Controller radi iz Angularove perspektive

Slijedi jednostavna definicija rada AngularJS kontrolera:

Primarna odgovornost kontrolora je kontrolirati podatke koji se prosljeđuju prikazu. Opseg i pogled imaju dvosmjernu komunikaciju.
Svojstva prikaza i događaji mogu pozivati funkcije na području. Isječak u nastavku prikazuje funkcija ($scope) deklarirano s kontrolerom plus interna funkcija koja vraća $scope.firstName i $scope.lastName pridružio se. U AngularJS, funkcija definirana kao varijabla je Metoda.

Podaci se prenose od kontrolera do opsega, a zatim naprijed-natrag između opsega i pogleda.
Opseg izlaže model pogledu. Model se može mijenjati putem metoda definiranih na opsegu, koje se pokreću događajima iz pogleda.
Kontroleri se ne bi trebali koristiti za manipuliranje DOM-om. To je posao direktive.
Najbolja praksa je temeljiti kontrolere na funkcionalnosti. Ako imate obrazac za unos kojem je potreban kontroler, stvorite jedan pod nazivom "kontroler obrasca".

Nakon što smo razumjeli mehanizam, sljedeći odjeljak gradi kontroler iz prazne stranice.

Kako izgraditi osnovni kontroler u AngularJS

U nastavku su navedeni koraci za izradu kontrolera u AngularJS-u.

Korak 1) Napravite osnovnu HTML stranicu

Prije izrade kontrolera, osnovna HTML stranica mora biti postavljena. Isječak u nastavku je jednostavna stranica pod nazivom "Registracija događaja" koja referencira Bootstrap i AngularJS-a.

Reference na Bootstrap CSS stilski list, koji se koristi zajedno s Bootstrap knjižnica.
Referenca na AngularJS biblioteku. Sve što se od sada radi s AngularJS-om izvršava se iz ove datoteke.
Referenca na Bootstrap biblioteka koja čini određene kontrole responzivnima.

⚠️ Ispravak: izvorno učitani jQuery i navedeno da AngularJS ovisi o njemu. Ne ovisi. AngularJS dolazi s jqLiteom, ugrađenim podskupom jQuery API-ja, i nadograđuje se na puni jQuery samo ako se jQuery učita prije Referenca je uklonjena.

Korak 2) Provjerite datoteke i strukturu datoteka

Datoteke su podijeljene u dvije mape kao u bilo kojoj konvencionalnoj web aplikaciji: „css“ za stilske listove i „lib“ za JavaScript slika.
bootstrap.css se nalazi u css mapi i daje stranici izgled i dojam.
angular.js je glavna biblioteka, preuzeta s AngularJS stranice i pohranjena u lib.
app.js će sadržavati kod za kontrolere.

Korak 3) Koristite AngularJS kod za prikaz rezultata

Cilj je ovdje prikazati riječi „AngularJS“ i kao običan tekst i unutar tekstnog okvira kada se stranica otvori u pregledniku.

<!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 Objašnjenje:

ng-aplikacija označava ovaj element kao korijen AngularJS aplikacije. Atributi s prefiksom ng- su ugrađene direktive. "DemoApp" je naziv dodijeljen aplikaciji.
Div nosi ng-kontroler s nazivom „DemoController“, što tom elementu i svemu unutar njega daje pristup opsegu kontrolera.
ng-model stvara povezivanje modela, povezujući tekstualni okvir Naziv tutorijala sa svojstvom opsega tutorialName.
Modul DemoApp se stvara, a kontroler dodjeljuje zadanu vrijednost "AngularJS" tutorialName.

⚠️ Primijenjene su ispravke. Izvorni popis je deklariran chrset="UTF 8", što nije ni valjani atribut ni valjani naziv kodiranja, i dva puta je učitao AngularJS - jednom iz CDN-a i jednom iz lib/angular.jsDvostruko učitavanje biblioteke ponovno registrira sustav modula i proizvodi nepredvidivo ponašanje. Anotacija polja ovisnosti ['$scope', function($scope){…}] također je dodan, bez kojeg kontroler prekida rad u trenutku kada se datoteka minimizira.

Izlaz:

Jer tutorialName dodijeljena je vrijednost „AngularJS“, ta se vrijednost pojavljuje u tekstnom okviru i u retku običnog teksta. Jedno svojstvo je dovoljno za demonstraciju; stvarni kontroleri obično također prikazuju ponašanje, što je obuhvaćeno sljedećim odjeljkom.

Kako definirati metode u AngularJS kontrolerima

Normalno bi se u kontroleru definiralo više metoda za odvajanje poslovne logike. Ako bi kontroler morao dodati dva broja i podbrojtracZa dva broja, stvorili biste jednu metodu za svaku operaciju.

Primjer u nastavku definira prilagođenu metodu unutar AngularJS kontrolera koja vraća niz znakova.

<!-- 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 Objašnjenje:

Funkcija je pridružena objektu opsega kao član tNameVraća trenutnu vrijednost od tutorialName.
Pogled poziva metodu s {{tName()}}Zagrade su važne: bez njih izraz ispisuje samu funkciju, a ne njezin rezultat.

⚠️ Ispravak: originalna metoda čitanja $scope.tName = function() { return $scope.tName; };Ta funkcija vraća samu sebe, a ne naziv tutorijala, pa je stranica prikazala tijelo funkcije umjesto teksta. Sada vraća $scope.tutorialName.

Izlaz:

Do sada je sve bilo u jednoj datoteci. Produkcijske aplikacije drže kontrolere odvojeno, što je ono što pokazuje sljedeći odjeljak.

AngularJS kontroler s primjerom ng-kontrolera

U gornjem primjeru "HelloWorld" sve su funkcionalnosti smještene u jednu datoteku. Sada je vrijeme da se kod kontrolera premjesti u zasebnu datoteku.

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

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

Gornji kod radi sljedeće:

Definira modul pod nazivom "aplikacija" koji sadrži kontroler.
Stvara kontroler pod nazivom „HelloWorldCtrl“ koji prikazuje poruku „Pozdrav svijete“.
Koristi objekt scope za prosljeđivanje informacija iz kontrolera u pogled, u ovom slučaju varijablu pod nazivom message.

Korak 2) U datoteci Sample.html dodajte div koji sadrži direktivu ng-controller i referencu na varijablu članicu. messageNe zaboravite referencirati app.js, koji sadrži izvorni kod kontrolera.

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

⚠️ Ispravak: app.js mora biti učitan nakon angular.js, budući da poziva angular.moduleIzvornik je također dva puta napunio knjižnicu i nosio isti chrset slovoslagač.

Izlaz:

Svaki primjer do sada ima svojstva čitanja i pisanja izravno na $scopeU donjem odjeljku opisana je alternativa koju preporučuje AngularJS tim.

Kako koristiti sintaksu controllerAs u AngularJS-u

Izravno vezanje na $scope radi, ali postaje dvosmisleno čim se kontroleri ugnijezde. Izraz prikaza kao što je {{name}} ne daje pojma koji kontroler posjeduje name, a budući da podređeni opsezi nasljeđuju od roditeljskih opsega prototipski, ugniježđeni kontroler koji piše u naslijeđeni primitiv tiho stvara vlastitu sjenu kopiju. controllerAs sintaksa uklanja oba problema davanjem svakom kontroleru pseudonima.

Korak 1) Alias kontrolera u pogledu pomoću as ključnu riječ, a zatim svakom povezivanju dodajte prefiks tog pseudonima.

Korak 2) Unutar kontrolera, priložite svojstva za this a ne $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>

Slijede tri dobitka. Veze postaju samodokumentirajuće, jer demo.tutorialName imenuje svog vlasnika. Ugniježđeni kontroleri prestaju se kolidirati jer je roditelj aliasiran outer i dijete s pseudonimom inner mogu li oboje izložiti nameVrijednosti se također vežu kroz objekt, a ne kroz goli primitiv, zaobilazni korakping zamka gdje uređivanje u podređenom elementu nikada ne dođe do roditelja.

💡 Savjet: hvatanje this u varijablu kao što je vm na vrhu kontrolera. Unutar povratnog poziva, this odnosi se na nešto sasvim drugo, a snimljena referenca održava povezivanje ispravnim.

Odabir stila povezivanja je jedna odluka. Odlučiti što uopće pripada kontroleru je druga, a usporedba u nastavku povlači tu granicu.

Kontroler vs. usluga u AngularJS-u

Početnici često preopterećuju kontroler poslom koji pripada usluzi. Razlika je u životnom vijeku i ponovnoj upotrebi: kontroler postoji samo dok je njegov prikaz na ekranu, dok je usluga singleton koji živi za cijeli život aplikacije.

Aspekt	kontrolor	Servis
Život	Stvoreno i uništeno s pogledom	Jedna instanca za cijelu aplikaciju
Svrha	Pripremite podatke za jedan prikaz	Zajednička logika, stanje i pozivi poslužitelja
Za višekratnu upotrebu	Ne, vezano za njegov pogled	Da, može se injektirati bilo gdje
Zadržava stanje između prikaza	Ne, stanje se gubi prilikom navigacije	Da, država i dalje postoji
Tipičan sadržaj	Svojstva opsega i metode prikaza	HTTP pozivi, keširanje, poslovna pravila

Održavajte kontrolere tankima. Ako dva kontrolera trebaju istu logiku ili ako vrijednost mora preživjeti navigaciju između prikaza, premjestite je u uslugu i ubrizgajte tu uslugu gdje je potrebna. Praktični test je pitati bi li kod i dalje imao smisla sa zatvorenim trenutnim zaslonom. Ako je odgovor da, pripada usluzi.

Pitanja i odgovori

Da. AngularJS stvara zasebnu instancu i zaseban opseg za svaki element koji nosi direktivu. Instance ne dijele stanje, tako da se promjena u jednoj ne pojavljuje u drugoj.

Deklarirajte ga u ruti kada kontroler pripada cijelom pogledu učitanom od strane usmjeravanjeKoristite ng-controller za komponentu koja se pojavljuje unutar stranice bez obzira na trenutnu rutu. Nikada ne deklarirajte oboje, inače će se kontroler pokrenuti dvaput.

Koristite anotaciju polja, navodeći nazive ovisnosti kao nizove znakova prije funkcije. Minifikatori preimenuju argumente funkcije, ali nikada literale nizova znakova, tako da injektor i dalje ispravno rješava $scope i sve usluge.

Da. AI Asistenti izrađuju poveznice modula, kontrolera i opsega iz jednostavnog opisa zaslona. Uvijek provjerite anotaciju ovisnosti, jer je generirani kod često izostavlja.

Alati umjetne inteligencije prepisuju dodjele opsega kao svojstva snimljene varijable virtualnog stroja i svakom odgovarajućem povezivanju prikaza dodaju alias. RevRučno pregledajte pozive i slušače događaja funkcije $watch, jer oni i dalje zahtijevaju objekt opsega.

AngularJS kontroleri s primjerom ng-kontrolera

Što je Controller u AngularJS?

Što Controller radi iz Angularove perspektive

Kako izgraditi osnovni kontroler u AngularJS

Kako definirati metode u AngularJS kontrolerima

AngularJS kontroler s primjerom ng-kontrolera

Kako koristiti sintaksu controllerAs u AngularJS-u

Kontroler vs. usluga u AngularJS-u

Pitanja i odgovori

Sažmite ovu objavu uz:

Prijavite se za bilten

Što je Controller u AngularJS?

Što Controller radi iz Angularove perspektive

Kako izgraditi osnovni kontroler u AngularJS

POVEZANI ČLANCI

Kako definirati metode u AngularJS kontrolerima

AngularJS kontroler s primjerom ng-kontrolera

Kako koristiti sintaksu controllerAs u AngularJS-u

Kontroler vs. usluga u AngularJS-u

Pitanja i odgovori

Sažmite ovu objavu uz:

Prijavite se za bilten