AngularJS Hello World-applicatie: uw eerste voorbeeldprogramma

De beste manier om de kracht van een AngularJS-applicatie te zien, is door uw eerste basisprogramma-app “Hello World” te maken in Angular.JS.

Er zijn veel geïntegreerde ontwikkelomgevingen die u kunt gebruiken voor AngularJS-ontwikkeling. Enkele van de populaire worden hieronder vermeld. In ons voorbeeld gebruiken we Webstorm als onze IDE.

Webstorm
Sublime Text
angularjs Eclipse
Visual Studio

Hallo wereld, AngularJS

Het onderstaande voorbeeld toont de eenvoudigste manier om uw eerste “Hello world”-applicatie in AngularJS te maken.

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

Code Verklaring:

De "ng-appHet trefwoord ” wordt gebruikt om aan te geven dat deze applicatie moet worden beschouwd als een hoekige js-applicatie. Aan deze toepassing kan elke naam worden gegeven.
De controller wordt gebruikt om de bedrijfslogica vast te houden. In de h1-tag willen we toegang krijgen tot de controller, die de logica heeft om “HelloWorld” weer te geven, dus we kunnen zeggen: in deze tag willen we toegang krijgen tot de controller met de naam “HelloWorldCtrl”.
We gebruiken een lidvariabele genaamd "bericht", die niets anders is dan een tijdelijke aanduiding om het bericht "Hallo wereld" weer te geven.
De “script-tag” wordt gebruikt om te verwijzen naar het angular.js-script dat alle noodzakelijke functionaliteit voor angular js heeft. Zonder deze referentie zullen we, als we AngularJS-functies proberen te gebruiken, niet werken.
“Controller” is de plaats waar we feitelijk onze bedrijfslogica creëren, namelijk onze controller. De specifieke kenmerken van elk trefwoord worden in de volgende hoofdstukken uitgelegd. Het is belangrijk op te merken dat we een controllermethode definiëren met de naam 'HelloWorldCtrl', waarnaar in stap 2 wordt verwezen.
We maken een "functie" die wordt aangeroepen wanneer onze code deze controller aanroept. Het $scope-object is een speciaal object in AngularJS, een globaal object dat wordt gebruikt binnen Angular.js. Het object $scope wordt gebruikt om de gegevens tussen de controller en de weergave te beheren.
We maken een lidvariabele met de naam "bericht", wijzen deze de waarde "HelloWorld" toe en koppelen de lidvariabele aan het scope-object.

NOTITIE: De ng-controller-richtlijn is een trefwoord dat is gedefinieerd in angularjs (stap #2) en wordt gebruikt om controllers in uw toepassing te definiëren. Hier in onze applicatie hebben we het trefwoord ng-controller gebruikt om een controller met de naam 'HelloWorldCtrl' te definiëren. De daadwerkelijke logica voor de controller wordt aangemaakt in (stap#5).

Als de opdracht succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Output:

Het bericht 'Hallo wereld' wordt weergegeven.

Hallo wereld, AngularJS

Dagelijkse Guru99 Nieuwsbrief