Rakendus AngularJS Hello World: teie esimene näidisprogramm

Autor: James Hartman James Hartman
Hours Ajakohastatud

Parim viis AngularJS-i rakenduse võimsuse nägemiseks on luua oma esimene põhiprogrammi „Hello World” rakendus Angular.JS-is.

AngularJS-i arendamiseks saate kasutada palju integreeritud arenduskeskkondi, mõned populaarsemad on allpool mainitud. Meie näites kasutame Webstorm kui meie IDE.

  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. Visual Studio

Tere maailm, AngularJS

Allolev näide näitab lihtsaimat viisi oma esimese „Tere maailm” rakenduse loomiseks AngularJS-is.

Programm AngularJS Hello World

<!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>

Koodi selgitus:

  1. "ng-rakendus” märksõna kasutatakse tähistamaks, et seda rakendust tuleks käsitleda kui nurga js-rakendust. Sellele rakendusele võib anda mis tahes nime.
  2. Kontroller on see, mida kasutatakse äriloogika hoidmiseks. Märgis h1 tahame pääseda juurde kontrollerile, millel on loogika „HelloWorldi” kuvamiseks, nii et võime öelda, et selles sildis tahame pääseda juurde kontrollerile nimega „HelloWorldCtrl”.
  3. Me kasutame liikmemuutujat nimega "message", mis pole muud kui kohatäide "Tere maailm" sõnumi kuvamiseks.
  4. Skripti silti kasutatakse viitamiseks skriptile angular.js, millel on kõik nurgelise js-i jaoks vajalikud funktsioonid. Ilma selle viiteta, kui proovime kasutada mõnda AngularJS-i funktsiooni, siis need ei tööta.
  5. “Kontroller” on koht, kus me tegelikult loome oma äriloogikat, mis on meie kontroller. Iga märksõna spetsiifikat selgitatakse järgmistes peatükkides. Oluline on märkida, et me määratleme kontrolleri meetodi nimega "HelloWorldCtrl", millele viidatakse etapis 2.
  6. Loome funktsiooni, mida kutsutakse välja siis, kui meie kood sellele kontrollerile helistab. Objekt $ Scope on AngularJS-i spetsiaalne objekt, mis on Angular.js-is kasutatav globaalne objekt. Objekti $scope kasutatakse andmete haldamiseks kontrolleri ja vaate vahel.
  7. Loome liikmemuutuja nimega “message”, määrame sellele “HelloWorldi” väärtuse ja lisame liikmemuutuja ulatuse objektile.

MÄRKUSED: ng-kontrolleri direktiiv on märksõna, mis on määratletud keeles AngularJS (samm nr 2) ja seda kasutatakse teie rakenduses kontrollerite määratlemiseks. Siin oma rakenduses oleme kasutanud märksõna ng-controller, et määratleda kontroller nimega 'HelloWorldCtrl'. Kontrolleri tegelik loogika luuakse (samm nr 5).

Kui käsk on edukalt täidetud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

Kuvatakse teade "Tere maailm".

Programm AngularJS Hello World