AngularJS Hello World: Az első példaprogramod

By: James Hartman James Hartman
Hours korszerűsített

⚡ Okos összefoglaló

Az AngularJS Hello World programoknak mindössze egyetlen HTML fájlra, egy szkripthivatkozásra és két direktívára, az ng-app-ra és az ng-controller-re van szükségük ahhoz, hogy egy vezérlő hatókör-változóját egy dupla zárójeles kifejezésen keresztül az oldalhoz kössék.

  • 🔘 ng-alkalmazás: Az ng-app attribútum megjelöli a gyökérelemet, és automatikusan elindítja a megnevezett AngularJS modult.
  • ☑️ ng-vezérlő: Az ng-controller a HelloWorldCtrl-t a h1 elemhez csatolja, így a vezérlő hatóköre elérhetővé válik ott.
  • ✅ Hatókör-kötés: A vezérlőn belüli $scope.message hozzárendelése a nézetben megjelenített {{message}} kifejezést adja vissza.
  • 🧪 Egyetlen fájl: Egy HTML fájl és egy szkripthivatkozás futtatja a példát, építési lépés nélkül.
  • 🇧🇷 Hibaelhárítás: A képernyőn megjelenő zárójelek szinte mindig azt jelentik, hogy a könyvtár soha nem töltött be, vagy hiányzik az ng-app.
  • 📊 Verzió megjegyzés: Az AngularJS támogatása 2022 januárjában véget ért, az 1.8.3-as verzióval jelent meg a végleges verzió; az új munkák az Angularban találhatók.
További információk

Az AngularJS Hello World első példaprogramja ng-app és ng-controller használatával

Az AngularJS alkalmazások erejét úgy láthatod a legjobban, ha elkészíted az első alapvető programodat, a „Hello World” alkalmazást AngularJS-ben.

Számos integrált fejlesztői környezet létezik, amelyeket használhatsz AngularJS fejlesztés, néhány népszerűt az alábbiakban említünk. Példánkban a következőt használjuk: Webstorm mint a mi IDE-nk.

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

Helló világ, AngularJS

Verzió megjegyzés: Az AngularJS 1.x 2021. december 31-én kilépett a hosszú távú támogatásból, és a keretrendszer csapata megerősítette ezt. Az AngularJS támogatása hivatalosan megszűnt 2022 januárjában, az 1.8.3-as végleges kiadással, és utána nem voltak biztonsági javítások. Minden lépés és kódblokk pontosan úgy marad meg, ahogyan meg van írva. Az új projektek a modern Angularban találhatók, ahol ugyanaz a gyakorlat a következővel kezdődik: ng serve és egy önálló komponens és még mindig ugyanazt használja {{ }} interpolációs szintaxis.

Az alábbi példa bemutatja az első „Hello world” alkalmazás létrehozásának legegyszerűbb módját az AngularJS-ben.

Az alábbi, jegyzetekkel ellátott képernyőképen a fájl minden egyes része fel van címkézve, és a hét szám megegyezik a fájllal. Code Magyarázó lista alább. Egy korábbi 1.4.0-s verzióhoz készült, így a szkript sora eltér a kódban rögzített verziótól.

Annotált AngularJS Hello World HTML fájl hét számozott hivatkozással az ng-app, ng-controller, a szkripthivatkozás és a scope változó számára

<!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 Magyarázat:

  1. Azng-appA „” kulcsszó azt jelzi, hogy ezt az alkalmazást AngularJS alkalmazásnak kell tekinteni. Bármilyen nevet adhatunk neki.
  2. A vezérlő az üzleti logika tárolására szolgál. A h1 tagben a következőket szeretnénk elérni: ellenőr, amelynek logikája a „Hello World” megjelenítésére szolgál, tehát azt mondhatjuk, hogy ebben a címkében a „HelloWorldCtrl” nevű vezérlőt szeretnénk elérni.
  3. Egy „message” nevű tagváltozót használunk, amely nem más, mint egy helyőrző a „Hello World” üzenet megjelenítéséhez.
  4. A „script tag” az angular.js szkriptre hivatkozik, amely az AngularJS összes szükséges funkciójával rendelkezik. E hivatkozás nélkül, ha megpróbálunk bármilyen AngularJS függvényt használni, az nem fog működni.
  5. A „vezérlő” az a hely, ahol valójában az üzleti logikánkat, azaz a vezérlőnket hozzuk létre. Az egyes kulcsszavak részleteit a következő fejezetekben ismertetjük. Fontos megjegyezni, hogy egy „HelloWorldCtrl” nevű vezérlőmetódust definiálunk, amelyre a 2. lépésben hivatkozunk.
  6. Létrehozunk egy „függvényt”, amelyet akkor fogunk meghívni, amikor a kódunk meghívja ezt a vezérlőt. A $scope objektum egy speciális objektum az AngularJS-ben, amely egy globális objektum, amelyet az AngularJS-en belül használnak. A $scope objektum a vezérlő és a nézet közötti adatok kezelésére szolgál.
  7. Létrehozunk egy „message” nevű tagváltozót, hozzárendeljük a „Hello World” értéket, és a tagváltozót a scope objektumhoz csatoljuk.

JEGYZET: Az ng-controller direktíva egy kulcsszó, amely a következőben van definiálva AngularJS (2. lépés) és az alkalmazásban vezérlők definiálására szolgál. Itt az alkalmazásunkban az ng-controller kulcsszót használtuk egy 'HelloWorldCtrl' nevű vezérlő definiálásához. A vezérlő tényleges logikája az (5. lépés)-ben jön létre.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

Megjelenik a „Hello World” üzenet.

Böngészőablak címe Guru99 a Hello World címsor renderelése az AngularJS hatókörváltozóból

AngularJS betöltése: CDN vagy helyi fájl

A fenti példa azért működik, mert egyetlen sor húzza be a keretrendszert az oldalba, mielőtt a böngésző elérné a törzs végét. Az AngularJS egyetlen sorként érkezik. JavaSzkriptfájl, így egy első programhoz nincs szükség fordítási lépésre és csomagkezelőre. Egy böngészőben megnyitott sima HTML fájl elegendő.

Kétféleképpen lehet behozni a fájlt.

  1. Hivatkozzon egy CDN-példányra. A példa arra mutat, code.angularjs.org és az 1.6.9-es verziót pineli. Ez a gép továbbra is kiszolgálja az 1.x buildeket, a legmagasabb az 1.8.2, míg Google A Hosted Libraries már nem listázza az AngularJS-t.
  2. Tölts le egy helyi másolatot. Mentsd el a fájlt a HTML-oldal mellé, és irányítsd rá a szkriptcímkét. Egy helyi másolat offline is működteti a példát, ami akkor fontos, ha egy proxy blokkolja a CDN-t.
<!-- 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>

Felhasználás angular.js tanulás közben és angular.min.js éles környezetben: a minimálatlan build olvasható veremként nyomtat traces, míg a miniatűr build jelentések átnevezték a változókat.

Miután a fájl betöltődik, ng-app elindítja a keretrendszert. Az AngularJS ezt az attribútumot keresi, amikor a dokumentum befejezte a betöltést, az azt tartalmazó elemet fordítási gyökérként kezeli, és elindítja az értékében megnevezett modult. Három következmény következik:

  • Csak az első ng-app egy oldalon automatikusan bootstrappel történik. Egy másodikat figyelmen kívül hagy a rendszer, kivéve, ha angular.bootstrap manuálisan hívják.
  • Az értéknek egy regisztrált modult kell megneveznie angular.module, egyébként a konzol jelentései [$injector:modulerr].
  • forgalomba ng-app a html elem, ahogy a példa is teszi, az egész dokumentumot AngularJS alá vonja; egy szűkebb konténer is működik.

KAPCSOLÓDÓ CIKKEK

Hogyan működnek a {{ }} kifejezések és az ng-modell kötés

A dupla fogszabályozó körül message a h1 tagben nem helyőrzők, amelyeket egyszer töltenek ki betöltéskor. Az AngularJS ezt a szövegcsomópontot egy figyelővé fordítja a környező csomóponton. hatálya, így a renderelt kimenet tracks $scope.message amíg az oldal él.

A ciklus három lépésben fut.

  1. A vezérlő értéket ír be $scope.
  2. Egy kivonatoló művelet minden megfigyelt kifejezést összehasonlít az előző eredményével.
  3. Minden olyan kifejezés, amelynek értéke megváltozott, újra megjelenik a helyén.

Egy interpolált kifejezés tehát egyirányú, a hatókörből a nézetbe. Kétirányú kötésre van szükség. ng-modell, a Irányelv űrlapvezérlőkhöz tervezve. Hozzáadás <input ng-model="message"> A címsor melletti mezőbe írj be valamit, és a címsor minden billentyűleütésre megváltozik, mivel az ng-model a mező értékét visszaírja ugyanarra a hatókör tulajdonságra, amelyet a kifejezés figyel.

A kifejezések szándékosan korlátozottak. Hatókör-tulajdonságokat olvasnak, hatókör-metódusokat hívnak meg és csendben tolerálják a nem definiált értékeket, de nem deklarálhatnak változókat, nem használhatnak vezérlőfolyamat-utasításokat vagy nem érhetnek el globális objektumokat, például window.

Üres oldal vagy nem renderelt {{ }} hiba javítása

