AngularJS Hello World-applikasjon: Ditt første eksempelprogram

by: James Hartman James Hartman
Hours oppdatert

Den beste måten å se kraften til en AngularJS-applikasjon på er å lage din første grunnleggende program "Hello World"-app i Angular.JS.

Det er mange integrerte utviklingsmiljøer du kan bruke for AngularJS-utvikling, noen av de populære er nevnt nedenfor. I vårt eksempel bruker vi Webstorm som vår IDE.

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

Hei verden, AngularJS

Eksemplet nedenfor viser den enkleste måten å lage din første "Hello world"-applikasjon i AngularJS.

AngularJS Hello World-programmet

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

  1. Den "ng-app” nøkkelord brukes for å angi at denne applikasjonen skal betraktes som en angular js-applikasjon. Et hvilket som helst navn kan gis til denne applikasjonen.
  2. Kontrolleren er det som brukes til å holde forretningslogikken. I h1-taggen vil vi ha tilgang til kontrolleren, som vil ha logikken til å vise "HelloWorld", så vi kan si, i denne taggen vil vi ha tilgang til kontrolleren som heter "HelloWorldCtrl".
  3. Vi bruker en medlemsvariabel kalt "melding" som ikke er annet enn en plassholder for å vise "Hello World"-meldingen.
  4. "Script-taggen" brukes til å referere til angular.js-skriptet som har all nødvendig funksjonalitet for angular js. Uten denne referansen, hvis vi prøver å bruke noen AngularJS-funksjoner, vil de ikke fungere.
  5. "Controller" er stedet der vi faktisk lager forretningslogikken vår, som er kontrolleren vår. Spesifikasjonene til hvert nøkkelord vil bli forklart i de påfølgende kapitlene. Det som er viktig å merke seg at vi definerer en kontrollermetode kalt 'HelloWorldCtrl' som det refereres til i trinn 2.
  6. Vi lager en "funksjon" som vil bli kalt når koden vår kaller denne kontrolleren. $scope-objektet er et spesialobjekt i AngularJS som er et globalt objekt som brukes i Angular.js. $scope-objektet brukes til å administrere dataene mellom kontrolleren og visningen.
  7. Vi lager en medlemsvariabel kalt "melding", tildeler den verdien til "HelloWorld" og knytter medlemsvariabelen til scope-objektet.

MERKNADER: ng-controller-direktivet er et nøkkelord definert i AngularJS (trinn 2) og brukes til å definere kontrollere i applikasjonen din. Her i vår applikasjon har vi brukt nøkkelordet ng-controller for å definere en kontroller kalt 'HelloWorldCtrl'. Selve logikken for kontrolleren vil bli opprettet i (trinn #5).

Hvis kommandoen utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

Meldingen 'Hello World' vil vises.

AngularJS Hello World-programmet