AngularJS Hello World -sovellus: Ensimmäinen esimerkkiohjelmasi

Sisällysluettelo:

Anonim

Paras tapa nähdä AngularJS-sovelluksen voima on luoda ensimmäinen "Hello World" -sovelluksesi Angular.JS-sovellukseen.

AngularJS-kehitykseen voi käyttää monia integroituja kehitysympäristöjä, joista osa on mainittu alla. Esimerkissämme käytämme Webstormia IDE: nä.

  1. Verkkomyrsky
  2. Sublime teksti
  3. KulmaJS Eclipse
  4. Visual Studio

Hei maailma, AngularJS

Alla olevassa esimerkissä on helpoin tapa luoda ensimmäinen "Hello world" -sovellus AngularJS-sovelluksessa.

Guru99

{{message}}

Koodin selitys:

  1. Avainsanaa " ng-app " käytetään osoittamaan, että tätä sovellusta on pidettävä kulmaisena js-sovelluksena. Tälle sovellukselle voidaan antaa mikä tahansa nimi.
  2. Ohjainta käytetään liikelogiikan pitämiseen. H1-tagissa haluamme käyttää ohjainta, jolla on logiikka näyttää "HelloWorld", joten voimme sanoa, että tässä tunnisteessa haluamme käyttää ohjainta nimeltä "HelloWorldCtrl".
  3. Käytämme jäsenmuuttujaa nimeltä "message", joka ei ole muuta kuin paikkamerkki "Hello World" -viestin näyttämiseen.
  4. "Komentotunnistetta" käytetään viittaamaan angular.js-komentosarjaan, jolla on kaikki tarvittavat toiminnot kulma-js: lle. Ilman tätä viittausta, jos yritämme käyttää AngularJS-toimintoja, ne eivät toimi.
  5. "Controller" on paikka, jossa luomme tosiasiallisesti liiketoimintalogiikkamme, joka on ohjaimemme. Kunkin avainsanan yksityiskohdat selitetään seuraavissa luvuissa. Tärkeää on huomata, että määritämme ohjainmenetelmän nimeltä HelloWorldCtrl, johon viitataan vaiheessa 2.
  6. Olemme luomassa "toimintoa", jota kutsutaan, kun koodimme kutsuu tätä ohjainta. $ Scope -objekti on erityinen objekti AngularJS: ssä, joka on globaali objekti, jota käytetään Angular.js-tiedostossa. $ Scope -objektia käytetään tietojen hallintaan ohjaimen ja näkymän välillä.
  7. Luomme jäsenmuuttujaa nimeltä "message", osoitamme sille arvon "HelloWorld" ja liitämme jäsenmuuttujan laajuusobjektiin.

HUOMAUTUS : ng-controller-direktiivi on AngularJS: ssä määritelty avainsana (vaihe # 2), ja sitä käytetään ohjaimien määrittelemiseen sovelluksessasi. Tässä sovelluksessamme olemme käyttäneet ng-controller-avainsanaa määrittelemään ohjaimen nimeltä HelloWorldCtrl. Ohjaimen todellinen logiikka luodaan (vaihe # 5).

Jos komento suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodisi selaimessa.

Tuotos:

Viesti 'Hello World' tulee näkyviin.