Aplikacija AngularJS Hello World: Vaš prvi primer programa

Kazalo:

Anonim

Najboljši način, da vidite moč aplikacije AngularJS, je ustvariti svoj prvi osnovni program "Hello World" v programu Angular.JS.

Obstaja veliko integriranih razvojnih okolij, ki jih lahko uporabite za razvoj AngularJS, nekatera priljubljena pa so navedena spodaj. V našem primeru kot IDE uporabljamo Webstorm.

  1. Spletna nevihta
  2. Vzvišeno besedilo
  3. AngularJS Eclipse
  4. Visual Studio

Pozdravljen svet, AngularJS

Spodnji primer prikazuje najlažji način za ustvarjanje prve aplikacije "Hello world" v programu AngularJS.

Guru99

{{message}}

Razlaga kode:

  1. Ključna beseda " ng-app " pomeni, da je treba to aplikacijo obravnavati kot kotno js aplikacijo. Tej aplikaciji lahko dodelite katero koli ime.
  2. Krmilnik je tisto, kar se uporablja za zadrževanje poslovne logike. V oznaki h1 želimo dostopati do krmilnika, ki bo imel logiko za prikaz "HelloWorld", zato lahko rečemo, da v tej oznaki želimo dostopati do krmilnika z imenom "HelloWorldCtrl".
  3. Za prikaz sporočila "Hello World" uporabljamo spremenljivko člana, imenovano "message", ki ni nič drugega kot nadomestni znak.
  4. "Oznaka skripta" se uporablja za sklic na skript angular.js, ki ima vse potrebne funkcije za angular js. Brez tega sklica, če poskusimo uporabiti katero koli funkcijo AngularJS, ne bodo delovale.
  5. "Controller" je kraj, kjer dejansko ustvarjamo svojo poslovno logiko, ki je naš regulator. Podrobnosti posamezne ključne besede bodo razložene v naslednjih poglavjih. Pomembno je omeniti, da definiramo metodo krmilnika, imenovano "HelloWorldCtrl", na katero se sklicuje v 2. koraku.
  6. Ustvarjamo "funkcijo", ki bo poklicana, ko naša koda pokliče ta krmilnik. Objekt $ scope je poseben objekt v AngularJS, ki je globalni objekt, ki se uporablja v Angular.js. Objekt $ scope se uporablja za upravljanje podatkov med krmilnikom in pogledom.
  7. Ustvarjamo spremenljivko člana, imenovano "message", ki ji dodelimo vrednost "HelloWorld" in spremenljivko člana pritrdimo na objekt obsega.

OPOMBA : Direktiva ng-controller je ključna beseda, definirana v AngularJS (korak 2), in se uporablja za definiranje krmilnikov v vaši aplikaciji. Tukaj v naši aplikaciji smo s ključno besedo ng-controller definirali krmilnik z imenom "HelloWorldCtrl". Dejanska logika za krmilnik bo ustvarjena v (korak 5).

Če se ukaz uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.

Izhod:

Prikaže se sporočilo "Hello World".