AngularJS Hello World: Primul tău program exemplu

prin: James Hartman James Hartman
Hours Actualizat

⚡ Rezumat inteligent

Programele AngularJS Hello World au nevoie doar de un singur fișier HTML, o referință de script și două directive, ng-app și ng-controller, pentru a lega o variabilă de domeniu a controlerului în pagină printr-o expresie între acolade duble.

  • 🔘 aplicație ng: Atributul ng-app marchează elementul rădăcină și bootează automat modulul AngularJS denumit.
  • ☑️ controler ng: Funcția ng-controller atașează HelloWorldCtrl elementului h1, făcând domeniul de aplicare al controlerului disponibil acolo.
  • ✅ Legătură de domeniu: Atribuirea atributului $scope.message în cadrul controlerului alimentează expresia {{message}} redată în vizualizare.
  • 🧪 Fișier unic: Un fișier HTML plus o referință de script rulează exemplul, fără a fi necesar niciun pas de compilare.
  • 🛠️ Depanare: Aparatele dentare de pe ecran înseamnă aproape întotdeauna că biblioteca nu s-a încărcat niciodată sau că ng-app lipsește.
  • 📊 Notă privind versiunea: Suportul pentru AngularJS s-a încheiat în ianuarie 2022, versiunea finală fiind 1.8.3; lucrările noi aparțin Angular.
Citește mai mult

AngularJS Hello World primul exemplu de program folosind ng-app și ng-controller

Cea mai bună modalitate de a vedea puterea unei aplicații AngularJS este să creezi prima ta aplicație de bază, de tipul „Hello World”, în AngularJS.

Există multe medii de dezvoltare integrate pe care le puteți utiliza pentru AngularJS dezvoltare, unele dintre cele mai populare sunt menționate mai jos. În exemplul nostru, folosim Webstorm ca IDE-ul nostru.

  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. Visual Studio

Bună lume, AngularJS

Notă privind versiunea: AngularJS 1.x a părăsit perioada de suport pe termen lung pe 31 decembrie 2021, iar echipa de framework confirmă acest lucru. Suportul AngularJS s-a încheiat oficial în ianuarie 2022, cu versiunea finală 1.8.3 și fără patch-uri de securitate ulterioare. Fiecare pas și bloc de cod de mai jos este păstrat exact așa cum este scris. Proiectele noi aparțin Angular-ului modern, unde același exercițiu începe cu ng serve și o componentă independentă și încă folosește același {{ }} sintaxa de interpolare.

Exemplul de mai jos arată cel mai simplu mod de a crea prima aplicație „Hello world” în AngularJS.

Captura de ecran adnotată de mai jos etichetează fiecare parte a fișierului respectiv, iar cele șapte numere ale sale corespund cu Code Lista explicațiilor dedesubt. A fost capturată pentru o versiune anterioară 1.4.0, deci linia de script diferă de versiunea fixată în cod.

Fișier HTML AngularJS Hello World adnotat cu șapte apeluri numerotate pentru ng-app, ng-controller, referința scriptului și variabila de domeniu

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

Code Explicaţie:

  1. "ng-app„Cuvântul cheie” este folosit pentru a indica faptul că această aplicație ar trebui considerată o aplicație AngularJS. Această aplicație poate fi numită cu orice preț.
  2. Controlerul este cel folosit pentru a păstra logica de business. În eticheta h1, dorim să accesăm controlor, care va avea logica de a afișa „Hello World”, deci putem spune că, în această etichetă, dorim să accesăm controlerul numit „HelloWorldCtrl”.
  3. Folosim o variabilă membru numită „mesaj”, care nu este altceva decât un substituent pentru a afișa mesajul „Hello World”.
  4. „Eticheta script” este utilizată pentru a face referire la scriptul angular.js, care are toate funcționalitățile necesare pentru AngularJS. Fără această referință, dacă încercăm să folosim orice funcții AngularJS, acestea nu vor funcționa.
  5. „Controller” este locul în care creăm de fapt logica noastră de business, adică controllerul nostru. Specificitățile fiecărui cuvânt cheie vor fi explicate în capitolele următoare. Ceea ce este important de reținut este că definim o metodă de controller numită „HelloWorldCtrl”, la care facem referire în Pasul 2.
  6. Creăm o „funcție” care va fi apelată atunci când codul nostru apelează acest controller. Obiectul $scope este un obiect special în AngularJS, care este un obiect global utilizat în cadrul AngularJS. Obiectul $scope este utilizat pentru a gestiona datele dintre controller și vizualizare.
  7. Creăm o variabilă membru numită „mesaj”, îi atribuim valoarea „Salut, lume” și atașăm variabila membru obiectului de domeniu.

NOTĂ: Directiva ng-controller este un cuvânt cheie definit în AngularJS (Pasul 2) și este utilizat pentru a defini controlerele în aplicația dvs. Aici, în aplicația noastră, am folosit cuvântul cheie ng-controller pentru a defini un controler numit „HelloWorldCtrl”. Logica propriu-zisă pentru controler va fi creată în (Pasul 5).

Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.

ieșire:

Va fi afișat mesajul „Hello World”.

Fereastra browserului intitulată Guru99 randarea titlului Hello World din variabila de domeniu AngularJS

Cum se încarcă AngularJS: CDN sau fișier local

Exemplul de mai sus funcționează deoarece o singură linie introduce framework-ul în pagină înainte ca browserul să ajungă la sfârșitul corpului paginii. AngularJS este livrat ca o singură linie. JavaFișier script, deci un prim program nu necesită niciun pas de compilare și niciun manager de pachete. Un fișier HTML simplu deschis într-un browser este suficient.

Există două modalități de a aduce acel fișier.

  1. Faceți referință la o copie CDN. Exemplul indică code.angularjs.org și fixează versiunea 1.6.9. Gazda respectivă încă deservește versiuni 1.x, cea mai recentă fiind 1.8.2, în timp ce Google Bibliotecile găzduite nu mai listează AngularJS.
  2. Descărcați o copie locală. Salvați fișierul lângă pagina HTML și indicați eticheta scriptului spre acesta. O copie locală menține exemplul în funcțiune offline, ceea ce este important atunci când un proxy blochează CDN-ul.
<!-- Option 1: reference a CDN copy -->
<script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>

<!-- Option 2: reference a downloaded copy in the same folder -->
<script src="angular.min.js"></script>

Utilizare angular.js în timp ce învață și angular.min.js în producție: versiunea neminificată imprimă o stivă lizibilă traces, în timp ce versiunea minificată raportează variabile redenumite.

Odată ce fișierul este încărcat, ng-app pornește framework-ul. AngularJS caută acel atribut atunci când documentul se termină de încărcat, tratează elementul care îl conține ca rădăcină de compilare și bootează modulul numit în valoarea sa. Urmează trei consecințe:

  • Doar primul ng-app pe o pagină este bootat automat. Un al doilea este ignorat, cu excepția cazului în care angular.bootstrap este apelat manual.
  • Valoarea trebuie să denumească un modul înregistrat cu unghiular.modul, altfel consola raportează [$injector:modulerr].
  • plasare ng-app pe html elementul, așa cum se întâmplă în exemplu, aduce întregul document sub AngularJS; un container mai restrâns funcționează și el.

ARTICOLE SIMILARE

Cum funcționează expresiile {{ }} și legăturile ng-model

Bretelele duble din jur message din eticheta h1 nu sunt un substituent completat o singură dată la momentul încărcării. AngularJS compilează acel nod de text într-un observator pe mediul înconjurător domeniu, deci rezultatul redat tracks $scope.message atâta timp cât pagina există.

Ciclul se desfășoară în trei etape.

  1. Controlerul scrie o valoare pe $scope.
  2. O pasă de digest compară fiecare expresie urmărită cu rezultatul anterior.
  3. Fiecare expresie a cărei valoare s-a modificat este re-randată la locul ei.

Prin urmare, o expresie interpolată este unidirecțională, de la domeniul de aplicare la vizualizare. Legătura bidirecțională necesită ng-model, directivă conceput pentru controale de formular. Adăugați <input ng-model="message"> Lângă titlu, tastați în casetă, iar titlul se schimbă la fiecare apăsare de tastă, deoarece ng-model scrie valoarea câmpului înapoi pe aceeași proprietate de scop pe care o urmărește expresia.

Expresiile sunt limitate în mod deliberat. Acestea citesc proprietăți de domeniu, apelează metode de domeniu și tolerează valori nedefinite în mod silențios, însă nu pot declara variabile, nu pot utiliza instrucțiuni de control al fluxului sau nu pot accesa obiecte globale, cum ar fi window.

