AngularJS Hello World lietojumprogramma: jūsu pirmā programmas piemērs

Satura rādītājs:

Anonim

Labākais veids, kā redzēt AngularJS lietojumprogrammas spēku, ir izveidot savu pirmo pamata programmas "Hello World" lietotni vietnē Angular.JS.

AngularJS izstrādei var izmantot daudzas integrētas izstrādes vides, dažas no populārākajām ir minētas tālāk. Šajā piemērā mēs izmantojam Webstorm kā IDE.

  1. Tīmekļa vētra
  2. Cildens teksts
  3. LeņķiskaisJS aptumsums
  4. Visual Studio

Sveika pasaule, AngularJS

Tālāk sniegtajā piemērā parādīts vienkāršākais veids, kā izveidot savu pirmo "Hello world" lietojumprogrammu vietnē AngularJS.

Guru99

{{message}}

Koda skaidrojums:

  1. Atslēgvārds " ng-app " tiek izmantots, lai apzīmētu, ka šī lietojumprogramma jāuzskata par leņķa js lietojumprogrammu. Šai lietojumprogrammai var piešķirt jebkuru nosaukumu.
  2. Kontrolieris ir tas, ko izmanto biznesa loģikas uzturēšanai. H1 tagā mēs vēlamies piekļūt kontrolierim, kuram būs loģika, lai parādītu "HelloWorld", tāpēc mēs varam teikt, ka šajā tagā mēs vēlamies piekļūt kontrolierim ar nosaukumu "HelloWorldCtrl".
  3. Mēs izmantojam locekļa mainīgo ar nosaukumu "message", kas ir nekas cits kā vietturis, lai parādītu ziņojumu "Hello World".
  4. "Skripta tags" tiek izmantots, lai atsauktos uz skriptu angular.js, kuram ir visas leņķa js nepieciešamās funkcijas. Bez šīs atsauces, ja mēs mēģinām izmantot kādas AngularJS funkcijas, tās nedarbosies.
  5. "Kontrolieris" ir vieta, kur mēs faktiski veidojam savu biznesa loģiku, kas ir mūsu kontrolieris. Katra atslēgvārda specifika tiks paskaidrota nākamajās nodaļās. Ir svarīgi atzīmēt, ka mēs definējam kontroliera metodi ar nosaukumu “HelloWorldCtrl”, uz kuru atsaucas 2. solī.
  6. Mēs izveidojam "funkciju", kas tiks izsaukta, kad mūsu kods izsauks šo kontrolieri. Objekts $ scope ir īpašs objekts AngularJS, kas ir globāls objekts, ko izmanto Angular.js. Objekts $ sfēra tiek izmantots, lai pārvaldītu datus starp kontrolieri un skatu.
  7. Mēs veidojam dalībnieka mainīgo ar nosaukumu "message", piešķirot tam vērtību "HelloWorld" un pievienojot locekļa mainīgo sfēra objektam.

PIEZĪME . Ng-controller direktīva ir atslēgvārds, kas definēts AngularJS (2. darbība), un tiek izmantota, lai definētu kontrolierus jūsu lietojumprogrammā. Šeit mūsu lietojumprogrammā mēs izmantojām atslēgvārdu ng-controller, lai definētu kontrolieri ar nosaukumu “HelloWorldCtrl”. Faktiskā kontroliera loģika tiks izveidota (5. solis).

Ja komanda tiek veiksmīgi izpildīta, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

Izeja:

Tiks parādīts ziņojums “Sveika pasaule”.