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.
- Webstorm
- Sublim tekst
- AngularJS-formørkelse
- 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:
- 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.
- 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".
- Vi bruger en medlemsvariabel kaldet "meddelelse", som kun er en pladsholder til at vise "Hello World" -meddelelsen.
- "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.
- "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.
- 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.
- 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.