Cum să remediați o pagină goală sau nerandată {{ }}

Un prim program AngularJS eșuează într-unul din două moduri vizibile: pagina rămâne goală sau textul literal {{message}} apare unde ar trebui să fie „Hello World”. Ambele înseamnă că framework-ul nu a preluat niciodată markup-ul. Parcurgeți verificările de mai jos în ordine, cu consola browserului deschisă.

  1. Confirmați încărcarea bibliotecii. Deschideți panoul Rețea și căutați angular.js cerere. O eroare 404 sau o rețea CDN inaccesibilă lasă acoladele de pe ecran neatinse.
  2. Verificați calea scriptului. O cale relativă se rezolvă în raport cu folderul care conține fișierul HTML, deci o copie într-un js nevoile subfolderului js/angular.min.js.
  3. Verificați aplicația ng. Un atribut lipsă sau scris greșit nu înseamnă nimic în bootstraps. Atributul este cratimat ca ng-app în markup, chiar dacă directiva este încapsulată în camel-case JavaScenariul.
  4. Citește eroarea consolei. [$injector:modulerr] înseamnă că modulul numit de ng-app nu a fost niciodată înregistrat. [ng:areq] de obicei înseamnă că numele controlerului din markup nu se potrivește cu numele transmis către .controller().
  5. Caută o a doua aplicație ng. Doar prima este bootstrapped, așa că o copie rătăcită lăsată pe un element intern dezactivează în mod silențios acea parte a paginii.

Alte două cauze explică majoritatea rapoartelor rămase.

  • Protocolul fișierului. Acest exemplu cu un singur fișier rulează fără probleme atunci când este deschis direct de pe disc, dar orice șablon preluat prin XHR este blocat de regulile de origine ale browserului. Serviți folderul prin HTTP odată ce apar șabloanele.
  • O scurtă străfulgerare a aparatului dentar. Când markup-ul este redat înainte ca framework-ul să îl compileze, expresia brută este vizibilă pentru o clipă. Adăugați ng-cloak elementului sau schimbați expresia cu ng-bind="message", care nu afișează niciodată propriul markup.

Dacă niciuna dintre acestea nu se aplică, reduceți pagina la exemplul de mai sus și adăugați propriul cod înapoi, câte o linie pe rând.

Întrebări frecvente

Oricare dintre cele patru enumerate mai sus funcționează, iar acest exemplu folosește WebstormDeoarece programul este un singur fișier HTML static, un editor de text simplu este suficient. Un IDE adaugă doar completare a directivelor, reîncărcare live și depanare integrată.

$scope este obiectul de legătură partajat între un controlor și vizualizarea sa. Scrierea proprietății $scope.message în interiorul funcției HelloWorldCtrl face ca proprietatea respectivă să fie vizibilă pentru expresia plasată pe elementul h1.

Ambele fișiere conțin același framework. angular.js este neminificat, deci erorile indică o sursă lizibilă. angular.min.js este comprimat pentru producție și necesită adnotare explicită a dependențelor, deoarece minificarea redenumește numele parametrilor pe care AngularJS îi inspectează altfel.

AngularJS este framework-ul 1.x prezentat aici, condus de directive, $scope și plain. JavaScript. Angular, adică versiunea 2 și ulterioară, este un script separat TypeScript cadru construit pe componente și este linia întreținută activ.

În principal pentru întreținerea aplicațiilor 1.x existente, care rămân răspândite. Vocabularul de legături, directive și injecție de dependență transferuri, însă suportul s-a încheiat în ianuarie 2022, așa că proiectele noi aparțin Angular-ului modern.

Da. Înregistrează fiecare element cu .controller() pe același modul și atașează-le la elemente diferite folosind ng-controller. Fiecare primește propriul domeniu de aplicare copil, astfel încât proprietățile cu nume identice rămân independente.

Asistenții moderni citesc o bază de cod 1.x și produc un inventar de directive, filtre și servicii cu echivalente sugerate pentru componente și servicii. Acest inventar este util pentru scoping lucrarea, deși fiecare hartăping încă necesită verificare manuală.

Copilotul GitHub completează formularul standard al controlerului, atribuirile $scope și ng-submit handlere dintr-un comentariu scurt, dar antrenamentul său se îndreaptă spre Angular modern, așa că verificați dacă sugestiile folosesc într-adevăr sintaxa 1.x.

Rezumați această postare cu: