AngularJS își amintește valoare și o compară cu o valoare anterioară. Acest lucru este de bază murdare de verificare. Dacă există o schimbare în valoarea, apoi se trage schimbarea eveniment.

A $se aplică () metoda, care este ceea ce numim când trecerea de la un non-AngularJS lumea într-un AngularJS lume, apeluri$digest()`. Un digest este pur și simplu vechi murdar de verificare. Acesta funcționează pe toate browserele și este total previzibil.

Pentru contrast murdar-verificarea (AngularJS) vs schimba ascultători (KnockoutJS și Backbone.js): în Timp ce murdar-verificarea poate părea simplu, și chiar ineficiente (voi ocupa de asta mai târziu), se pare că acesta este semantic corect tot timpul, în timp ce schimba ascultătorii au o mulțime de colț ciudat de cazuri și au nevoie de lucruri cum ar fi dependența de urmărire pentru a face mai mult semantic corect. KnockoutJS dependență de urmărire este o caracteristică inteligent pentru o problemă care AngularJS nu au.

Probleme cu schimbarea de ascultatori:

• Sintaxa este atroce, deoarece browsere nu suporta nativ. Da, exista proxy-uri, dar acestea nu sunt semantic corect în toate cazurile, și, desigur, nu sunt proxy-uri pe browserele vechi. Linia de jos este că, murdar de verificare vă permite să face POJO, întrucât KnockoutJS și Backbone.js forța de a moșteni de la clasele lor, și acces la datele dumneavoastră prin intermediul evaluatorilor.
• Schimbarea de coalescență. Să presupunem că aveți o serie de elemente. Presupunem că doriți să adăugați elemente într-o matrice, ca tine sunt looping pentru a adăuga, de fiecare dată când adăugați tragi evenimente pe schimbare, care este de randare UI. Acest lucru este foarte rău pentru performanță. Ceea ce vrei este de a actualiza UI doar o singură dată, la sfârșitul anului. Schimbarea de evenimente sunt prea granulație fină.
• Schimbarea ascultători foc imediat pe un setter, care este o problemă, deoarece schimbarea ascultător poate se mai schimba datele, care trage mai multe evenimente de schimbare. Acest lucru este rău, deoarece pe stack-ul tău te poate schimba mai multe evenimente care se întâmplă la o dată. Să presupunem că aveți două tablouri, care trebuie să fie păstrate în sincronizare, indiferent de motiv. Puteți adăuga numai la unul sau altul, dar de fiecare dată când adăugați tragi o schimbare eveniment, care are acum o contradicție de vedere al lumii. Aceasta este o problemă similară la firul de blocare, care JavaScript evită deoarece fiecare apel invers execută exclusiv și la finalizare. Schimba evenimente pauza asta de setteri poate avea consecințe pe termen lung care nu sunt destinate și non evident, ceea ce creează firul problemă peste tot din nou. Se pare că ceea ce vrei să faci este de a întârzia ascultător de execuție și garanție, pe care numai un ascultător ruleaza la un moment dat, prin urmare, orice cod este gratuit pentru a modifica datele, și știe că nici un alt cod se execută în timp ce face acest lucru.

Ce despre performanta?

Așa s-ar părea că suntem de lent, deoarece murdar-verificarea este ineficient. Acest lucru este în cazul în care avem nevoie să se uite la numere reale, mai degrabă decât doar argumente teoretice, dar mai întâi să's a defini unele constrângeri.

Oamenii sunt:

• Lent — Ceva mai repede decât 50 ms este imperceptibil pentru oameni și, astfel, pot fi considerate ca "instant".

• Limitat — puteți't într-adevăr arată mai mult decât aproximativ 2000 de bucăți de informații de la un om de pe o singură pagină. Nimic mai mult decât că este foarte rău UI, și oamenii pot't procesul de asta, oricum.

Deci întrebarea este: câte comparații se poate face pe un browser în 50 ms? Aceasta este o întrebare grea pentru a răspunde cât mai mulți factori intră în joc, dar aici este un caz-test: http://jsperf.com/angularjs-digest/6 care creează 10.000 de privitori. Pe un browser modern, aceasta durează sub 6 ms. Pe Internet Explorer 8 este nevoie de aproximativ 40 ms. După cum puteți vedea, aceasta nu este o problemă chiar și pe lent browsere aceste zile. Există un avertisment: comparații trebuie să fie simplu să se încadreze în limita de timp... din Pacate este mult prea ușor să adăugați un lent în comparație AngularJS, astfel încât este ușor de a construi lent aplicații atunci când aveți don't știu ce faci. Dar sperăm să avem un răspuns prin furnizarea de o instrumentație modul, care ar arăta care sunt lente comparații.

Se pare că jocurile video si Gpu folosi murdar-verificarea abordare, în special pentru că este consistent. Atâta timp cât ei a lua de-a lungul rata de reîmprospătare a monitorului (de obicei 50-60 Hz, sau fiecare 16.6-20 ms), orice performanță de peste, care este o pierdere, deci're mai bine de desen de mai multe lucruri, decât să FPS mai mare.

Misko-a dat deja o excelentă descriere a modului în care datele legături de lucru, dar aș dori să adaug punctul meu de vedere privind problema de performanță cu datele obligatorii.

Ca Misko, a declarat, în jur de 2000 de legături sunt în cazul în care veți începe să vedeți probleme, dar nu ar trebui't au mai mult de 2000 de bucăți de informații pe o pagină oricum. Acest lucru poate fi adevărat, dar nu toate datele obligatorii este vizibil pentru utilizator. Odată ce ați începe construirea orice fel de widget sau rețea de date cu două-mod obligatoriu puteți ușor hit 2000 legături, fără a fi nevoie de un rău UX.

Luați în considerare, de exemplu, o casetă combo în cazul în care puteți introduce text pentru a filtra opțiunile disponibile. Acest tip de control ar putea avea ~150 de articole și încă a fi extrem de utila. Dacă ea are unele caracteristici suplimentare (de exemplu un anumit clasa selectată opțiunea) de a începe pentru a obține 3-5 legaturi pe opțiune. Pune trei dintre aceste widget-uri pe o pagină (de exemplu, pentru a selecta o țară, celălalt pentru a selecta un oraș în țară, și cel de-al treilea pentru a selecta un hotel) și sunt undeva între 1000 și 2000 de legaturi deja.

Sau ia în considerare o date-grilă într-un corporate aplicație web. 50 de rânduri pe pagină nu este nerezonabil, fiecare dintre care ar putea fi de 10-20 de coloane. Dacă vă construi cu ng-repetă, și/sau au informații în unele celule care utilizează unele legaturi, ai putea fi apropie de 2000 de legături cu rețeaua asta singur.

Am găsit acest lucru să fie un mare problemă atunci când se lucrează cu AngularJS, și singura soluție pe care am'am fost în stare să găsească până acum este de a construi widget-uri fără a utiliza două-mod obligatoriu, în loc de a folosi ngOnce, anularea înregistrării observatorilor și trucuri similare, sau pentru a construi directivele care construiesc DOM cu jQuery și manipulare DOM. Eu simt acest lucru învinge în scopul de a utiliza Unghiulare în primul rând.

Mi-ar plăcea să aud sugestii cu privire la alte modalități de a se ocupe de acest lucru, dar atunci poate ar trebui să scriu și eu o întrebare. Am vrut să pun asta într-un comentariu, dar s-a dovedit a fi prea mult pentru asta...

TL;DR
Datele obligatorii poate provoca probleme de performanță pe pagini complexe.

De murdar verificarea $domeniul de aplicare obiect

Unghiulare menține un simplu "matrice" de observatori în $domeniul de aplicare obiecte. Dacă vă controlați orice $domeniul de aplicare, veți găsi că acesta conține o "matrice" numit `$$observatorilor.

Fiecare observator este un "obiect" care conține, printre alte lucruri

1. O expresie care observatorul este monitorizarea. Acest lucru ar putea fi doar un "atribut" numele, sau ceva mai complicat.
2. O ultima valoare cunoscută de exprimare. Acest lucru poate fi verificat împotriva curentului calculat valoarea expresiei. Dacă valorile diferă observatorul va declanșa funcția și marca $domeniul de aplicare la fel de murdar.
3. O funcție care va fi executată în cazul în care observatorul este murdar.

Cum observatorii sunt definite

Există multe moduri diferite de a defini un observator în AngularJS.

• Puteți explicit $uit " un "atribut" pe " $domeniul de aplicare.

$domeniul de aplicare.$watch('persoană.numele de utilizator', validateUnique);

• Puteți plasa o {{}} interpolare în șablon (un observator va fi creat pentru tine la curent $domeniul de aplicare).

nume de utilizator: {{persoana.numele de utilizator}}

• Puteți cere o directivă, cum ar fi ng-model pentru a defini observator pentru tine.

De `$digera ciclu de controale toți observatorii împotriva lor ultima valoare

Atunci când interacționăm cu AngularJS prin canalele normale (ng-model, ng-repeat, etc) un rezumat ciclu va fi declanșată de către directivă.

O digera ciclu este un adâncime-prima traversare a `$domeniul de aplicare și toți copiii săi. Pentru fiecare $domeniul de aplicare "obiect", vom repeta peste $$observatorilor "matrice" și să evalueze toate expresiile. Dacă expresia nouă valoare este diferită de ultima valoare cunoscută, observatorul's funcția este numit. Această funcție ar putea să recompilați parte din DOM, recalculează valoarea pe$domeniul de aplicare, de a declanșa oAJAX` "cerere", ceva trebuie să facă.

Fiecare domeniu este traversată și de fiecare ceas expresie evaluate și verificate în raport cu ultima valoare.

Dacă un observator este declanșată, `$domeniul de aplicare este murdar

Dacă un observator este activată, aplicația știe ceva s-a schimbat, și $domeniul de aplicare este marcat la fel de murdar.

Observator funcții pot schimba alte atribute pe $domeniul de aplicare sau pe un părinte$domeniul de aplicare. Dacă o$watcherfuncția a fost declanșat, putem't garanta că alte$domeniul de aplicare sunt mai curate, și așa vom executa întreaga digera ciclul din nou.

Acest lucru este pentru că AngularJS a două-mod obligatoriu, astfel încât datele pot fi transmise înapoi până la $domeniul de aplicare de copac. Putem modifica o valoare mai mare$domeniul de aplicare, care a fost deja digerate. Poate ne-am schimba o valoare pe $rootScope.

Dacă $digest este murdar, executăm întreaga `$digera ciclu din nou

Noi continuu bucla prin $digera ciclu până când ciclul digest vine curat (toate$uit expresii au aceeași valoare ca le-au avut în ciclul anterior), sau vom ajunge la digera limita. În mod implicit, această limită este stabilită la 10.

Dacă vom ajunge la digera limita AngularJS va ridica o eroare in consola:

10 $digest() iterations reached. Aborting!

Digest este greu pe masina, dar ușor pe producător

După cum puteți vedea, de fiecare dată când se schimbă ceva într-un AngularJS app, AngularJS va verifica de fiecare observator în `$domeniul de aplicare ierarhie pentru a vedea cum să răspundă. Pentru un dezvoltator de acest lucru este o mare productivitate avantaj, ca tu ai acum nevoie pentru a scrie aproape nici cabluri cod, AngularJS va observa dacă o valoare a schimbat, și de a face restul de aplicație în concordanță cu schimbarea.

Din perspectiva mașină, deși acest lucru este extrem de ineficientă și va încetini aplicația noastră dacă vom crea prea multe observatorii. Misko a citat o cifră de circa 4000 de observatori, înainte de aplicația dumneavoastră se va simți lent pe browsere mai vechi.

Această limită este ușor de a ajunge dacă ng-repeat peste o mareJSON` "matrice" de exemplu. Puteți atenua împotriva acest lucru, folosind caracteristici cum ar fi un timp obligatoriu pentru a compila un șablon, fără a crea observatorii.

Cum pentru a evita crearea de prea multe watchers

De fiecare dată când utilizatorul interacționează cu aplicația dvs., de fiecare observator în aplicația dvs. va fi evaluat cel puțin o dată. O mare parte din optimizarea unui AngularJS aplicație este reducerea numărului de observatori în `$domeniul de aplicare de copac. O modalitate ușoară de a face acest lucru este cu un timp obligatoriu.

Dacă aveți date care rareori va schimba, puteți lega doar o singură dată folosind :: sintaxa, astfel:

<p>{{::person.username}}</p>

sau

<p ng-bind="::person.username"></p>

Obligatoriu va fi declanșate numai atunci când conțin șablonul este redat și datele încărcate în $domeniul de aplicare.

Acest lucru este important mai ales atunci când aveți o `ng-repeat cu multe elemente.

<div ng-repeat="person in people track by username">
  {{::person.username}}