Egy első AngularJS program két látható módon hibásodhat meg: az oldal üres marad, vagy a literál szövege {{message}} megjelenik ott, ahol a Hello World-nek kellene lennie. Mindkettő azt jelenti, hogy a keretrendszer soha nem vette át a jelölőnyelvet. Nyissa meg a böngésző konzolját, és végezze el sorban az alábbi ellenőrzéseket.

  1. Erősítse meg a könyvtár betöltését. Nyissa meg a Hálózat panelt, és keresse meg a angular.js kérés. Egy 404-es hiba vagy egy elérhetetlen CDN érintetlenül hagyja a képernyőn megjelenő fogszabályozót.
  2. Ellenőrizd a szkript elérési útját. A relatív elérési út a HTML-fájlt tartalmazó mappához viszonyítva oldódik fel, tehát egy másolat egy js almappák igényei js/angular.min.js.
  3. Ellenőrizze az ng-app-ot. Egy hiányzó vagy elgépelt attribútum semmit sem jelent bootstraps rendszerben. Az attribútum kötőjellel van elválasztva, mint ng-app a jelölésben, annak ellenére, hogy az irányelv teve alakúra van húzva JavaForgatókönyv.
  4. Olvasd el a konzolhibát. [$injector:modulerr] azt jelenti, hogy az ng-app által megnevezett modul soha nem volt regisztrálva. [ng:areq] általában azt jelenti, hogy a vezérlő neve a kódban nem egyezik meg a felhasználónak átadott névvel. .controller().
  5. Keress egy második ng-appot. Csak az első bootstrappeléssel történik, így egy belső elemen hagyott kóbor másolat csendben letiltja az oldal ezen részét.

A fennmaradó jelentések nagy részét további két ok magyarázza.

  • A fájlprotokoll. Ez az egyfájlos példa jól fut, ha közvetlenül a lemezről nyitjuk meg, de az XHR-en keresztül lekért sablonokat a böngésző eredetszabályai blokkolják. A mappa HTTP-n keresztüli kiszolgálása a sablonok megjelenése után.
  • Egy rövid villanás a fogszabályozóról. Amikor a jelölés a keretrendszer lefordítása előtt megjelenik, a nyers kifejezés egy pillanatra látható. ng-cloak az elemhez, vagy cserélje ki a kifejezést erre: ng-bind="message", amely soha nem jeleníti meg a saját jelölőkódját.

Ha ezek egyike sem alkalmazható, akkor egyszerűsítsd az oldalt a fenti példára, és soronként add hozzá a saját kódodat.

GYIK

A fent felsorolt ​​négy közül bármelyik működik, és ez a példa a következőt használja: WebstormMivel a program egyetlen statikus HTML fájl, egy sima szövegszerkesztő elegendő. Egy IDE csak direktíva-kiegészítést, élő újratöltést és integrált hibakeresést ad hozzá.

A $scope a binding objektum, amelyet egy ellenőr és a nézete. A HelloWorldCtrl-en belüli $scope.message leírás láthatóvá teszi ezt a tulajdonságot a h1 elemen elhelyezett kifejezés számára.

Mindkét fájl ugyanazt a keretrendszert tartalmazza. Az angular.js nincs minifikálva, így a hibák az olvasható forrásra mutatnak. Az angular.min.js éles környezetben tömörítve van, és explicit függőségi annotációt igényel, mivel a minifikáció átnevezi az AngularJS által egyébként vizsgált paraméterek nevét.

Az AngularJS az itt látható 1.x keretrendszer, amelyet direktívák, $scope és plain vezérel. JavaSzkript. Az Angular, azaz a 2-es és újabb verziók, egy különálló TypeScript komponensekre épülő keretrendszer, és ez az aktívan karbantartott vonal.

Főként a meglévő 1.x alkalmazások karbantartására szolgál, amelyek továbbra is széles körben elterjedtek. A kötések, direktívák és függőségi injekció átvitelek, de a támogatás 2022 januárjában megszűnt, így az új projektek a modern Angularban kapnak helyet.

Igen. Regisztráld mindegyiket a .controller() függvénnyel ugyanazon a modulon, és csatold őket különböző elemekhez az ng-controller használatával. Mindegyik megkapja a saját gyermek hatókörét, így az azonos nevű tulajdonságok függetlenek maradnak.

A modern asszisztensek egy 1.x kódbázist olvasnak, és létrehoznak egy leltárt az irányelvekről, szűrőkről és szolgáltatásokról, valamint a javasolt komponens- és szolgáltatás-ekvivalensekről. Ez a leltár hasznos az sco számára.ping a munka, bár minden térképping még mindig manuális ellenőrzésre van szükség.

GitHub másodpilóta befejezi a vezérlő sablonbeosztását, a hatókör-hozzárendeléseket és ng-submit kezelőket egy rövid megjegyzésből, de a betanítása a modern Angular felé torzul, ezért ellenőrizd, hogy a javaslatok valóban 1.x szintaxist használnak-e.

Foglald össze ezt a bejegyzést a következőképpen: