AngularJS Hello World Application: Ditt första exempelprogram

By: James Hartman James Hartman
Hours Uppdaterad

Det bästa sättet att se kraften i en AngularJS-applikation är att skapa ditt första grundläggande program "Hello World"-app i Angular.JS.

Det finns många integrerade utvecklingsmiljöer du kan använda för AngularJS-utveckling, några av de populära nämns nedan. I vårt exempel använder vi Webstorm som vår IDE.

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

Hej världen, AngularJS

Exemplet nedan visar det enklaste sättet att skapa din första "Hello world"-applikation i AngularJS.

AngularJS Hello World Program

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

Kodförklaring:

  1. Den "ng-app” nyckelord används för att ange att denna applikation ska betraktas som en angular js-applikation. Alla namn kan ges till denna applikation.
  2. Regulatorn är det som används för att hålla affärslogiken. I h1-taggen vill vi komma åt kontrollern, som kommer att ha logiken att visa "HelloWorld", så vi kan säga, i den här taggen vill vi komma åt kontrollern som heter "HelloWorldCtrl".
  3. Vi använder en medlemsvariabel som heter "meddelande" som inte är något annat än en platshållare för att visa meddelandet "Hello World".
  4. "Script-taggen" används för att referera till skriptet angular.js som har alla nödvändiga funktioner för angular js. Utan denna referens, om vi försöker använda några AngularJS-funktioner, kommer de inte att fungera.
  5. "Controller" är platsen där vi faktiskt skapar vår affärslogik, som är vår controller. Detaljerna för varje nyckelord kommer att förklaras i de efterföljande kapitlen. Vad som är viktigt att notera att vi definierar en kontrollmetod som kallas 'HelloWorldCtrl' som refereras till i steg 2.
  6. Vi skapar en "funktion" som kommer att anropas när vår kod anropar denna styrenhet. $scope-objektet är ett specialobjekt i AngularJS som är ett globalt objekt som används inom Angular.js. $scope-objektet används för att hantera data mellan regulatorn och vyn.
  7. Vi skapar en medlemsvariabel som heter "meddelande", tilldelar den värdet "HelloWorld" och bifogar medlemsvariabeln till scope-objektet.

ANMÄRKNINGAR: ng-controller-direktivet är ett nyckelord som definieras i AngularJS (steg #2) och används för att definiera styrenheter i din applikation. Här i vår applikation har vi använt nyckelordet ng-controller för att definiera en kontroller som heter 'HelloWorldCtrl'. Den faktiska logiken för styrenheten kommer att skapas i (steg #5).

Om kommandot exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.

Produktion:

Meddelandet 'Hello World' kommer att visas.

AngularJS Hello World Program