Den beste måten å se kraften i et AngularJS-program er å lage ditt første grunnleggende program "Hello World" -appen i Angular.JS.
Det er mange integrerte utviklingsmiljøer du kan bruke til AngularJS-utvikling, noen av de populære er nevnt nedenfor. I vårt eksempel bruker vi Webstorm som IDE.
- Webstorm
- Sublim tekst
- AngularJS formørkelse
- Visuelt studio
Hei verden, AngularJS
Eksemplet nedenfor viser den enkleste måten å lage din første "Hello world" -applikasjon i AngularJS.
Guru99 {{message}}
Kode Forklaring:
- Nøkkelordet " ng-app " brukes til å betegne at denne applikasjonen skal betraktes som en kantet js-applikasjon. Ethvert navn kan gis til denne applikasjonen.
- Kontrolleren er det som brukes til å holde forretningslogikken. I h1-koden vil vi få tilgang til kontrolleren, som vil ha logikken til å vise "HelloWorld", så vi kan si, i denne koden vil vi få tilgang til kontrolleren som heter "HelloWorldCtrl".
- Vi bruker en medlemsvariabel kalt "melding" som ikke er noe annet enn en plassholder for å vise "Hello World" -meldingen.
- "Skripttaggen" brukes til å referere til angular.js-skriptet som har all den nødvendige funksjonaliteten for vinkeljs. Uten denne referansen, hvis vi prøver å bruke noen AngularJS-funksjoner, vil de ikke fungere.
- "Controller" er stedet der vi faktisk lager vår forretningslogikk, som er vår controller. Spesifikasjonene for hvert nøkkelord vil bli forklart i de påfølgende kapitlene. Hva er viktig å merke seg at vi definerer en kontrollermetode kalt 'HelloWorldCtrl' som det refereres til i trinn 2.
- Vi lager en "funksjon" som vil bli kalt når koden vår kaller denne kontrolleren. $ Scope-objektet er et spesielt objekt i AngularJS, som er et globalt objekt som brukes i Angular.js. $ Scope-objektet brukes til å administrere dataene mellom kontrolleren og visningen.
- Vi lager en medlemsvariabel kalt "melding", tildeler den verdien til "HelloWorld" og fester medlemsvariabelen til omfangsobjektet.
MERKNAD : ng-controller-direktivet er et nøkkelord som er definert i AngularJS (trinn 2) og brukes til å definere kontrollere i applikasjonen din. Her i søknaden vår har vi brukt ng-controller-nøkkelordet til å definere en kontroller som heter 'HelloWorldCtrl'. Den faktiske logikken for kontrolleren vil bli opprettet i (trinn 5).
Hvis kommandoen er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Meldingen 'Hello World' vises.
