Ce este controlerul în AngularJs?
A Controllers din AngularJs preia datele din Vizualizare, prelucrează datele și apoi trimite acele date către vizualizarea care este afișată utilizatorului final. Controlorul va avea logica dvs. de bază.
Operatorul va utiliza modelul de date, va efectua procesarea necesară și apoi va transmite ieșirea către vizualizarea care la rândul său este afișată utilizatorului final.
În acest tutorial, veți învăța-
- Ce face controlerul din perspectiva Angular
- Cum se construiește un controller de bază
- Cum se definesc metodele în controler
- Utilizarea ng-controller în fișiere externe
- Responsabilitatea principală a operatorului este de a controla datele care sunt transmise vizualizării. Scopul și vizualizarea au o comunicare bidirecțională.
- Proprietățile vizualizării pot apela „funcții” pe domeniu. Mai mult, evenimentele din vizualizare pot apela "metode" pe domeniu. Fragmentul de cod de mai jos oferă un exemplu simplu de funcție.
- Funcția ($ scope) care este definită la definirea controlerului și o funcție internă care este utilizată pentru a returna concatenarea $ scope.firstName și $ scope.lastName.
- În AngularJS, atunci când definiți o funcție ca o variabilă, aceasta este cunoscută ca o metodă.
- Datele în acest fel trec de la controler la domeniu, iar apoi datele trec înainte și înapoi de la domeniu la vedere.
- Scopul este utilizat pentru a expune modelul la vizualizare. Modelul poate fi modificat prin metode definite în domeniul de aplicare care ar putea fi declanșat prin evenimente din vizualizare. Putem defini legarea modelului bidirecțional de la domeniul de aplicare la model.
- Controlerele nu ar trebui utilizate în mod ideal pentru manipularea DOM. Acest lucru ar trebui făcut prin directivele pe care le vom vedea mai târziu.
- Cea mai bună practică este să aveți controlerul pe baza funcționalității. De exemplu, dacă aveți un formular pentru introducere și aveți nevoie de un controler pentru asta, creați un controler numit „controler de formular”.
- Adăugăm referințe la foile de stil CSS bootstrap, care vor fi utilizate împreună cu bibliotecile bootstrap.
- Adăugăm referințe la bibliotecile angularjs. Deci, acum orice vom face cu angular.js în viitor, va fi menționat din această bibliotecă.
- Adăugăm referințe la biblioteca bootstrap pentru a face pagina noastră web mai receptivă la anumite controale.
- Am adăugat referințe la bibliotecile jquery care vor fi utilizate pentru manipularea DOM. Acest lucru este necesar de Angular, deoarece unele dintre funcționalitățile din Angular depind de această bibliotecă.
- Mai întâi, separăm fișierele noastre în 2 foldere, așa cum se face cu orice aplicație web convențională. Avem folderul „CSS”. Acesta va conține toate fișierele noastre de foaie de stil în cascadă, apoi vom avea folderul „lib” care va avea toate fișierele noastre JavaScript.
- Fișierul bootstrap.css este plasat în folderul CSS și este folosit pentru a adăuga un aspect bun pentru site-ul nostru.
- Angular.js este fișierul nostru principal care a fost descărcat de pe site-ul angularJS și păstrat în folderul nostru lib.
- Fișierul app.js va conține codul nostru pentru controlere.
- Fișierul bootstrap.js este utilizat pentru a completa fișierul bootstrap.cs pentru a adăuga funcționalitatea bootstrap aplicației noastre web.
- Fișierul jquery va fi utilizat pentru a adăuga funcționalitate de manipulare DOM pe site-ul nostru.
Ce face controlorul din perspectiva Angular
Urmează o definiție simplă a funcționării controlerului angular JS.
Cum se construiește un controller de bază
Înainte de a începe cu crearea unui controler, trebuie mai întâi să avem instalată pagina de bază HTML.
Fragmentul de cod de mai jos este o pagină HTML simplă care are titlul „Înregistrare eveniment” și are referințe la biblioteci importante precum Bootstrap, jquery și Angular.
În mod implicit, fragmentul de cod de mai sus va fi prezent în toate exemplele noastre, astfel încât să putem afișa doar codul angularJS specific în secțiunile următoare.
În al doilea rând, să ne uităm la fișierele noastre și structura fișierelor cu care vom începe pe durata cursului nostru.
Să vedem un exemplu despre cum să utilizați angular.js,
Ceea ce vrem să facem aici este doar să afișăm cuvintele „AngularJS” atât în format text, cât și într-o casetă de text atunci când pagina este vizualizată în browser.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Explicatie cod:
- Cuvântul cheie ng-app este utilizat pentru a indica faptul că această aplicație ar trebui considerată ca o aplicație unghiulară. Orice lucru care începe cu prefixul „ng” este cunoscut ca o directivă. „DemoApp” este numele dat aplicației noastre Angular.JS.
- Am creat o etichetă div și în această etichetă am adăugat o directivă ng-controller împreună cu numele controlerului nostru „DemoController”. Acest lucru face ca eticheta noastră div să poată accesa conținutul controlerului Demo. Trebuie să menționați numele controlerului conform directivei pentru a vă asigura că puteți accesa funcționalitatea definită în cadrul controlerului.
- Creăm o legare de model utilizând directiva ng-model. Ceea ce face acest lucru este că leagă caseta de text pentru ca Numele Tutorialului să fie legat de variabila membru „tutorialName”.
- Creăm o variabilă de membru numită „tutorialName” care va fi utilizată pentru a afișa informațiile pe care utilizatorul le introduce în caseta de text pentru Numele tutorialului.
- Creăm un modul care se va atașa la aplicația noastră DemoApp. Deci, acest modul devine acum parte a aplicației noastre.
- În modul, definim o funcție care atribuie o valoare implicită „AngularJS” variabilei noastre tutorialName.
Dacă comanda este executată cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Deoarece am atribuit variabilei tutorialName o valoare „Angular JS”, aceasta se afișează în caseta de text și în linia de text simplu.
Cum se definesc metodele în controler
În mod normal, s-ar dori să se definească mai multe metode în controler pentru a separa logica de afaceri.
De exemplu, să presupunem că dacă doriți ca controlerul dvs. să facă două lucruri de bază,
- Efectuați adunarea a 2 numere
- Efectuați scăderea a 2 numere
Apoi, ați crea în mod ideal 2 metode în interiorul controlerului, una pentru a efectua adăugarea și cealaltă pentru a efectua scăderea.
Să vedem un exemplu simplu despre cum puteți defini metode personalizate într-un controler Angular.JS. Controlerul va returna pur și simplu un șir.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Explicatie cod:
- Aici, tocmai definim o funcție care returnează un șir de „AngularJS”. Funcția este atașată obiectului scop prin intermediul unei variabile membre numită tutorialName.
- Dacă comanda este executată cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Utilizarea ng-controller în fișiere externe
Să vedem un exemplu de „HelloWorld” în care toate funcționalitățile au fost plasate într-un singur fișier. Acum este timpul să plasați codul pentru controler în fișiere separate.
Să urmăm pașii de mai jos pentru a face acest lucru.
Pasul 1) În fișierul app.js, adăugați următorul cod pentru controler
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
Codul de mai sus face următoarele lucruri,
- Definiți un modul numit „aplicație” care va ține controlerul împreună cu funcționalitatea controlerului.
- Creați un controler cu numele „HelloWorldCtrl”. Acest controler va fi folosit pentru a avea o funcționalitate pentru a afișa un mesaj „Hello World”.
- Obiectul scop este utilizat pentru a transmite informații de la controler la vizualizare. Deci, în cazul nostru, obiectul scop va fi folosit pentru a păstra o variabilă numită „mesaj”.
- Definim mesajul variabil și îi atribuim valoarea „Hello World”.
Pasul 2) Acum, în fișierul dvs. Sample.html adăugați o clasă div care va conține directiva ng-controller și apoi adăugați o referință la variabila membru „mesaj”
De asemenea, nu uitați să adăugați o referință la fișierul script app.js care are codul sursă pentru controlerul dvs.
Event Registration Guru99 Global Event
{{message}}
Dacă codul de mai sus este introdus corect, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
rezumat
- Responsabilitatea principală a controlorului este de a crea un obiect scop care, la rândul său, este trecut în vizualizare
- Cum se construiește un controler simplu folosind directivele ng-app, ng-controller și ng-model
- Cum se adaugă metode personalizate unui controler care poate fi utilizat pentru a separa diferite funcționalități în cadrul unui modul angularjs.
- Controlerele pot fi definite în fișiere externe pentru a separa acest strat de stratul Vizualizare. Aceasta este în mod normal o bună practică atunci când creați aplicații web.