AngularJS Hello World -sovellus: Ensimmäinen esimerkkiohjelmasi

Paras tapa nähdä AngularJS-sovelluksen teho on luoda ensimmäinen perusohjelma "Hello World" Angular.JS:ssä.

On monia integroituja kehitysympäristöjä, joita voit käyttää AngularJS-kehitykseen, joista osa suosituista on mainittu alla. Esimerkissämme käytämme Webstorm kuin meidän IDE.

Webstorm
Sublime Text
angularjs Eclipse
Visual Studio

Hei maailma, AngularJS

Alla oleva esimerkki näyttää helpoimman tavan luoda ensimmäinen "Hello world" -sovellus AngularJS:ssä.

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

Koodin selitys:

"ng-app”-avainsanaa käytetään osoittamaan, että tätä sovellusta tulisi pitää kulmikkaana js-sovelluksena. Tälle sovellukselle voidaan antaa mikä tahansa nimi.
Ohjainta käytetään pitämään liiketoimintalogiikka. H1-tunnisteessa haluamme päästä ohjaimeen, jolla on logiikka näyttää "HelloWorld", joten voimme sanoa, että tässä tagissa haluamme käyttää ohjainta nimeltä "HelloWorldCtrl".
Käytämme jäsenmuuttujaa nimeltä "message", joka on vain paikkamerkki "Hello World" -viestin näyttämiseen.
"Skriptitunnistetta" käytetään viittaamaan angular.js-skriptiin, jossa on kaikki kulma-js:n tarvittavat toiminnot. Ilman tätä viittausta, jos yritämme käyttää AngularJS-toimintoja, ne eivät toimi.
"Controller" on paikka, jossa itse asiassa luomme liiketoimintalogiikkaamme, joka on meidän valvojamme. Kunkin avainsanan yksityiskohdat selitetään seuraavissa luvuissa. On tärkeää huomata, että määrittelemme ohjainmenetelmän nimeltä "HelloWorldCtrl", johon viitataan vaiheessa 2.
Luomme "funktiota", jota kutsutaan, kun koodimme kutsuu tätä ohjainta. $scope-objekti on AngularJS:n erikoisobjekti, joka on Angular.js:ssä käytetty globaali objekti. $scope-objektia käytetään tietojen hallintaan ohjaimen ja näkymän välillä.
Luomme jäsenmuuttujan nimeltä "message", annamme sille arvon "HelloWorld" ja liitämme jäsenmuuttujan soveltamisalaobjektiin.

HUOMAUTUS: ng-controller-direktiivi on avainsana, joka on määritelty kohdassa angularjs (vaihe 2) ja sitä käytetään määrittämään ohjaimet sovelluksessasi. Tässä sovelluksessamme olemme käyttäneet avainsanaa ng-controller määrittämään ohjaimen nimeltä 'HelloWorldCtrl'. Ohjaimen varsinainen logiikka luodaan vaiheessa 5.

Jos komento suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.

lähtö:

Viesti "Hello World" tulee näkyviin.

Saatat tykätä: