Najbolji način da vidite snagu aplikacije AngularJS je stvoriti svoj prvi osnovni program "Hello World" u programu Angular.JS.
Postoji mnogo integriranih razvojnih okruženja koja možete koristiti za razvoj AngularJS-a, a neka od popularnih su navedena u nastavku. U našem primjeru koristimo Webstorm kao svoj IDE.
- Web oluja
- Uzvišeni tekst
- AngularJS Eclipse
- Vizualni studio
Pozdrav svijete, AngularJS
Primjer u nastavku prikazuje najlakši način za stvaranje vaše prve "Hello world" aplikacije u AngularJS.
Guru99 {{message}}
Objašnjenje koda:
- Ključna riječ " ng-app " koristi se kako bi označila da ovu aplikaciju treba smatrati kutnom js aplikacijom. Ovoj se aplikaciji može dati bilo koje ime.
- Kontrolor je ono što se koristi za zadržavanje poslovne logike. U h1 oznaci želimo pristupiti kontroleru, koji će imati logiku za prikaz "HelloWorld", pa možemo reći, u ovoj oznaci želimo pristupiti kontroloru pod nazivom "HelloWorldCtrl".
- Koristimo varijablu člana koja se naziva "poruka" koja nije ništa drugo do rezervirano mjesto za prikaz poruke "Hello World".
- "Oznaka skripte" koristi se za referencu na skriptu angular.js koja ima sve potrebne funkcije za angular js. Bez ove reference, ako pokušamo koristiti bilo koje funkcije AngularJS, one neće raditi.
- "Kontrolor" je mjesto na kojem zapravo stvaramo svoju poslovnu logiku, koja 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 koja se naziva 'HelloWorldCtrl' na koju se upućuje u koraku 2.
- Stvaramo "funkciju" koja će se pozvati kad naš kod pozove ovaj kontroler. Objekt $ scope je poseban objekt u AngularJS koji je globalni objekt koji se koristi u programu Angular.js. Objekt $ scope koristi se za upravljanje podacima između kontrolera i pogleda.
- Izrađujemo varijablu člana koja se naziva "poruka", dodjeljujući joj vrijednost "HelloWorld" i pričvršćujući varijablu člana na objekt opsega.
NAPOMENA : Direktiva ng-kontrolor 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 stvorena u (korak # 5).
Ako se naredba uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Prikazat će se poruka 'Hello World'.
