Controlere AngularJS cu ng-Controller Exemplu

⚡ Rezumat inteligent

Un controler în AngularJS deține logica de business a unui ecran. Primește date prin obiectul scope, le procesează și expune rezultatul înapoi în vizualizare.ping marcaj de prezentare fără logică de aplicație.

🎯 Responsabilitate principală: Un controler populează obiectul scope și expune metodele view-ului; nu manipulează DOM-ul.
🔗 Cabluri: Directiva ng-controller leagă un controler numit de un element, oferind acelui element și copiilor săi acces la domeniul de aplicare al controlerului.
🔁 Legare bidirecțională: ng-model leagă un câmp de formular de o proprietate scope, astfel încât modificările din vizualizare actualizează controlerul și invers.
🧩 Metode: Funcțiile atașate domeniului de aplicare separă părți distincte de logică și pot fi apelate direct din expresiile de vizualizare.
🏷️ Sintaxă controllerAs: Aliasarea unui controler și legarea la this elimină ambiguitatea atunci când controlerele sunt imbricate unele în altele.
📁 Separare: Mutarea controlerelor într-un fișier app.js dedicat menține stratul de vizualizare independent de stratul logic.

Citește mai mult

Ce este controlerul în AngularJS?

A operator de date cu caracter personal, În AngularJS, se preiau datele din View, se procesează datele și apoi se trimit către view, care este afișată utilizatorului final. Controllerul deține logica de business principală. Acesta folosește modelul de date, efectuează procesarea necesară și apoi transmite rezultatul către view.

⚠️ Notă privind versiunea: AngularJS (ramura 1.x) a ajuns la sfârșitul perioadei de funcționare pe 31 decembrie 2021 și nu mai primește alte corecții de securitate. Conceptele de mai jos se aplică în continuare aplicațiilor vechi; în Angular modern, același rol este îndeplinit de o clasă de componente, mai degrabă decât de un controler.

Cunoașterea a ceea ce este un controller lasă deschisă o întrebare: cum comunică acesta de fapt cu vizualizarea. Următoarea secțiune răspunde la această întrebare.

Ce face un controller din perspectiva Angular

Mai jos este o definiție simplă a funcționării unui controller 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 și evenimentele de vizualizare pot apela funcții în domeniul de aplicare. Fragmentul de mai jos arată functie($scope) declarat cu controlerul plus o funcție internă care returnează $scope.firstName și $scope.lastName s-a alăturat. În AngularJS, o funcție definită ca variabilă este o metodă.

Datele trec de la controler la osciloscop, și apoi înainte și înapoi între osciloscop și vizualizare.
Domeniul de aplicare expune modelul în vizualizare. Modelul poate fi modificat prin metode definite în domeniul de aplicare, care sunt declanșate de evenimente din vizualizare.
Controlerele nu ar trebui folosite pentru manipularea DOM-ului. Aceasta este sarcina instrucțiuni.
Cea mai bună practică este să bazați controlerele pe funcționalitate. Dacă aveți un formular de intrare care necesită un controler, creați unul numit „controler de formular”.

Odată ce mecanismul este înțeles, următoarea secțiune construiește un controller dintr-o pagină goală.

Cum să construiți un controler de bază în AngularJS

Mai jos sunt pașii pentru a crea un controller în AngularJS.

Pasul 1) Creați o pagină HTML de bază

Înainte de a crea un controler, pagina HTML de bază trebuie să fie pregătită. Fragmentul de mai jos este o pagină simplă intitulată „Înregistrare evenimente” care face referire la Bootstrap și AngularJS.

Referiri la Bootstrap Foaie de stil CSS, utilizată împreună cu Bootstrap bibliotecă.
O referință la biblioteca AngularJS. Tot ce se va face cu AngularJS de acum înainte este rezolvat din acest fișier.
O referire la Bootstrap bibliotecă, care face ca anumite controale să fie receptive.

⚠️ Corecţie: jQuery încărcat inițial și a afirmat că AngularJS depinde de acesta. Nu depinde. AngularJS este livrat cu jqLite, un subset încorporat al API-ului jQuery și face upgrade la jQuery complet doar dacă jQuery se încarcă înainte Referința a fost eliminată.

Pasul 2) Verificați fișierele și structura fișierelor

Fișierele sunt împărțite în două foldere, ca în orice aplicație web convențională: „css” pentru foi de stil și „lib” pentru JavaScenariu fișiere.
Fișierul bootstrap.css se află în folderul css și oferă site-ului aspectul și funcționalitatea sa.
angular.js este biblioteca principală, descărcată de pe site-ul AngularJS și păstrată în lib.
app.js va conține codul pentru controlere.

Pasul 3) Utilizați codul AngularJS pentru a afișa rezultatul

Scopul aici este de a afișa cuvintele „AngularJS” atât ca text simplu, cât și într-o casetă de text atunci când pagina este deschisă în browser.

<!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 Explicaţie:

ng-app marchează acest element ca rădăcină a unei aplicații AngularJS. Atributele au prefixul ng- sunt directive încorporate. „DemoApp” este numele dat aplicației.
Diviziunea poartă ng-controller cu numele „DemoController”, care oferă elementului respectiv și tot ceea ce se află în interiorul său acces la domeniul de aplicare al controlerului.
ng-model creează legătura modelului, legând caseta de text Nume tutorial la proprietatea domeniu tutorialName.
Modulul DemoApp este creat, iar controlerul atribuie o valoare implicită de „AngularJS” tutorialName.

⚠️ Corecțiile au fost aplicate. Listarea inițială declarată chrset="UTF 8", care nu este nici un atribut valid, nici un nume de codificare valid, și a încărcat AngularJS de două ori — o dată din CDN și o dată din lib/angular.jsÎncărcarea bibliotecii de două ori reînregistrează modulul de sistem și produce un comportament imprevizibil. Adnotarea matricei de dependențe ['$scope', function($scope){…}] a fost adăugat și un cod, fără care controlerul se întrerupe în momentul în care fișierul este minificat.

ieșire:

pentru că tutorialName i s-a atribuit valoarea „AngularJS”, valoarea respectivă apare în caseta de text și în linia de text simplu. O singură proprietate este suficientă pentru o demonstrație; controlerele reale expun de obicei și comportamentul, lucru pe care îl tratează secțiunea următoare.

Cum să definiți metodele în controlerele AngularJS

În mod normal, s-ar defini mai multe metode într-un controler pentru a separa logica de business. Dacă controlerul ar trebui să adauge două numere și subtracPentru două numere, ați crea câte o metodă pentru fiecare operație.

Exemplul de mai jos definește o metodă personalizată în cadrul unui controler AngularJS care returnează un șir de caractere.

<!-- 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 Explicaţie:

O funcție este atașată obiectului de domeniu ca membru tNameReturnează valoarea curentă a tutorialName.
Vizualizarea apelează metoda cu {{tName()}}Parantezele contează: fără ele, expresia afișează funcția în sine, nu rezultatul acesteia.

⚠️ Corecţie: metoda originală citită $scope.tName = function() { return $scope.tName; };Funcția respectivă returnează ea însăși, nu numele tutorialului, așadar pagina a redat un corp al funcției în loc de text. Acum returnează $scope.tutorialName.

ieșire:

Până acum totul a stat într-un singur fișier. Aplicațiile de producție păstrează controlerele separate, lucru demonstrat în secțiunea următoare.

Controler AngularJS cu exemplu de controler ng

Exemplul „HelloWorld” de mai sus a plasat toate funcționalitățile într-un singur fișier. Acum este momentul să mutăm codul controlerului într-un fișier propriu.

Pas 1) În fișierul app.js, adăugați următorul cod pentru controlerul dvs.

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

Codul de mai sus face următoarele:

Definește un modul numit „app” care deține controlerul.
Creează un controler numit „HelloWorldCtrl” care afișează mesajul „Hello World”.
Folosește obiectul scope pentru a transmite informații de la controler la vizualizare, în acest caz o variabilă numită message.

Pas 2) În Sample.html, adăugați un div care conține directiva ng-controller și o referință la variabila membru. messageNu uitați să faceți referire la app.js, care conține codul sursă al controlerului.

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

⚠️ Corecţie: app.js trebuie încărcat după angular.js, deoarece apelează angular.moduleOriginalul a încărcat și biblioteca de două ori și a transportat același chrset greșeală de scriere.

ieșire:

Fiecare exemplu de până acum a citit și scris proprietăți direct pe $scopeSecțiunea de mai jos prezintă alternativa recomandată de echipa AngularJS.

Cum se utilizează sintaxa controllerAs în AngularJS

Legătură directă la $scope funcționează, dar devine ambiguu imediat ce controlerele sunt imbricate. O expresie de vizualizare, cum ar fi {{name}} nu oferă nicio idee despre cine deține controlorul nameși, deoarece domeniile de aplicare copil moștenesc prototipic de la domeniile de aplicare părinte, un controler imbricat care scrie într-o primitivă moștenită își creează în mod silențios propria copie umbră. controllerAs Sintaxa elimină ambele probleme prin atribuirea fiecărui controler un alias.

Pas 1) Aliasează controlerul din vizualizare folosind as cuvântul cheie, apoi adăugați prefixul fiecărei legături cu acel alias.

Pas 2) În interiorul controlerului, atașați proprietăți la this mai degrabă decât la $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>

Urmează trei câștiguri. Legăturile devin auto-documentate, deoarece demo.tutorialName își numește proprietarul. Controlerele imbricate nu mai intră în coliziune, deoarece un părinte are un alias outer și un copil cu alias inner pot ambele expune nameValorile se leagă și printr-un obiect, nu printr-o simplă primitivă, prin ocolire.ping capcana în care o editare la un copil nu ajunge niciodată la părinte.

👍 Sfat: Captura this într-o variabilă precum vm în partea de sus a controlerului. În interiorul unui apel invers, this se referă la cu totul altceva, iar referința capturată menține legarea corectă.

Alegerea unui stil de legare este o decizie. A decide ce anume aparține unui controller este o alta, iar comparația de mai jos trasează această linie.

Controler vs. Serviciu în AngularJS

Începătorii supraîncarcă frecvent controlerul cu sarcini care aparțin unui serviciu. Distincția constă în durata de viață și reutilizare: un controler există doar cât timp vizualizarea sa este pe ecran, în timp ce un serviciu este un singleton care trăiește pe durata de viață a aplicației.

Aspect	operator de date cu caracter personal,	Service
Toată viața	Creat și distrus odată cu vederea	O singură instanță pentru întreaga aplicație
Scop	Pregătirea datelor pentru o singură vizualizare	Logică partajată, stare și apeluri la server
Reutilizabile	Nu, legat de punctul său de vedere	Da, injectabil oriunde
Menține starea între vizualizări	Nu, starea se pierde în navigare	Da, statul persistă
Conținut tipic	Proprietăți de domeniu și metode de vizualizare	Apeluri HTTP, cache, reguli de business

Păstrați controllere subțiri. Dacă două controllere au nevoie de aceeași logică sau dacă o valoare trebuie să supraviețuiască navigării între vizualizări, mutați-o într-un serviciu și injectați acel serviciu acolo unde este nevoie. Un test practic este să întrebați dacă codul ar mai avea sens chiar și cu ecranul curent închis. Dacă răspunsul este da, acesta își are locul într-un serviciu.

Întrebări frecvente

Da. AngularJS creează o instanță separată și un domeniu de aplicare separat pentru fiecare element care poartă directiva. Instanțele nu au nicio stare comună, deci o modificare a uneia nu apare în cealaltă.

Declară-l în rută atunci când controlerul aparține unei view-uri complete încărcate de rutareFolosește ng-controller pentru o componentă care apare în interiorul unei pagini, indiferent de ruta curentă. Nu le declari niciodată pe amândouă, altfel controllerul va rula de două ori.

Folosește adnotarea matricei, listând numele dependențelor ca șiruri de caractere înaintea funcției. Minificatoarele redenumesc argumentele funcțiilor, dar niciodată literalii de tip șir de caractere, astfel încât injectorul rezolvă în continuare $scope și orice servicii corect.

Da. AI Asistenții produc legăturile modulului, controlerului și domeniului de aplicare dintr-o descriere simplă a ecranului. Verificați întotdeauna adnotarea dependenței, deoarece codul generat o omite adesea.

Instrumentele de inteligență artificială rescriu atribuirile de domenii de aplicare ca proprietăți pe o variabilă vm capturată și adaugă un prefix fiecărei legături de vizualizare corespunzătoare cu aliasul. Revvizualizați manual apelurile $watch și listenerele de evenimente, deoarece acestea necesită în continuare obiectul scope.

Controlere AngularJS cu ng-Controller Exemplu

Ce este controlerul în AngularJS?

Ce face un controller din perspectiva Angular

Cum să construiți un controler de bază în AngularJS

Cum să definiți metodele în controlerele AngularJS

Controler AngularJS cu exemplu de controler ng

Cum se utilizează sintaxa controllerAs în AngularJS

Controler vs. Serviciu în AngularJS

Întrebări frecvente

Rezumați această postare cu:

Înscrieți-vă la newsletter

Ce este controlerul în AngularJS?

Ce face un controller din perspectiva Angular

Cum să construiți un controler de bază în AngularJS

ARTICOLE SIMILARE

Cum să definiți metodele în controlerele AngularJS

Controler AngularJS cu exemplu de controler ng

Cum se utilizează sintaxa controllerAs în AngularJS

Controler vs. Serviciu în AngularJS

Întrebări frecvente

Rezumați această postare cu:

Înscrieți-vă la newsletter