Controlere AngularJS cu ng-Controller Exemplu
James Hartman
Ce este controlerul în AngularJS?
A operator de date cu caracter personal, în AngularJS preia datele din vizualizare, procesează datele și apoi trimite acele date către vizualizarea care este afișată utilizatorului final. Controlorul va avea logica dvs. de afaceri de bază. Controlorul va folosi modelul de date, va efectua prelucrarea necesară și apoi va transmite rezultatul în vizualizarea care, la rândul său, este afișată utilizatorului final.
Ce face controlerul din perspectiva lui Angular?
Mai jos este o definiție simplă a funcționării controlerului AngularJS:
- Responsabilitatea principală a operatorului este de a controla datele care sunt transmise vizualizării. Scopul și vederea au o comunicare bidirecțională.
- Proprietățile vizualizării pot numi „funcții” pe domeniu. Mai mult, evenimentele de pe vedere pot numi „metode” pe domeniu. Fragmentul de cod de mai jos oferă un exemplu simplu de funcție.
- functie($scope) care este definit la definirea controlerului și o funcție internă care este utilizată pentru a returna concatenarea $scope.firstName și $scope.lastName.
- In AngularJS, când definiți o funcție ca variabilă, aceasta este cunoscută ca o Metodă.
- Datele în acest fel trec de la controlor la scope, iar apoi datele trec înainte și înapoi de la scope la vizualizare.
- Scopul este utilizat pentru a expune modelul la vedere. Modelul poate fi modificat prin metode definite în domeniul de aplicare care ar putea fi declanșate prin intermediul evenimentelor din vizualizare. Putem defini legarea modelului bidirecțional de la sfera de aplicare la model.
- În mod ideal, controlerele nu ar trebui folosite 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 controlere bazate pe funcționalitate. 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 formulare”.
Cum să construiți un controler de bază în AngularJS
Mai jos sunt pașii pentru a crea un controler în AngularJS:
Pasul 1) Creați o pagină HTML de bază
Înainte de a începe cu crearea unui controler, trebuie să avem mai întâi configurarea de bază a paginii HTML.
Fragmentul de cod de mai jos este o pagină HTML simplă, care are titlul „Înregistrare eveniment” și are referințe la biblioteci importante, cum ar fi Bootstrap, jquery și Angular.
- Adăugăm referințe la foile de stil CSS bootstrap, care vor fi folosite împreună cu bibliotecile bootstrap.
- Adăugăm referințe la bibliotecile angularjs. Deci, orice vom face cu angular.js în continuare va fi referit 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 folosite pentru manipularea DOM. Acest lucru este cerut de Angular deoarece unele dintre funcționalitățile din Angular depind de această bibliotecă.
Î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 ulterioare.
Pasul 2) Verificați fișierele și structura fișierelor
În al doilea rând, să ne uităm la fișierele și structura fișierelor cu care vom începe pe durata cursului nostru.
- Mai întâi ne separăm fișierele î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ă și apoi vom avea folderul nostru „lib” care va avea toate JavaScenariu fișiere.
- 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 folosit pentru a suplimenta fișierul bootstrap.cs pentru a adăuga funcționalitate bootstrap la aplicația noastră web.
- Fișierul jquery va fi folosit pentru a adăuga funcționalitate de manipulare DOM pe site-ul nostru.
Pasul 3) Utilizați codul AngularJS pentru a afișa rezultatul
Ceea ce vrem să facem aici este doar să afișam cuvintele „AngularJS” atât în format text, cât și într-o casetă de text atunci când pagina este vizualizată în browser. Să vedem un exemplu despre cum să folosiți angular.js pentru a face acest lucru:
<!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>
Explicația codului:
- ng-app cuvântul cheie este folosit pentru a indica faptul că această aplicație ar trebui considerată ca o aplicație unghiulară. Orice începe cu prefixul 'ng' este cunoscut sub numele de 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ă aibă posibilitatea de a accesa conținutul Controllerului Demo. Trebuie să menționați numele controlorului în cadrul directivei pentru a vă asigura că puteți accesa funcționalitatea definită în controler.
- Creăm o legătură de model folosind directiva ng-model. Acest lucru face este că leagă caseta de text pentru Tutorial Name să fie legată de variabila membru „tutorialName”.
- Creăm o variabilă membru numită „tutorialName” care va fi folosită pentru a afișa informațiile pe care utilizatorul le introduce în caseta de text pentru Tutorial Name.
- Creăm un modul care se va atașa aplicației noastre 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ă atunci când rulați codul în browser.
ieșire:
Deoarece am atribuit variabilei tutorialName o valoare „Angular JS”, aceasta este afișată în caseta de text și în linia de text simplu.
Cum să definiți metodele în controlerele AngularJS
În mod normal, ar dori să definiți 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
Atunci, în mod ideal, ați crea 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.
<!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>
Explicația codului:
- Aici, definim doar o funcție care returnează un șir de „AngularJS”. Funcția este atașată obiectului scope printr-o variabilă membru numită tutorialName.
- Dacă comanda este executată cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.
ieșire:
Controler AngularJS cu exemplu de controler ng
Să ne uităm la 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:
Pas 1) În fișierul app.js, adăugați următorul cod pentru controlerul dvs
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 către vizualizare. Deci, în cazul nostru, obiectul scope va fi folosit pentru a menține o variabilă numită „mesaj”.
- Definim mesajul variabil și îi atribuim valoarea „Hello World”.
Pas 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 de script app.js care are codul sursă pentru controlerul dvs.
<!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>
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 de domeniu care, la rândul său, este transmis vizualizării
- Cum să construiți un controler simplu folosind directivele ng-app, ng-controller și ng-model
- Cum să adăugați metode personalizate la un controler care pot fi folosite pentru a separa diferite funcționalități într-un modul angularjs.
- Controlerele pot fi definite în fișiere externe pentru a separa acest strat de stratul Vizualizare. Aceasta este în mod normal cea mai bună practică atunci când creați aplicații web.
