AngularJS Hello World Application: Dit første eksempelprogram

Den bedste måde at se kraften i en AngularJS-applikation på er at oprette din første grundlæggende program "Hello World"-app i Angular.JS.

Der er mange integrerede udviklingsmiljøer, du kan bruge til AngularJS-udvikling, nogle af de populære er nævnt nedenfor. I vores eksempel bruger vi Webstorm som vores IDE.

Webstorm
Sublime Text
AngularJS Eclipse
Visual Studio

Hej verden, AngularJS

Eksemplet nedenfor viser den nemmeste måde at oprette din første "Hello world"-applikation i AngularJS.

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

Kodeforklaring:

Den "ng-app” nøgleordet bruges til at angive, at denne applikation skal betragtes som en angular js-applikation. Ethvert navn kan gives til denne applikation.
Controlleren er det, der bruges til at holde forretningslogikken. I h1-tagget vil vi have adgang til controlleren, som vil have logikken til at vise "HelloWorld", så vi kan sige, i denne tag vil vi have adgang til controlleren ved navn "HelloWorldCtrl".
Vi bruger en medlemsvariabel kaldet "besked", som ikke er andet end en pladsholder til at vise "Hello World"-meddelelsen.
"Script-tagget" bruges til at referere til angular.js-scriptet, som har al den nødvendige funktionalitet til angular js. Uden denne reference, hvis vi forsøger at bruge nogen AngularJS-funktioner, vil de ikke fungere.
"Controller" er stedet, hvor vi faktisk skaber vores forretningslogik, som er vores controller. De nærmere specifikationer for hvert søgeord vil blive forklaret i de efterfølgende kapitler. Hvad er vigtigt at bemærke, at vi definerer en controller-metode kaldet 'HelloWorldCtrl', som der refereres til i trin 2.
Vi opretter en "funktion", som vil blive kaldt, når vores kode kalder denne controller. $scope-objektet er et specielt objekt i AngularJS, som er et globalt objekt, der bruges i Angular.js. $scope-objektet bruges til at administrere data mellem controlleren og visningen.
Vi opretter en medlemsvariabel kaldet "besked", tildeler den værdien "HelloWorld" og knytter medlemsvariablen til scope-objektet.

BEMÆRK: ng-controller-direktivet er et nøgleord defineret i AngularJS (trin #2) og bruges til at definere controllere i din applikation. Her i vores applikation har vi brugt nøgleordet ng-controller til at definere en controller ved navn 'HelloWorldCtrl'. Den faktiske logik for controlleren vil blive oprettet i (trin #5).

Hvis kommandoen udføres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

Meddelelsen 'Hello World' vil blive vist.

Du kan lide: