Rakendus AngularJS Hello World: teie esimene näidisprogramm

Lang L: none (table-of-contents):

Anonim

Parim viis AngularJS-rakenduse võimsuse nägemiseks on luua oma esimene põhiprogramm "Hello World" rakenduses Angular.JS.

AngularJS-i arendamiseks saate kasutada palju integreeritud arenduskeskkondi, mõned populaarsetest on mainitud allpool. Meie näites kasutame IDE-na veebitormi.

  1. Veebitorm
  2. Ülev tekst
  3. NurgaJS Eclipse
  4. Visual Studio

Tere maailm, AngularJS

Allpool toodud näide näitab lihtsamat viisi oma esimese rakenduse "Hello world" loomiseks rakenduses AngularJS.

Guru99

{{message}}

Koodi selgitus:

  1. Märksõna " ng-app " kasutatakse selle tähistamiseks, et seda rakendust tuleks käsitleda nurgelise js-rakendusena. Sellele rakendusele võib anda mis tahes nime.
  2. Kontrollerit kasutatakse äriloogika hoidmiseks. H1-märgendis soovime pääseda juurde kontrollerile, millel on loogika "HelloWorld" kuvamiseks, nii et võime öelda, et selles märgendis soovime juurdepääsu kontrollerile nimega "HelloWorldCtrl".
  3. Kasutame sõnumi "Tere maailm" kuvamiseks liikme muutujat nimega "message", mis pole muud kui kohatäide.
  4. "Skripti märgendit" kasutatakse viidates skriptile angular.js, millel on kõik nurkade js jaoks vajalikud funktsioonid. Ilma selle viiteta ei tööta need, kui proovime kasutada mõnda AngularJS-i funktsiooni.
  5. "Kontroller" on koht, kus me tegelikult loome oma äriloogikat, mis on meie kontroller. Iga märksõna eripära selgitatakse järgmistes peatükkides. Oluline on märkida, et määratleme kontrolleri meetodit nimega HelloWorldCtrl, millele viidatakse 2. etapis.
  6. Loome "funktsiooni", mida kutsutakse siis, kui meie kood kutsub seda kontrollerit. Objekt $ scope on AngularJS-i spetsiaalne objekt, mis on globaalne objekt, mida kasutatakse Angular.js-is. Objekti $ scope kasutatakse andmete haldamiseks kontrolleri ja vaate vahel.
  7. Loome liikmemuutuja nimega "sõnum", määrame sellele väärtuse "HelloWorld" ja kinnitame liikumismuutuja ulatuse objektile.

MÄRKUS . Ng-controller-käskkiri on AngularJS-is määratletud märksõna (2. samm) ja seda kasutatakse teie rakenduses kontrollerite määratlemiseks. Siin oleme oma rakenduses kasutanud märksõna ng-controller, et määratleda kontroller nimega HelloWorldCtrl. Kontrolleri tegelik loogika luuakse (samm # 5).

Kui käsk käivitatakse edukalt, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

Kuvatakse teade "Tere maailm".