AngularJS Hello World: Dit første eksempelprogram

Af: James Hartman James Hartman
Hours Opdateret

⚡ Smart opsummering

AngularJS Hello World-programmer behøver kun en enkelt HTML-fil, én scriptreference og to direktiver, ng-app og ng-controller, for at binde en controller-scope-variabel til siden via et dobbeltparentesudtryk.

  • 🔘 ng-app: Attributten ng-app markerer rodelementet og bootstrapper automatisk det navngivne AngularJS-modul.
  • ☑️ ng-controller: ng-controller tilføgger HelloWorldCtrl til h1-elementet, hvilket gør controllerens omfang tilgængeligt der.
  • ✅ Omfangsbinding: Tildeling af $scope.message inde i controlleren føder udtrykket {{message}}, der gengives i viewet.
  • 🧪 Enkelt fil: Én HTML-fil plus én scriptreference kører eksemplet uden behov for noget byggetrin.
  • 🛠️ Fejlfinding: Bogstavelige parenteser på skærmen betyder næsten altid, at biblioteket aldrig blev indlæst, eller at ng-app mangler.
  • 📊 Versionsnotat: AngularJS-support ophørte i januar 2022, med 1.8.3 som den endelige udgivelse; nyt arbejde hører hjemme i Angular.
Læs mere

AngularJS Hello World første eksempelprogram, der bruger ng-app og ng-controller

Den bedste måde at se styrken ved en AngularJS-applikation er at oprette dit første grundlæggende program, "Hello World"-app, i AngularJS.

Der findes 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. Sublime Text
  3. AngularJS Eclipse
  4. Visual Studio

Hej verden, AngularJS

Versionsnotat: AngularJS 1.x forlod langtidssupport den 31. december 2021, og framework-teamet bekræfter det. AngularJS-support officielt ophørt i januar 2022, med 1.8.3 som den endelige udgivelse og ingen sikkerhedsrettelser efter den. Hvert trin og kodeblok nedenfor bevares nøjagtigt som skrevet. Nye projekter hører hjemme i moderne Angular, hvor den samme øvelse starter med ng serve og en selvstændig komponent og bruger stadig det samme {{ }} interpolationssyntaks.

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

Det kommenterede skærmbillede nedenfor mærker hver del af filen, og dens syv tal matcher Code Forklaringsliste nedenunder. Den blev hentet mod en tidligere 1.4.0-build, så dens scriptlinje afviger fra den version, der er fastgjort i koden.

Annoteret AngularJS Hello World HTML-fil med syv nummererede callouts til ng-app, ng-controller, scriptreferencen og scope-variablen

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

Code Forklaring:

  1. Den "ng-app"" bruges til at angive, at denne applikation skal betragtes som en AngularJS-applikation. Denne applikation kan have et hvilket som helst navn.
  2. Controlleren er det, der bruges til at holde forretningslogikken. I h1-tagget ønsker vi at få adgang til controller, som vil have logikken til at vise "Hello World", så vi kan sige, at vi i dette tag ønsker at få adgang til controlleren ved navn "HelloWorldCtrl".
  3. Vi bruger en medlemsvariabel kaldet "besked", som ikke er andet end en pladsholder til at vise "Hello World"-meddelelsen.
  4. "Script-tagget" bruges til at referere til angular.js-scriptet, som har al den nødvendige funktionalitet til AngularJS. Uden denne reference vil AngularJS-funktioner ikke fungere, hvis vi forsøger at bruge dem.
  5. "Controller" er det sted, hvor vi rent faktisk skaber vores forretningslogik, som er vores controller. Detaljerne for hvert nøgleord vil blive forklaret i de efterfølgende kapitler. Det er vigtigt at bemærke, at vi definerer en controllermetode kaldet 'HelloWorldCtrl', som der refereres til i trin 2.
  6. Vi opretter en "funktion", som vil blive kaldt, når vores kode kalder denne controller. $scope-objektet er et specielt objekt i AngularJS, som er et globalt objekt, der bruges i AngularJS. $scope-objektet bruges til at administrere dataene mellem controlleren og viewet.
  7. Vi opretter en medlemsvariabel kaldet "message", tildeler den værdien "Hello World" og knytter medlemsvariablen til scope-objektet.

BEMÆRK: ng-controller-direktivet er et nøgleord defineret i AngularJS (Trin 2) og bruges til at definere controllere i din applikation. Her i vores applikation har vi brugt ng-controller-nøgleordet til at definere en controller ved navn 'HelloWorldCtrl'. Den faktiske logik for controlleren oprettes i (Trin 5).

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

Meddelelsen 'Hello World' vil blive vist.

Browservindue med titlen Guru99 gengivelse af overskriften Hello World fra AngularJS-scopevariablen

Sådan indlæses AngularJS: CDN eller lokal fil

Eksemplet ovenfor fungerer, fordi én linje trækker frameworket ind på siden, før browseren når slutningen af ​​​​teksten. AngularJS leveres som en enkelt JavaScriptfil, så et første program behøver ingen byggetrin og ingen pakkehåndtering. En almindelig HTML-fil åbnet i en browser er nok.

Der er to måder at hente den fil ind på.

  1. Referer til en CDN-kopi. Eksemplet peger på code.angularjs.org og fastgør version 1.6.9. Den vært serverer stadig 1.x builds, hvor den højeste er 1.8.2, mens Google Hostede biblioteker viser ikke længere AngularJS.
  2. Download en lokal kopi. Gem filen ved siden af ​​HTML-siden, og peg script-tagget mod den. En lokal kopi holder eksemplet kørende offline, hvilket er vigtigt, når en proxy blokerer CDN'et.
<!-- Option 1: reference a CDN copy -->
<script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>

<!-- Option 2: reference a downloaded copy in the same folder -->
<script src="angular.min.js"></script>

Brug angular.js mens man lærer og angular.min.js i produktion: det ikke-minimerede build udskriver en læsbar stak traces, hvorimod det minimerede build rapporterer omdøbte variabler.

Når filen er indlæst, ng-app starter frameworket. AngularJS søger efter den attribut, når dokumentet er færdigindlæst, behandler det element, der bærer den, som kompileringsroden og bootstrapper det modul, der er nævnt i dets værdi. Tre konsekvenser følger:

  • Kun den første ng-app på en side bootstrappes automatisk. En anden ignoreres, medmindre angular.bootstrap kaldes manuelt.
  • Værdien skal navngive et modul, der er registreret hos kantet.modul, ellers rapporterer konsollen [$injector:modulerr].
  • anbringelse ng-app på den html elementet, som eksemplet gør, bringer hele dokumentet under AngularJS; en smallere container fungerer også.

RELATEREDE ARTIKLER

Hvordan {{ }}-udtryk og ng-model-binding fungerer

Dobbeltbøjlerne rundt message i h1-tagget er ikke en pladsholder, der udfyldes én gang ved indlæsning. AngularJS kompilerer den tekstnode til en watcher på det omgivende rækkevidde, så det gengivne output tracks $scope.message så længe siden lever.

Cyklussen forløber i tre trin.

  1. Controlleren skriver en værdi på $scope.
  2. Et digest-gennemløb sammenligner hvert overvåget udtryk med dets forrige resultat.
  3. Hvert udtryk, hvis værdi ændres, gengives igen på stedet.

Et interpoleret udtryk er derfor ensrettet, fra omfang til visning. Tovejsbinding kræver ng-model, Direktiv designet til formularkontroller. Tilføj <input ng-model="message"> Skriv i feltet ved siden af ​​overskriften, og overskriften ændres ved hvert tastetryk, fordi ng-model skriver feltværdien tilbage til den samme scope-egenskab, som udtrykket overvåger.

Udtryk er bevidst begrænsede. De læser scope-egenskaber, kalder scope-metoder og tolererer udefinerede værdier lydløst, men de kan ikke deklarere variabler, bruge kontrolflowsætninger eller nå globale objekter som f.eks. window.

Sådan retter du en tom side eller en ikke-gengivet {{ }}

Et første AngularJS-program fejler på en af ​​to synlige måder: siden forbliver tom, eller den bogstavelige tekst {{message}} vises hvor Hello World burde være. Begge betyder, at frameworket aldrig har overtaget markup'en. Gennemgå kontrollerne nedenfor i rækkefølge med browserkonsollen åben.

  1. Bekræft at biblioteket er indlæst. Åbn netværkspanelet, og søg efter angular.js anmodning. En 404 eller et uopnåeligt CDN efterlader parenteserne på skærmen uændret.
  2. Tjek scriptstien. En relativ sti opløses i den mappe, der indeholder HTML-filen, så en kopi i en js behov for undermapper js/angular.min.js.
  3. Bekræft ng-app. En manglende eller stavet forkert attribut betyder ingenting bootstraps. Attributten er med bindestreg som ng-app i markup, selvom direktivet er indhyllet i kamelkapper JavaManuskript.
  4. Læs konsolfejlen. [$injector:modulerr] betyder, at modulet navngivet af ng-app aldrig blev registreret. [ng:areq] betyder normalt, at controllernavnet i markup'en ikke matcher det navn, der er sendt til .controller().
  5. Kig efter en anden ng-app. Kun den første bootstrappes, så en vildfaren kopi, der efterlades på et indre element, deaktiverer lydløst den del af siden.

To yderligere årsager tegner sig for de fleste af de resterende rapporter.

  • Filprotokollen. Dette eksempel på en enkelt fil kører fint, når det åbnes direkte fra disken, men enhver skabelon, der hentes via XHR, blokeres af browserens oprindelsesregler. Server mappen via HTTP, når skabelonerne vises.
  • Et kort glimt af bøjler. Når markup gengives, før frameworket kompilerer det, er det rå udtryk synligt et øjeblik. ng-cloak til elementet, eller ombyt udtrykket med ng-bind="message", som aldrig viser sin egen markup.

Hvis ingen af ​​disse gælder, skal du reducere siden til eksemplet ovenfor og tilføje din egen kode én linje ad gangen.

Ofte Stillede Spørgsmål

Enhver af de fire ovennævnte fungerer, og dette eksempel bruger WebstormFordi programmet er en enkelt statisk HTML-fil, er en almindelig teksteditor tilstrækkelig. En IDE tilføjer kun direktivfuldførelse, live reload og integreret fejlfinding.

$scope er det bindende objekt, der deles mellem en controller og dens visning. Hvis du skriver $scope.message i HelloWorldCtrl, bliver denne egenskab synlig for det udtryk, der er placeret på h1-elementet.

Begge filer indeholder det samme framework. angular.js er ikke-minificeret, så fejl peger på en læsbar kildekode. angular.min.js er komprimeret til produktion og kræver eksplicit afhængighedsannotation, fordi minificeringen omdøber de parameternavne, som AngularJS ellers inspicerer.

AngularJS er det 1.x framework, der vises her, drevet af direktiver, $scope og plain JavaScript. Angular, som betyder version 2 og nyere, er en separat TypeScript rammeværk bygget på komponenter og er den aktivt vedligeholdte linje.

Primært til vedligeholdelse af eksisterende 1.x-applikationer, som fortsat er udbredte. Ordforrådet for binding, direktiver og afhængighedsindsprøjtning overførsler, men supporten sluttede i januar 2022, så nye projekter hører hjemme i moderne Angular.

Ja. Registrer hver enkelt med .controller() på det samme modul, og tilslut dem til forskellige elementer ved hjælp af ng-controller. Hver enkelt får sit eget underordnede scope, så identisk navngivne egenskaber forbliver uafhængige.

Moderne assistenter læser en 1.x kodebase og producerer en oversigt over direktiver, filtre og tjenester med foreslåede komponent- og tjenesteækvivalenter. Denne oversigt er nyttig for scoping arbejdet, selvom hvert kortping kræver stadig manuel verificering.

GitHub Copilot fuldfører controller-standardteksten, $scope-tildelinger og ng-indsende handlers fra en kort kommentar, men dens træning hælder mod moderne Angular, så tjek at forslagene virkelig bruger 1.x-syntaks.

Opsummer dette indlæg med: