AngularJS Hello World: Je eerste voorbeeldprogramma

Door: James Hartman James Hartman
Hours Bijgewerkt

⚡ Slimme samenvatting

AngularJS Hello World-programma's hebben slechts één HTML-bestand, één scriptreferentie en twee directives nodig, ng-app en ng-controller, om een ​​variabele uit de controllerscope via een expressie met dubbele accolades aan de pagina te koppelen.

  • 🔘 ng-app: Het ng-app-attribuut markeert het root-element en initialiseert automatisch de benoemde AngularJS-module.
  • ☑️ ng-controller: ng-controller koppelt HelloWorldCtrl aan het h1-element, waardoor de controller-scope daar beschikbaar komt.
  • ✅ Bereikbinding: Door `$scope.message` toe te wijzen in de controller, wordt de expressie `{{message}}` die in de weergave wordt getoond, gebruikt.
  • 🧪 Enkelvoudige rij: Eén HTML-bestand en één scriptverwijzing volstaan ​​om het voorbeeld uit te voeren, zonder dat er een compilatiestap nodig is.
  • ️ Probleemoplossen: Letterlijke accolades op het scherm betekenen bijna altijd dat de bibliotheek niet is geladen of dat ng-app ontbreekt.
  • 📊 Versie-opmerking: De ondersteuning voor AngularJS eindigde in januari 2022, met versie 1.8.3 als laatste release; nieuwe ontwikkelingen horen thuis in Angular.
Meer informatie

AngularJS Hello World eerste voorbeeldprogramma met ng-app en ng-controller

De beste manier om de kracht van een AngularJS-applicatie te ervaren, is door je eerste eenvoudige programma, een "Hello World"-app, in AngularJS te maken.

Er zijn veel geïntegreerde ontwikkelomgevingen die je kunt gebruiken voor angularjs Voor de ontwikkeling worden hieronder enkele populaire voorbeelden genoemd. In ons voorbeeld gebruiken we Webstorm als onze IDE.

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

Hallo wereld, AngularJS

Versie-opmerking: AngularJS 1.x heeft op 31 december 2021 de Long Term Support-status verlaten, en het frameworkteam bevestigt dat De ondersteuning voor AngularJS is officieel beëindigd. In januari 2022, met versie 1.8.3 als laatste release en daarna geen beveiligingspatches meer. Elke stap en elk codeblok hieronder is exact overgenomen zoals het geschreven is. Nieuwe projecten horen thuis in het moderne Angular, waar dezelfde oefening begint met... ng serve en een zelfstandig onderdeel en gebruikt nog steeds dezelfde {{ }} interpolatiesyntaxis.

Het onderstaande voorbeeld toont de eenvoudigste manier om uw eerste “Hello world”-applicatie in AngularJS te maken.

De onderstaande schermafbeelding met annotaties toont de labels van elk onderdeel van dat bestand, en de zeven getallen komen overeen met de Code Uitleglijst hieronder. Deze is vastgelegd met een eerdere build van versie 1.4.0, waardoor de scriptregel afwijkt van de versie die in de code is vastgelegd.

Geannoteerd AngularJS Hello World HTML-bestand met zeven genummerde verwijzingen naar ng-app, ng-controller, de scriptreferentie en de scope-variabele.

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

  1. De "ng-appHet sleutelwoord "" wordt gebruikt om aan te geven dat deze applicatie als een AngularJS-applicatie moet worden beschouwd. Elke gewenste naam kan aan deze applicatie worden gegeven.
  2. De controller bevat de bedrijfslogica. In de h1-tag willen we toegang krijgen tot de controleur, die de logica bevat om "Hello World" weer te geven, dus we kunnen zeggen dat we in deze tag toegang willen krijgen tot de controller met de naam "HelloWorldCtrl".
  3. We gebruiken een lidvariabele genaamd "bericht", die niets anders is dan een tijdelijke aanduiding om het bericht "Hallo wereld" weer te geven.
  4. De "script tag" wordt gebruikt om te verwijzen naar het angular.js-script dat alle benodigde functionaliteit voor AngularJS bevat. Zonder deze verwijzing zullen AngularJS-functies niet werken.
  5. "Controller" is de plek waar we onze bedrijfslogica daadwerkelijk creëren, oftewel onze controller. De specifieke betekenis van elk trefwoord wordt in de volgende hoofdstukken uitgelegd. Belangrijk om te weten is dat we een controllermethode definiëren met de naam 'HelloWorldCtrl', waarnaar in stap 2 wordt verwezen.
  6. We maken een functie aan die wordt aangeroepen wanneer onze code deze controller aanroept. Het `$scope`-object is een speciaal object in AngularJS, een globaal object dat binnen AngularJS wordt gebruikt. Het `$scope`-object wordt gebruikt om de gegevensuitwisseling tussen de controller en de view te beheren.
  7. We maken een lidvariabele aan met de naam "message", kennen er de waarde "Hello World" aan toe en koppelen de lidvariabele aan het scope-object.

NOTITIE: De ng-controller-richtlijn is een trefwoord dat is gedefinieerd in angularjs (Stap 2) en wordt gebruikt om controllers in uw applicatie te definiëren. In onze applicatie hebben we het trefwoord ng-controller gebruikt om een ​​controller met de naam 'HelloWorldCtrl' te definiëren. De daadwerkelijke logica voor de controller wordt in (Stap 5) gemaakt.

Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Output:

Het bericht 'Hallo wereld' wordt weergegeven.

Browservenster met de titel Guru99 Het weergeven van de koptekst "Hello World" vanuit de AngularJS-scopevariabele

Hoe laad je AngularJS: via CDN of vanuit een lokaal bestand?

Het bovenstaande voorbeeld werkt omdat één regel code het framework in de pagina laadt voordat de browser het einde van de body bereikt. AngularJS wordt geleverd als één enkel pakket. JavaScriptbestand, dus een eerste programma heeft geen compilatiestap en geen pakketbeheerder nodig. Een eenvoudig HTML-bestand dat in een browser wordt geopend, is voldoende.

Er zijn twee manieren om dat bestand te importeren.

  1. Raadpleeg een CDN-kopie. Het voorbeeld wijst op code.angularjs.org en pins versie 1.6.9. Die host biedt nog steeds 1.x-builds aan, waarvan 1.8.2 de hoogste is, terwijl Google Hosted Libraries biedt AngularJS niet langer aan.
  2. Download een lokale kopie. Sla het bestand op naast de HTML-pagina en laat de scripttag ernaar verwijzen. Een lokale kopie zorgt ervoor dat het voorbeeld ook offline blijft werken, wat handig is als een proxy de CDN blokkeert.
<!-- 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>

Gebruik angular.js tijdens het leren en angular.min.js In productie: de niet-geminificeerde build print een leesbare stacktrace. traces, terwijl de geminificeerde versie hernoemde variabelen rapporteert.

Zodra het bestand is geladen, ng-app Het framework start. AngularJS zoekt naar dat attribuut zodra het document volledig is geladen, beschouwt het element dat het bevat als de compilatieroot en bootstrapt de module die in de waarde ervan wordt genoemd. Dit heeft drie gevolgen:

  • Alleen de eerste ng-app Een pagina wordt automatisch opgestart. Een tweede pagina wordt genegeerd, tenzij... angular.bootstrap wordt handmatig aangeroepen.
  • De waarde moet de naam zijn van een module die is geregistreerd bij hoekige.moduleanders meldt de console [$injector:modulerr].
  • plaatsing ng-app aan de html Het `element`, zoals in het voorbeeld, brengt het hele document onder AngularJS; een smallere container werkt ook.

GERELATEERDE ARTIKELEN

Hoe {{ }}-expressies en ng-model-binding werken

De dubbele verstevigingen rondom message De tekst in de h1-tag is geen placeholder die eenmalig wordt ingevuld tijdens het laden. AngularJS compileert die tekstnode tot een watcher op de omringende tekst. omvang, dus de weergegeven uitvoer tracks $scope.message zolang de pagina bestaat.

De cyclus bestaat uit drie stappen.

  1. De controller schrijft een waarde naar $scope.
  2. Een digest pass vergelijkt elke bekeken expressie met het vorige resultaat.
  3. Elke expressie waarvan de waarde is gewijzigd, wordt ter plaatse opnieuw weergegeven.

Een geïnterpoleerde expressie is daarom eenrichtingsverkeer, van bereik naar weergave. Tweewegbinding vereist ng-model Richtlijnen Ontworpen voor formulierbesturingselementen. Toevoegen <input ng-model="message"> Typ naast de koptekst in het vak, en de koptekst verandert bij elke toetsaanslag, omdat ng-model de veldwaarde terugschrijft naar dezelfde scope-eigenschap die de expressie observeert.

Expressies zijn bewust beperkt. Ze lezen eigenschappen binnen een bepaald bereik, roepen methoden binnen een bepaald bereik aan en tolereren ongedefinieerde waarden stilzwijgend, maar ze kunnen geen variabelen declareren, controlestructuren gebruiken of globale objecten zoals ... bereiken. window.

Hoe los ik een lege pagina of een niet-weergegeven {{ }} op?

Een eerste AngularJS-programma faalt op een van de twee zichtbare manieren: de pagina blijft blanco, of de letterlijke tekst {{message}} verschijnt waar 'Hello World' zou moeten staan. Beide meldingen betekenen dat het framework de markup nooit heeft overgenomen. Doorloop de onderstaande controles in de juiste volgorde, met de browserconsole geopend.

  1. Controleer of de bibliotheek is geladen. Open het paneel Netwerk en zoek naar de angular.js verzoek. Een 404-fout of een onbereikbare CDN laat de haakjes op het scherm ongewijzigd.
  2. Controleer het scriptpad. Een relatief pad verwijst naar de map waarin het HTML-bestand zich bevindt, dus een kopie in een js submap vereist js/angular.min.js.
  3. Verifieer ng-app. Een ontbrekend of verkeerd gespeld attribuut betekent niets voor Bootstrap. Het attribuut wordt met een koppelteken geschreven als ng-app in de markup, ook al is de instructie in camelcase geschreven. JavaScript.
  4. Lees de foutmelding in de console. [$injector:modulerr] Dit betekent dat de module die door ng-app wordt genoemd, nooit is geregistreerd. [ng:areq] Dit betekent meestal dat de controllernaam in de markup niet overeenkomt met de naam die is doorgegeven aan de controller. .controller().
  5. Zoek naar een tweede ng-app. Alleen de eerste wordt gebootstrapt, dus een onbedoelde kopie die op een intern element achterblijft, schakelt dat deel van de pagina stilletjes uit.

Twee andere oorzaken verklaren het grootste deel van de overige meldingen.

  • Het bestandsprotocol. Dit voorbeeld met één bestand werkt prima wanneer het direct vanaf de schijf wordt geopend, maar sjablonen die via XHR worden opgehaald, worden geblokkeerd door de regels voor de oorsprong van de browser. Zodra de sjablonen beschikbaar zijn, moet u de map via HTTP aanbieden.
  • Een korte glimp van een beugel. Wanneer de markup wordt weergegeven voordat het framework deze compileert, is de onbewerkte expressie even zichtbaar. ng-cloak naar het element, of vervang de uitdrukking door ng-bind="message", die nooit zijn eigen opmaak weergeeft.

Als geen van deze opties van toepassing is, reduceer de pagina dan tot het bovenstaande voorbeeld en voeg uw eigen code regel voor regel toe.

Veelgestelde vragen

Elk van de vier hierboven genoemde opties werkt, en in dit voorbeeld wordt die gebruikt. WebstormOmdat het programma uit één statisch HTML-bestand bestaat, is een eenvoudige teksteditor voldoende. Een IDE voegt alleen functies toe zoals automatisch aanvullen van instructies, live herladen en geïntegreerde debugging.

$scope is het bindingsobject dat gedeeld wordt tussen een controleur en de weergave ervan. Door `$scope.message` in `HelloWorldCtrl` te schrijven, wordt die eigenschap zichtbaar voor de expressie die op het `h1`-element is geplaatst.

Beide bestanden bevatten hetzelfde framework. angular.js is niet geminificeerd, dus fouten verwijzen naar de leesbare broncode. angular.min.js is gecomprimeerd voor productie en vereist expliciete afhankelijkheidsannotatie, omdat minificatie de parameternamen hernoemt die AngularJS anders inspecteert.

AngularJS is het 1.x framework dat hier wordt getoond, gebaseerd op directives, $scope en eenvoudige code. JavaScript. Angular, oftewel versie 2 en later, is een aparte taal. TypeScript Het framework is gebouwd op componenten en is de lijn die actief wordt onderhouden.

Vooral bedoeld voor het onderhouden van bestaande 1.x-applicaties, die nog steeds wijdverspreid zijn. De terminologie van bindingen, richtlijnen en afhankelijkheidsinjectie Overdrachten, maar de ondersteuning eindigde in januari 2022, dus nieuwe projecten horen thuis in het moderne Angular.

Ja. Registreer ze elk met `.controller()` in dezelfde module en koppel ze aan verschillende elementen met `ng-controller`. Elk krijgt zijn eigen subbereik, zodat eigenschappen met dezelfde naam onafhankelijk van elkaar blijven.

Moderne assistenten lezen een 1.x-codebasis en genereren een inventaris van richtlijnen, filters en services met voorgestelde equivalente componenten en services. Die inventaris is nuttig voor sco.ping het werk, hoewel elke kaartping Handmatige verificatie is nog steeds nodig.

GitHub-copiloot voltooit de standaard controller-code, $scope-toewijzingen en ng-verzenden De suggesties komen uit een korte opmerking, maar de training is meer gericht op modern Angular, dus controleer of de suggesties daadwerkelijk de 1.x-syntaxis gebruiken.

Vat dit bericht samen met: