De beste manier om de kracht van een AngularJS-applicatie te zien, is door uw eerste basisprogramma "Hello World" -app in Angular.JS te maken.
Er zijn veel geïntegreerde ontwikkelomgevingen die u kunt gebruiken voor AngularJS-ontwikkeling, enkele van de populaire worden hieronder vermeld. In ons voorbeeld gebruiken we Webstorm als onze IDE.
- Webstorm
- Sublieme tekst
- AngularJS Eclipse
- Visuele studio
Hallo wereld, AngularJS
Het onderstaande voorbeeld toont de gemakkelijkste manier om uw eerste "Hallo wereld" -toepassing in AngularJS te maken.
Guru99 {{message}}
Code Verklaring:
- Het sleutelwoord " ng-app " wordt gebruikt om aan te geven dat deze applicatie moet worden beschouwd als een hoekige js-applicatie. Aan deze applicatie kan elke naam worden gegeven.
- De controller is wat wordt gebruikt om de bedrijfslogica vast te houden. In de h1-tag willen we toegang krijgen tot de controller, die de logica heeft om "HelloWorld" weer te geven, dus we kunnen zeggen dat we in deze tag toegang willen hebben tot de controller met de naam "HelloWorldCtrl".
- We gebruiken een lidvariabele genaamd "message" die niets anders is dan een tijdelijke aanduiding om het "Hello World" -bericht weer te geven.
- De "script-tag" wordt gebruikt om te verwijzen naar het angular.js-script dat alle noodzakelijke functionaliteit heeft voor angular js. Als we zonder deze referentie AngularJS-functies proberen te gebruiken, zullen ze niet werken.
- "Controller" is de plaats waar we feitelijk onze bedrijfslogica creëren, dat is onze controller. De specifieke kenmerken van elk trefwoord zullen in de volgende hoofdstukken worden uitgelegd. Het is belangrijk om op te merken dat we een controllermethode definiëren met de naam 'HelloWorldCtrl' waarnaar wordt verwezen in stap 2.
- We creëren een "functie" die zal worden aangeroepen wanneer onze code deze controller aanroept. Het $ scope-object is een speciaal object in AngularJS, een globaal object dat wordt gebruikt in Angular.js. Het $ scope-object wordt gebruikt om de gegevens tussen de controller en de weergave te beheren.
- We maken een lidvariabele genaamd "message", kennen hier de waarde "HelloWorld" aan toe en koppelen de lidvariabele aan het scope-object.
OPMERKING : De ng-controller-richtlijn is een trefwoord dat is gedefinieerd in AngularJS (stap # 2) en wordt gebruikt om controllers in uw toepassing te definiëren. Hier in onze applicatie hebben we het sleutelwoord ng-controller gebruikt om een controller met de naam 'HelloWorldCtrl' te definiëren. De feitelijke logica voor de controller wordt gemaakt in (stap # 5).
Als de opdracht met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Uitgang:
Het bericht 'Hallo wereld' wordt weergegeven.