</div>

Acest lucru este meu înțelegere de bază. Acesta poate fi greșit!

1. Elementele sunt privit prin care trece o funcție (revenind lucru să fie privit) a $uit metoda.
2. Modificări la privit elementele trebuie să fie făcut într-un bloc de cod înfășurat de `$se aplică metoda.
3. La sfârșitul anilor se aplică $ a $digere metodă este invocată în care merge prin fiecare dintre ceasuri și controale pentru a vedea dacă s-au schimbat de când ultima dată$digere și a fugit.
4. Dacă orice modificări sunt prezente, atunci digest este invocat din nou, până când toate modificările se stabilizeze.

În dezvoltarea normală, date obligatorii sintaxă în HTML spune AngularJS compiler pentru a crea ceasuri pentru tine și controler metode sunt conduse în interiorul `$se aplică deja. Deci, pentru a dezvoltator de aplicații totul este transparent.

M-am întrebat acest lucru pentru mine o vreme. Fără setteri cum AngularJS preaviz de modificări la$domeniul de aplicare` obiect? Nu-poll-le?

Ce face de fapt este aceasta: Orice "normale" loc de a modifica modelul a fost deja numit de curajul de AngularJS, așa că apelează automat $se aplică pentru tine după codul se execută. Spune-ți controller are o metodă care's-a cuplat cung-faceți clic pe un element. Pentru AngularJSfirele de asteptare de această metodă împreună pentru tine, ea are o șansă de a face o$se aplică în locul potrivit. De asemenea, pentru expresii care apar în vedere, acestea sunt executate de către AngularJS asa se face $se aplică.

Atunci când documentația vorbește despre a fi nevoie să apelați $se aplică manual pentru cod _outside de AngularJS_, - l's vorbind despre codul care, atunci când a alerga, nu't stem din AngularJS în sine în stiva de apeluri.

Explica cu Poze :

Date-Obligatoriu are nevoie de o mapare

De referință în domeniul de aplicare nu este exact de referință în șablon. Atunci când datele de-a lega două obiecte, ai nevoie de un al treilea care să asculte mai întâi și de a modifica celelalte.

Aici, atunci când modificați <input>, atingeți date-ref3. Și clasic date-bind mecanism se va schimba date-ref4. Așa cum alte `{{date}} expresii va muta ?

Evenimente duce la $digest()

Unghiulare menține o oldValue " și " newValue de fiecare obligatorii. Și după fiecare Unghiulară eveniment, celebrul $digest() bucla va verifica lista de pagini Urmărite pentru a vedea dacă ceva s-a schimbat. Aceste Unghiulară evenimente sunt ng-click, ng-schimba, $http terminat ... $digest() va bucla atât timp cât orice oldValue diferă de la newValue.

În imaginea anterioară, se va observa că datele-ref1 și date-ref2-au schimbat.

Concluzii

L's un pic ca un albuș de Ou și carne de Pui. Nu știi niciodată cine începe, dar sperăm că aceasta funcționează în majoritatea timpului cum era de așteptat.

Un alt punct este că puteți înțelege cu ușurință impactul profund de un simplu caracter obligatoriu pentru memorie și CPU. Sperăm că Desktop-uri sunt suficient de grăsime să se ocupe de acest lucru. Telefoanele Mobile nu sunt atât de puternică.

Evident, nu există nici o verificare periodică a "domeniul de Aplicare" dacă există vreo schimbare în Obiecte atașat la acesta. Nu toate obiectele atașat la domeniul de aplicare sunt privit . Domeniul de aplicare prototypically menține o $$watchers . "Domeniul de aplicare" doar reiterează prin acest $$watchers "când" $digest este numit .

Unghiulare adaugă un observator la $$watchers pentru fiecare dintre aceste

1. {{expresie}} — In template-uri (și oriunde altundeva în cazul în care există o expresie) sau atunci când definim ng-model.
   
2. $domeniul de aplicare.$watch('expresie/function') — În JavaScript putem atașa un domeniu de aplicare obiect pentru unghiulare pentru a viziona.

atenție funcția are trei parametri:

1. Primul este un observator funcție care returnează un obiect sau putem adăuga doar o expresie.
   

2. A doua este o funcție de ascultător care va fi numit atunci când există o schimbare în obiect. Toate lucrurile ca DOM modificări vor fi puse în aplicare în această funcție.
   

3. Cel de-al treilea fiind un parametru opțional care are într-un boolean . Dacă e adevărat , unghiulare adânc ceasuri obiect & daca sale false Unghiulare face doar o trimitere uitam pe obiect. Dur punerea în Aplicare a $ceasul arata ca acest lucru

Scope.prototype.$watch = function(watchFn, listenerFn) {
   var watcher = {
       watchFn: watchFn,
       listenerFn: listenerFn || function() { },
       last: initWatchVal  // initWatchVal is typically undefined
   };
   this.$$watchers.push(watcher); // pushing the Watcher Object to Watchers  
};

Există un lucru interesant în Unghiulare numite Digera Ciclu. A $a digera ciclu începe, ca urmare a unui apel la $domeniul de aplicare.$digest(). Să presupunem că vă schimbați o $domeniul de aplicare de model într-o funcție handler prin ng-click directivă. În acest caz, AngularJS declanșează automat un ciclu $digera prin apelarea $digest().În plus față de ng-click, există mai multe alte built-in directivele/servicii care vă permit să schimbați modele (de exemplu, ng-model, $expirare, etc) și de a declanșa automat un ciclu $digera. Dur punerea în aplicare a $digest arata ca acest lucru.

Scope.prototype.$digest = function() {
      var dirty;
      do {
          dirty = this.$$digestOnce();
      } while (dirty);
}
Scope.prototype.$$digestOnce = function() {
   var self = this;
   var newValue, oldValue, dirty;
   _.forEach(this.$$watchers, function(watcher) {
          newValue = watcher.watchFn(self);
          oldValue = watcher.last;   // It just remembers the last value for dirty checking
          if (newValue !== oldValue) { //Dirty checking of References 
   // For Deep checking the object , code of Value     
   // based checking of Object should be implemented here
             watcher.last = newValue;
             watcher.listenerFn(newValue,
                  (oldValue === initWatchVal ? newValue : oldValue),
                   self);
          dirty = true;
          }
     });
   return dirty;
 };

Dacă vom folosi JavaScript setTimeout() funcție pentru a actualiza un domeniu de aplicare model, Unghiulare nu are cum să știe ce s-ar putea schimba. În acest caz, este responsabilitatea noastră să chem $se aplică (a) manual, care declanșează un ciclu $digera. În mod similar, dacă aveți o directivă care instituie un DOM ascultător eveniment și modifică unele modele în funcție handler, aveți nevoie pentru a apela se aplică $() pentru a asigura modificările să aibă efect. Ideea se aplică $e care o putem executa un cod pe care nu - 't conștient Unghiulare, acest cod poate încă schimba lucrurile în domeniul de aplicare. Dacă vom încheia acest cod în $a aplica , va avea grijă de asteptare $digest(). Dur punerea în aplicare a $se aplică().

Scope.prototype.$apply = function(expr) {
       try {
         return this.$eval(expr); //Evaluating code in the context of Scope
       } finally {
         this.$digest();
       }
};

AngularJS se ocupe de date-mecanism obligatoriu cu ajutorul a trei funcții puternice : [$uit()][1],[$digest()][2]și [$se aplică()][3]. Cele mai multe din timpul AngularJS va chema $domeniul de aplicare.$watch() și $domeniul de aplicare.$digest(), dar în unele cazuri, ați putea avea pentru a apela aceste funcții manual pentru a actualiza cu noile valori.

$uit() :-

Această funcție este utilizată pentru a observa schimbări într-o variabilă pe $domeniul de aplicare. Se acceptă trei parametri: expresie, ascultător și egalitatea obiect, în cazul în care ascultătorul și egalitatea obiect sunt parametri opționali.

$digest() -

Această funcție reiterează prin toate ceasurile în $domeniul de aplicare obiect, și copilul său $domeniul de aplicare de obiecte (dacă este cazul). Când $digest() reiterează peste ceasuri, se verifică dacă valoarea expresiei a s-a schimbat. În cazul în care valoarea s-a schimbat, AngularJS solicită ascultătorul cu noua valoare și vechea valoare. A $digest() funcția este numit ori de câte ori AngularJS crede că este necesar. De exemplu, după un buton faceți clic pe, sau după un apel AJAX. Este posibil să aveți unele cazuri în AngularJS nu sun $digest() funcție pentru tine. În acest caz trebuie să suna-l singur.

se aplică $() -

Unghiulară face auto-magic actualizări doar acele modificări care sunt interior AngularJS context. Atunci când faci o schimbare în orice model in afara de Unghiulară de context (cum ar fi browser-ul DOM evenimente, setTimeout, XHR sau a treia biblioteci de partid), atunci ai nevoie pentru a informa Unghiulare de modificările de apel se aplică $() manual. Atunci când se aplică $() funcția de apel finisaje AngularJS apeluri $digest() pe plan intern, astfel încât toate datele sunt legaturi actualizat.

[1]: https://docs.angularjs.org/api/ng/type/$rootScope.Domeniul de aplicare#$uit [2]: https://docs.angularjs.org/api/ng/type/$rootScope.Domeniul de aplicare#$digest [3]: https://docs.angularjs.org/api/ng/type/$rootScope.Domeniul de aplicare#$se aplică

S-a întâmplat că am nevoie pentru a lega un model de date de o persoană cu o formă, ceea ce am făcut a fost o mapare directă a datelor cu forma.

De exemplu, dacă modelul a avut ceva de genul:

$scope.model.people.name

Controlul de intrare de forma:

<input type="text" name="namePeople" model="model.people.name">

În acest fel, dacă modificați valoarea obiectului controller, acest lucru se va reflecta automat în vedere.

Un exemplu în care am trecut de la modelul este actualizat de la serverul de date este atunci când vă întreb pentru un cod poștal și codul poștal bazat pe scris încarcă o listă de colonii și orașe asociat cu acest punct de vedere, și, implicit, a stabilit prima valoare cu utilizatorul. Și asta am lucrat foarte bine, ceea ce nu se întâmplă, este că angularJS uneori durează câteva secunde pentru a actualiza modelul, pentru a face acest lucru, puteți pune un spinner în timp ce afișarea datelor.

1. -Un fel de date cu caracter obligatoriu este o abordare în cazul în care o valoare este preluată din modelul de date și introdus într-un element HTML. Nu există nici o modalitate de a actualiza modelul de vedere. Acesta este utilizat în șablon clasic sisteme. Aceste sisteme se lega de date într-o singură direcție.

2. Date obligatorii în Unghiulare aplicații este sincronizarea automată a datelor între model și view componente.

Datele obligatorii care vă permite să trateze modelul ca sursă unică-de-adevăr în aplicare. Punctul de vedere este o proiecție a modelului la toate ori. Dacă modelul este schimbat, vedere reflectă modificarea și vice-versa.

Aici este un exemplu de date cu caracter obligatoriu cu AngularJS, folosind un câmp de intrare. Voi explica mai târziu

Cod HTML

<div ng-app="myApp" ng-controller="myCtrl" class="formInput">
     <input type="text" ng-model="watchInput" Placeholder="type something"/>
     <p>{{watchInput}}</p> 
</div>

AngularJS Cod

myApp = angular.module ("myApp", []);
myApp.controller("myCtrl", ["$scope", function($scope){
  //Your Controller code goes here
}]);

După cum puteți vedea în exemplul de mai sus, AngularJS foloseste ng-model de a asculta și de ceas ceea ce se întâmplă pe elemente HTML, mai ales pe "intrare" câmpuri. Atunci când se întâmplă ceva, să fac ceva. În cazul nostru,ng-modele lega la punctul nostru de vedere, folosind mustață notație{{}}`. Tot ce este tastat în câmpul de introducere este afișat pe ecran instantaneu. Și că's frumusetea de date cu caracter obligatoriu, folosind AngularJS în forma sa cea mai simplă.

Sper că acest lucru vă ajută.

Vezi un exemplu de lucru pe aici Codepen

AngularJs acceptă Două căi de date obligatorii. Înseamnă că puteți accesa date View -> Controler & Controler -> View

Ex.

1)

// If $scope have some value in Controller. 
$scope.name = "Peter";

// HTML
<div> {{ name }} </div>

O/P

Peter

Puteți lega date în `ng-model, Cum ar fi:- 2)

<input ng-model="name" />

<div> {{ name }} </div>

Aici, în exemplul de mai sus, orice intrare de utilizator va da, Acesta va fi vizibil în `

    Name 
   <input ng-model="name" />

$scope.name = {};

$scope.registration = function() {
   console.log("You will get the name here ", $scope.name);
};