AngularJS Hello World: Vaš prvi primjer programa

By: James Hartman James Hartman
Hours Ažurirano

⚡ Pametni sažetak

AngularJS Hello World programi trebaju samo jednu HTML datoteku, jednu referencu skripte i dvije direktive, ng-app i ng-controller, za povezivanje varijable opsega kontrolera sa stranicom putem izraza s dvostrukom zagradom.

  • 🔘 ng-aplikacija: Atribut ng-app označava korijenski element i automatski pokreće imenovani AngularJS modul.
  • ☑️ ng-kontroler: ng-controller pridružuje HelloWorldCtrl elementu h1, čineći opseg kontrolera tamo dostupnim.
  • ✅ Povezivanje opsega: Dodjeljivanje $scope.message unutar kontrolera dovodi do izraza {{message}} prikazanog u pogledu.
  • 🧪 Jedna datoteka: Jedna HTML datoteka plus jedna referenca skripte pokreće primjer, bez potrebnog koraka izgradnje.
  • 🛠️ Rješavanje problema: Doslovne zagrade na ekranu gotovo uvijek znače da se biblioteka nikada nije učitavala ili da ng-app nedostaje.
  • 📊 Napomena o verziji: Podrška za AngularJS završila je u siječnju 2022., s verzijom 1.8.3 kao konačnim izdanjem; novi rad pripada Angularu.
Pročitaj više

AngularJS Hello World prvi primjer programa koji koristi ng-app i ng-controller

Najbolji način da vidite snagu AngularJS aplikacije je da napravite svoju prvu osnovnu aplikaciju "Hello World" u AngularJS-u.

Postoji mnogo integriranih razvojnih okruženja koja možete koristiti za AngularJS razvoj, neki od popularnih navedeni su u nastavku. U našem primjeru koristimo Webstorm kao naš IDE.

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

Pozdrav svijetu, AngularJS

Napomena o verziji: AngularJS 1.x je prestao biti dostupan za dugoročnu podršku 31. prosinca 2021., a tim za framework potvrđuje da Podrška za AngularJS je službeno završena u siječnju 2022., s verzijom 1.8.3 kao konačnim izdanjem i bez sigurnosnih zakrpa nakon njega. Svaki korak i blok koda u nastavku sačuvan je točno onako kako je napisan. Novi projekti pripadaju modernom Angularu, gdje ista vježba počinje s ng serve i samostalna komponenta i još uvijek koristi isto {{ }} sintaksa interpolacije.

Primjer u nastavku prikazuje najlakši način za stvaranje vaše prve aplikacije “Hello world” u AngularJS-u.

Snimka zaslona s bilješkama u nastavku označava svaki dio te datoteke, a njezinih sedam brojeva odgovara Code Popis objašnjenja ispod. Snimljeno je u odnosu na raniju verziju 1.4.0, tako da se njegov redak skripte razlikuje od verzije prikvačene u kodu.

Anotirana AngularJS Hello World HTML datoteka sa sedam numeriranih poziva za ng-app, ng-controller, referencu skripte i varijablu opsega

<!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 Objašnjenje:

  1. "ng-aplikacijaKljučna riječ ” koristi se za označavanje da se ova aplikacija treba smatrati AngularJS aplikacijom. Ovoj aplikaciji može se dati bilo koje ime.
  2. Kontroler je ono što se koristi za pohranu poslovne logike. U h1 oznaci želimo pristupiti kontrolor, što će imati logiku za prikaz „Hello World“, pa možemo reći da u ovoj oznaci želimo pristupiti kontroleru pod nazivom „HelloWorldCtrl“.
  3. Koristimo varijablu člana pod nazivom "message" koja nije ništa drugo nego rezervirano mjesto za prikaz poruke "Hello World".
  4. Oznaka „script“ koristi se za referenciranje angular.js skripte koja ima sve potrebne funkcionalnosti za AngularJS. Bez ove reference, ako pokušamo koristiti bilo koju AngularJS funkciju, ona neće raditi.
  5. „Kontroler“ je mjesto gdje zapravo stvaramo našu poslovnu logiku, a to je naš kontroler. Specifičnosti svake ključne riječi bit će objašnjene u sljedećim poglavljima. Važno je napomenuti da definiramo metodu kontrolera pod nazivom 'HelloWorldCtrl' na koju se referira u 2. koraku.
  6. Izrađujemo „funkciju“ koja će se pozvati kada naš kod pozove ovaj kontroler. Objekt $scope je poseban objekt u AngularJS-u, globalni objekt koji se koristi unutar AngularJS-a. Objekt $scope se koristi za upravljanje podacima između kontrolera i prikaza.
  7. Stvaramo varijablu članicu pod nazivom "poruka", dodjeljujemo joj vrijednost "Pozdrav svijete" i pridružujemo varijablu članicu objektu opsega.

BILJEŠKA: Direktiva ng-controller je ključna riječ definirana u AngularJS (Korak 2) i koristi se za definiranje kontrolera u vašoj aplikaciji. Ovdje u našoj aplikaciji koristili smo ključnu riječ ng-controller za definiranje kontrolera pod nazivom 'HelloWorldCtrl'. Stvarna logika za kontroler bit će kreirana u (Korak 5).

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz:

Prikazat će se poruka 'Hello World'.

Prozor preglednika pod nazivom Guru99 renderiranje naslova Hello World iz varijable opsega AngularJS-a

Kako učitati AngularJS: CDN ili lokalnu datoteku

Gornji primjer funkcionira jer jedna linija uvlači okvir u stranicu prije nego što preglednik dođe do kraja tijela. AngularJS se isporučuje kao jedan JavaSkriptna datoteka, tako da prvi program ne treba korak izgradnje niti upravitelj paketa. Dovoljna je obična HTML datoteka otvorena u pregledniku.

Postoje dva načina za unos te datoteke.

  1. Referencirajte CDN kopiju. Primjer ukazuje na code.angularjs.org i priključuje verziju 1.6.9. Taj host i dalje poslužuje 1.x verzije, a najviša je 1.8.2, dok Google Hostane biblioteke više ne navode AngularJS.
  2. Preuzmite lokalnu kopiju. Spremite datoteku pored HTML stranice i usmjerite oznaku skripte na nju. Lokalna kopija omogućuje da primjer radi izvan mreže, što je važno kada proxy blokira CDN.
<!-- 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>

Koristiti angular.js dok učim i angular.min.js u produkciji: neminificirana verzija ispisuje čitljiv stog traces, dok minificirana verzija izvještava o preimenovanim varijablama.

Nakon što se datoteka učita, ng-app pokreće framework. AngularJS traži taj atribut kada se dokument učitava, tretira element koji ga nosi kao korijen kompilacije i pokreće modul naveden u njegovoj vrijednosti. Slijede tri posljedice:

  • Samo prvi ng-app na stranici se automatski pokreće. Drugi se zanemaruje osim ako angular.bootstrap poziva se ručno.
  • Vrijednost mora imenovati modul registriran s kutni.modul, inače konzola izvještava [$injector:modulerr].
  • smještanje ng-app na html Element, kao što to čini primjer, smješta cijeli dokument pod AngularJS; uži kontejner također funkcionira.

POVEZANI ČLANCI

Kako funkcioniraju {{ }} izrazi i ng-model vezanje

Dvostruke zagrade okolo message u h1 oznaci nisu rezervirano mjesto koje se popunjava jednom prilikom učitavanja. AngularJS kompajlira taj tekstualni čvor u promatrač na okolnom djelokrug, pa renderirani izlaz tracks $scope.message dok god stranica živi.

Ciklus se odvija u tri koraka.

  1. Kontroler zapisuje vrijednost na $scope.
  2. Sažetak uspoređuje svaki promatrani izraz s njegovim prethodnim rezultatom.
  3. Svaki izraz čija se vrijednost promijenila ponovno se prikazuje na mjestu.

Interpolirani izraz je stoga jednosmjeran, od opsega do prikaza. Dvosmjerno povezivanje zahtijeva ng-model je Direktiva dizajnirano za kontrole obrasca. Dodaj <input ng-model="message"> Pored naslova upišite u okvir, a naslov će se mijenjati svakim pritiskom tipke jer ng-model zapisuje vrijednost polja natrag u isto svojstvo opsega koje izraz prati.

Izrazi su namjerno ograničeni. Čitaju svojstva opsega, pozivaju metode opsega i tiho toleriraju nedefinirane vrijednosti, ali ne mogu deklarirati varijable, koristiti naredbe za upravljanje tokom ili dosezati globalne objekte kao što su window.

Kako popraviti praznu stranicu ili nerenderiranu {{ }}

Prvi AngularJS program ne uspijeva na jedan od dva vidljiva načina: stranica ostaje prazna ili doslovni tekst {{message}} pojavljuje se tamo gdje bi trebao biti Hello World. Oboje znači da okvir nikada nije preuzeo označavanje. Provedite provjere u nastavku redom, s otvorenom konzolom preglednika.

  1. Potvrdite učitavanje biblioteke. Otvorite ploču Mreža i potražite angular.js Zahtjev. 404 ili nedostupan CDN ostavlja zagrade na zaslonu netaknutima.
  2. Provjerite putanju skripte. Relativna putanja se rješava prema mapi koja sadrži HTML datoteku, pa kopija u js potrebe podmape js/angular.min.js.
  3. Provjerite ng-aplikaciju. Nedostajući ili pogrešno napisan atribut ne znači ništa za samouvođenje u sustav. Atribut se spaja crticom kao ng-app u označavanju, iako je direktiva napisana velikim slovima u JavaSkripta.
  4. Pročitajte grešku konzole. [$injector:modulerr] znači da modul koji je nazvao ng-app nikada nije bio registriran. [ng:areq] obično znači da naziv kontrolera u oznaci ne odgovara nazivu koji je proslijeđen .controller().
  5. Potražite drugu ng-aplikaciju. Samo je prvi bootstrapiran, tako da zalutala kopija ostavljena na unutarnjem elementu tiho onemogućuje taj dio stranice.

Dva daljnja uzroka objašnjavaju većinu preostalih izvješća.

  • Protokol datoteke. Ovaj primjer s jednom datotekom radi ispravno kada se otvori izravno s diska, ali bilo koji predložak dohvaćen putem XHR-a blokiran je pravilima izvornog koda preglednika. Poslužite mapu putem HTTP-a nakon što se predlošci pojave.
  • Kratak bljesak aparatića za zube. Kada se oznaka renderira prije nego što je framework kompajlira, sirovi izraz je vidljiv na trenutak. Dodaj ng-cloak elementu ili zamijenite izraz za ng-bind="message", koji nikada ne prikazuje vlastito označavanje.

Ako se ništa od ovoga ne odnosi na vas, smanjite stranicu na gornji primjer i dodajte vlastiti kod unatrag redak po redak.

Pitanja i odgovori

Bilo koja od četiri gore navedena funkcionira, a ovaj primjer koristi WebstormBudući da je program jedna statička HTML datoteka, dovoljan je običan tekstualni editor. IDE dodaje samo dovršavanje direktiva, ponovno učitavanje uživo i integrirano ispravljanje pogrešaka.

$scope je povezujući objekt koji se dijeli između kontrolor i njegov prikaz. Pisanjem $scope.message unutar HelloWorldCtrl to svojstvo postaje vidljivo izrazu postavljenom na element h1.

Obje datoteke sadrže isti framework. angular.js je neminificiran, pa pogreške upućuju na čitljiv izvorni kod. angular.min.js je komprimiran za produkciju i potrebna mu je eksplicitna anotacija ovisnosti, jer minifikacija preimenuje nazive parametara koje AngularJS inače pregledava.

AngularJS je ovdje prikazani 1.x okvir, vođen direktivama, $scope i plain JavaSkripta. Angular, što znači verzija 2 i novije, je zaseban TypeScript okvir izgrađen na komponentama i aktivno je održavana linija.

Uglavnom za održavanje postojećih 1.x aplikacija, koje su i dalje široko rasprostranjene. Vokabular povezivanja, direktiva i injekcija ovisnosti transferi, no podrška je završila u siječnju 2022., tako da novi projekti pripadaju modernom Angularu.

Da. Registrirajte svaki s .controller() na istom modulu i priložite ih različitim elementima pomoću ng-controllera. Svaki dobiva vlastiti podređeni opseg, tako da identično imenovana svojstva ostaju neovisna.

Moderni asistenti čitaju 1.x kodnu bazu i izrađuju popis direktiva, filtera i usluga s predloženim ekvivalentima komponenti i usluga. Taj popis je koristan za scoping posao, iako svaka kartaping još uvijek je potrebna ručna provjera.

GitHub kopilot dovršava standardni nacrt kontrolera, dodjele $scope-a i ng-podnesi rukovatelje iz kratkog komentara, ali njegovo učenje naginje prema modernom Angularu, stoga provjerite koriste li prijedlozi doista 1.x sintaksu.

Sažmite ovu objavu uz: