AngularJS Tere maailm: Sinu esimene näidisprogramm

Autor: James Hartman James Hartman
Hours Ajakohastatud

⚡ Nutikas kokkuvõte

AngularJS Hello World programmid vajavad kontrolleri ulatusmuutuja lehega sidumiseks kahekordse sulgudes avaldise abil ainult ühte HTML-faili, ühte skriptiviidet ja kahte direktiivi, ng-app ja ng-controller.

  • 🔘 ng-rakendus: Atribuut ng-app tähistab juurelementi ja käivitab nimega AngularJS mooduli automaatselt.
  • ☑️ ng-kontroller: ng-controller lisab HelloWorldCtrl elemendi h1 külge, muutes kontrolleri ulatuse seal kättesaadavaks.
  • ✅ Ulatuse sidumine: Kontrolleri sees $scope.message omistamine annab vaates renderdatud avaldisele {{message}} toidet.
  • 🧪 Üksikfail: Näidet käitab üks HTML-fail pluss üks skriptiviide, ilma et oleks vaja ühtegi ehitusetappi.
  • 🛠️ Probleemid: Ekraanil olevad sulgud tähendavad peaaegu alati, et teeki pole laaditud või ng-app puudub.
  • 📊 Versiooni märkus: AngularJS tugi lõppes jaanuaris 2022, kui ilmus viimane versioon 1.8.3; uus töö kuulub Angularile.
Loe rohkem

AngularJS Hello World esimene näidisprogramm, mis kasutab ng-app ja ng-kontrollerit

Parim viis AngularJS-i rakenduse võimsuse nägemiseks on luua oma esimene põhiprogramm nimega „Hello World“ AngularJS-is.

Saadaval on palju integreeritud arenduskeskkondi, mille jaoks saate kasutada AngularJS arenduses on mõned populaarsed neist mainitud allpool. Meie näites kasutame Webstorm kui meie IDE.

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

Tere maailm, AngularJS

Versiooni märkus: AngularJS 1.x lahkus pikaajalisest toest 31. detsembril 2021 ja raamistiku meeskond kinnitab seda AngularJS tugi ametlikult lõppenud jaanuaris 2022, versiooniga 1.8.3 ja pärast seda ei ole turvaparandusi. Iga allolev samm ja koodiplokk säilib täpselt nii, nagu see on kirjutatud. Uued projektid kuuluvad tänapäevasesse Angularisse, kus sama harjutus algab ng serve ja eraldiseisev komponent ja kasutab ikka sama {{ }} interpolatsiooni süntaks.

Allolev näide näitab lihtsaimat viisi oma esimese „Tere maailm” rakenduse loomiseks AngularJS-is.

Allolev kommenteeritud ekraanipilt märgistab iga selle faili osa ja selle seitse numbrit vastavad Code Selgituste loend allpool. See jäädvustati varasema 1.4.0 järgu põhjal, seega erineb selle skriptirida koodis olevast versioonist.

Annoteeritud AngularJS Hello World HTML-fail seitsme nummerdatud viiktekstiga ng-rakenduse, ng-kontrolleri, skripti viite ja ulatusmuutuja jaoks

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

  1. "ng-rakendusMärksõna „” tähistab, et seda rakendust tuleks käsitleda AngularJS-i rakendusena. Sellele rakendusele võib anda mis tahes nime.
  2. Kontrollerit kasutatakse äriloogika hoidmiseks. H1-sildis tahame juurde pääseda kontroller, millel on loogika kuvada „Hello World“, seega võime öelda, et selle sildiga tahame juurde pääseda kontrollerile nimega „HelloWorldCtrl“.
  3. Me kasutame liikmemuutujat nimega "message", mis pole muud kui kohatäide "Tere maailm" sõnumi kuvamiseks.
  4. „Script Tag” viitab angular.js skriptile, millel on kõik AngularJS-i jaoks vajalikud funktsioonid. Ilma selle viiteta ei tööta AngularJS-i funktsioonide kasutamine.
  5. „Kontroller“ on koht, kus me tegelikult loome oma äriloogikat ehk kontrollerit. Iga märksõna üksikasju selgitatakse järgmistes peatükkides. Oluline on märkida, et me defineerime kontrolleri meetodit nimega „HelloWorldCtrl“, millele viidatakse 2. etapis.
  6. Me loome „funktsiooni“, mida kutsutakse välja, kui meie kood kutsub seda kontrollerit. $scope objekt on AngularJS-is spetsiaalne objekt, mis on AngularJS-is kasutatav globaalne objekt. $scope objekti kasutatakse andmete haldamiseks kontrolleri ja vaate vahel.
  7. Loome liikmesmuutuja nimega „sõnum“, määrame sellele väärtuse „Tere, maailm“ ja lisame liikmesmuutuja ulatusobjektile.

MÄRKUSED: ng-kontrolleri direktiiv on märksõna, mis on määratletud keeles AngularJS (2. samm) ja seda kasutatakse teie rakenduses kontrollerite määratlemiseks. Meie rakenduses oleme kasutanud märksõna ng-controller kontrolleri nimega 'HelloWorldCtrl' määratlemiseks. Kontrolleri tegelik loogika luuakse (5. samm).

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

Kuvatakse teade "Tere maailm".

Brauseriaken pealkirjaga Guru99 renderdab pealkirja „Tere, maailm” AngularJS-i ulatusmuutujast

AngularJS-i laadimine: CDN või kohalik fail

Ülaltoodud näide töötab, kuna üks rida tõmbab raamistiku lehele enne, kui brauser jõuab sisu lõppu. AngularJS tarnitakse ühe reana. JavaSkriptifail, seega esimese programmi jaoks pole vaja ehitusetappi ega paketihaldurit. Piisab brauseris avatud tavalisest HTML-failist.

Selle faili sissetoomiseks on kaks võimalust.

  1. Viidake CDN-i koopiale. Näide osutab code.angularjs.org ja pinnid versioonile 1.6.9. See host pakub endiselt 1.x järke, millest kõrgeim on 1.8.2, samas kui Google Majutatud teegid ei loetle enam AngularJS-i.
  2. Laadige alla kohalik koopia. Salvesta fail HTML-lehe kõrvale ja suuna skriptimärgendiga sellele. Kohalik koopia hoiab näite võrguühenduseta töötamas, mis on oluline, kui puhverserver blokeerib CDN-i.
<!-- 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>

Kasutama angular.js õppimise ajal ja angular.min.js tootmises: minimeerimata versioon prindib loetava pinu traces, samas kui minimeeritud ehitusaruanded nimetasid muutujad ümber.

Kui fail on laetud, ng-app käivitab raamistiku. AngularJS otsib seda atribuuti pärast dokumendi laadimise lõppu, käsitleb seda sisaldavat elementi kompileerimise juurelemendina ja käivitab selle väärtuses nimetatud mooduli. Sellest tulenevad kolm tagajärge:

  • Ainult esimene ng-app Lehel olev käsk käivitatakse automaatselt. Teist käsku ignoreeritakse, kui angular.bootstrap kutsutakse käsitsi.
  • Väärtus peab nimetama moodulit, mis on registreeritud nurgeline.moodul, vastasel juhul annab konsool teada [$injector:modulerr].
  • paigutamine ng-app kohta html element, nagu näites, toob kogu dokumendi AngularJS-i alla; kitsam konteiner sobib ka.

SEOTUD ARTIKLID

Kuidas {{ }} avaldised ja ng-mudeli sidumine toimivad

Topeltklambrid ümber message h1 sildis olevad kohatäidet ei täideta laadimise ajal üks kord. AngularJS kompileerib selle tekstisõlme ümbritseva jälgijaks. ulatus, seega renderdatud väljund tracks $scope.message nii kaua kui leht elab.

Tsükkel toimub kolmes etapis.

  1. Kontroller kirjutab väärtuse $scope.
  2. Kokkuvõttev läbivaatus võrdleb iga vaadeldud avaldist selle eelmise tulemusega.
  3. Iga avaldis, mille väärtus muutus, renderdatakse uuesti oma kohal.

Seega on interpoleeritud avaldis ühesuunaline, ulatuse ja vaate vahel. Vajab kahesuunalist sidumist. ng-mudel, Direktiivi loodud vormide juhtelementide jaoks. Lisa <input ng-model="message"> Tippige pealkirja kõrval olevasse kasti ja pealkiri muutub iga klahvivajutusega, sest ng-model kirjutab väljaväärtuse tagasi samasse ulatusomadusse, mida avaldis jälgib.

Avaldised on tahtlikult piiratud. Nad loevad ulatuse omadusi, kutsuvad välja ulatuse meetodeid ja taluvad vaikselt määratlemata väärtusi, kuid nad ei saa deklareerida muutujaid, kasutada juhtimisvoo lauseid ega jõuda globaalsete objektideni, näiteks window.

Kuidas parandada tühja lehekülge või renderdamata {{ }}

Esimene AngularJS programm ebaõnnestub kahel nähtaval viisil: leht jääb tühjaks või sõnasõnaline tekst {{message}} ilmub sinna, kus peaks olema Hello World. Mõlemad tähendavad, et raamistik ei võtnud kunagi märgistust üle. Töötage allolevad kontrollid järjekorras läbi, brauseri konsool avatud.

  1. Kinnitage, et teek on laaditud. Avage võrgupaneel ja otsige üles angular.js päring. 404 või kättesaamatu CDN jätab ekraanil olevad breketid puutumata.
  2. Kontrollige skripti teed. Suhteline tee viitab HTML-faili sisaldavale kaustale, seega koopia js alamkausta vajadused js/angular.min.js.
  3. Kinnitage ng-rakendus. Puuduv või valesti kirjutatud atribuut ei tähenda alglaadimise ajal midagi. Atribuut on sidekriipsuga eraldatud kujul ng-app märgistuses, isegi kui direktiiv on kaamelikujuliselt ümber ehitatud JavaSkript.
  4. Loe konsooli viga. [$injector:modulerr] tähendab, et ng-app-i nimetatud moodulit pole kunagi registreeritud. [ng:areq] tähendab tavaliselt, et kontrolleri nimi märgistuses ei vasta nimele, mis edastati .controller().
  5. Otsi teine ​​ng-rakendus. Ainult esimene on alglaadimise teel loodud, seega sisemisele elemendile jäetud hulkuv koopia keelab selle lehe osa vaikselt.

Enamiku ülejäänud teadete taga on veel kaks põhjust.

  • Failiprotokoll. See ühe faili näide töötab otse kettalt avades hästi, kuid brauseri päritolureeglid blokeerivad kõik XHR-i kaudu laetud mallid. Esitage kausta HTTP kaudu, kui mallid ilmuvad.
  • Breketite lühike välgatus. Kui märgistus renderdatakse enne raamistiku kompileerimist, on toores avaldis hetkeks nähtav. Lisa ng-cloak elemendile või vaheta avaldis selle vastu ng-bind="message", mis ei kuva kunagi omaenda märgistust.

Kui ükski neist ei sobi, siis taanda leht ülaltoodud näitele ja lisa oma kood ridahaaval tagasi.

KKK

Kõik neli ülaltoodud varianti toimivad ja see näide kasutab WebstormKuna programm on üks staatiline HTML-fail, piisab lihttekstiredaktorist. IDE lisab ainult direktiivide täitmise, reaalajas uuesti laadimise ja integreeritud silumise.

$scope on siduv objekt, mida jagatakse kontroller ja selle vaade. $scope.message kirjutamine HelloWorldCtrl sees muudab selle omaduse h1 elemendi avaldisele nähtavaks.

Mõlemad failid sisaldavad sama raamistikku. angular.js on minimeerimata, seega vead osutavad loetavale lähtekoodile. angular.min.js on tootmiseks tihendatud ja vajab selget sõltuvuse annotatsiooni, kuna minimeerimine nimetab ümber parameetrite nimed, mida AngularJS muidu kontrollib.

AngularJS on siin näidatud 1.x raamistik, mida juhivad direktiivid, $scope ja plain JavaSkript. Angular, mis tähendab versiooni 2 ja uuemaid, on eraldi TypeScript komponentidele ehitatud raamistik ja aktiivselt hooldatav liin.

Peamiselt olemasolevate 1.x rakenduste haldamiseks, mis on endiselt laialt levinud. Sidumiste, direktiivide ja sõltuvussüst ülekanded, kuid tugi lõppes 2022. aasta jaanuaris, seega kuuluvad uued projektid tänapäevasesse Angularisse.

Jah. Registreeri igaüks .controller() abil samal moodulil ja ühenda need ng-controlleri abil erinevate elementidega. Igaüks saab oma lapse ulatuse, seega jäävad identselt nimetatud omadused sõltumatuks.

Kaasaegsed assistendid loevad 1.x koodibaasi ja loovad direktiivide, filtrite ja teenuste inventuuri koos soovitatud komponentide ja teenuste ekvivalentidega. See inventuur on kasulik sco jaoks.ping töö, kuigi iga kaartping vajab ikka käsitsi kinnitamist.

GitHubi koopia koostab kontrolleri standardvormi, $ulatusülesanded ja ng-submit käitlejad lühikesest kommentaarist, kuid selle treenimine kaldub tänapäevase Angulari poole, seega kontrollige, kas soovitused kasutavad tõesti 1.x süntaksit.

Võta see postitus kokku järgmiselt: