Geriausias būdas pamatyti „AngularJS“ programos galią yra sukurti pirmąją pagrindinę programos „Hello World“ programą Angular.JS.
Yra daug integruotų kūrimo aplinkų, kurias galite naudoti kurdami „AngularJS“, kai kurios populiarios yra paminėtos toliau. Savo pavyzdyje mes naudojame „Webstorm“ kaip savo IDE.
- „Webstorm“
- Ištaigingas tekstas
- Kampinis JS užtemimas
- „Visual Studio“
Sveikas pasaulis, AngularJS
Žemiau pateiktame pavyzdyje parodytas paprasčiausias būdas sukurti pirmąją „Hello world“ programą „AngularJS“.
Guru99 {{message}}
Kodo paaiškinimas:
- Raktinis žodis „ ng-app “ naudojamas pažymėti, kad ši programa turėtų būti laikoma kampine js programa. Šiai programai gali būti suteiktas bet koks vardas.
- Valdiklis yra tai, kas naudojama verslo logikai palaikyti. „H1“ žymoje norime pasiekti valdiklį, kuriame bus logika rodyti „HelloWorld“, todėl galime pasakyti, kad šioje žymoje norime pasiekti valdiklį, pavadintą „HelloWorldCtrl“.
- Mes naudojame nario kintamąjį, vadinamą „message“, kuris yra ne kas kita, o rezervuotoji vieta „Hello World“ pranešimui rodyti.
- „Scenarijaus žyma“ naudojama nuoroda į scenarijų angular.js, kuris turi visas kampiniam js reikalingas funkcijas. Be šios nuorodos, jei bandysime naudoti kokias nors „AngularJS“ funkcijas, jos neveiks.
- „Kontrolierius“ yra vieta, kur mes iš tikrųjų kuriame savo verslo logiką, kuri yra mūsų valdytoja. Kiekvieno raktinio žodžio ypatumai bus paaiškinti tolesniuose skyriuose. Svarbu pažymėti, kad mes apibrėžiame valdiklio metodą, vadinamą „HelloWorldCtrl“, kuris nurodomas 2 žingsnyje.
- Mes kuriame „funkciją“, kuri bus iškviesta, kai mūsų kodas iškvies šį valdiklį. Objektas „$ scope“ yra specialus „AngularJS“ objektas, kuris yra visuotinis objektas, naudojamas „Angular.js“. Objektas $ sritis naudojamas valdyti duomenis tarp valdiklio ir rodinio.
- Mes kuriame nario kintamąjį, vadinamą „message“, priskiriame jam „HelloWorld“ vertę ir pridedame nario kintamąjį prie srities objekto.
PASTABA : „ng-controller“ direktyva yra raktinis žodis, apibrėžtas „AngularJS“ (2 žingsnis) ir naudojamas valdikliams apibrėžti jūsų programoje. Čia savo programoje mes naudojome raktinį žodį ng-controller, kad apibrėžtume valdiklį, pavadintą „HelloWorldCtrl“. Tikroji valdiklio logika bus sukurta (5 žingsnis).
Jei komanda sėkmingai vykdoma, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Bus rodomas pranešimas „Sveikas pasaulis“.
