AngularJS Hello World Application: Dit første eksempelprogram

Indholdsfortegnelse:

Anonim

Den bedste måde at se kraften i en AngularJS-applikation er at oprette dit 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.

  1. Webstorm
  2. Sublim tekst
  3. AngularJS-formørkelse
  4. Visual Studio

Hej verden, AngularJS

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

Guru99

{{message}}

Kode Forklaring:

  1. Nøgleordet " ng-app " bruges til at betegne, at denne applikation skal betragtes som en kantet js-applikation. Ethvert navn kan gives til denne ansøgning.
  2. Controlleren er det, der bruges til at holde forretningslogikken. I h1-koden ønsker vi adgang til controlleren, som har logikken til at vise "HelloWorld", så vi kan sige, i dette tag vil vi have adgang til controlleren ved navn "HelloWorldCtrl".
  3. Vi bruger en medlemsvariabel kaldet "meddelelse", som kun er en pladsholder til at vise "Hello World" -meddelelsen.
  4. "Script-tag" bruges til at henvise til angular.js-scriptet, som har al den nødvendige funktionalitet til kantede js. Uden denne reference fungerer de ikke, hvis vi prøver at bruge nogen AngularJS-funktioner.
  5. "Controller" er det sted, hvor vi faktisk opretter vores forretningslogik, som er vores controller. Specifikationer for hvert nøgleord vil blive forklaret i de efterfølgende kapitler. Hvad er vigtigt at bemærke, at vi definerer en controller-metode kaldet 'HelloWorldCtrl', som der henvises til i trin 2.
  6. Vi opretter en "funktion", som kaldes, 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.
  7. Vi opretter en medlemsvariabel kaldet "besked", tildeler den værdien af ​​"HelloWorld" og vedhæfter medlemsvariablen til omfangsobjektet.

BEMÆRK : Direktivet om ng-controller er et nøgleord defineret i AngularJS (trin 2) og bruges til at definere controllere i din applikation. Her i vores ansøgning har vi brugt ng-controller nøgleordet til at definere en controller med navnet 'HelloWorldCtrl'. Den faktiske logik for controlleren oprettes i (trin 5).

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

Produktion:

Meddelelsen 'Hello World' vises.