AngularJS - Hallo wereld

Inhoudsopgave

Hallo klassieke wereld


Wanneer we een nieuwe taal leren gebruiken, is het eerste dat we doen een klein programma maken dat de klassieke voor ons afdrukt. "Hallo Wereld"Hoewel dit in een toepassing misschien niet echt nuttig is, heeft het verschillende implicaties. Het leert ons de taal te starten en geeft ons een manier om te controleren of alles correct werkt.
In deze sectie zullen we zien hoe u een Hallo Wereld, daarnaast het bekijken en beoordelen van bijbehorende concepten waarmee we applicaties kunnen bouwen in AngularJS.
In AngularJS Het sjabloon bevindt zich aan de kant van de klant, daarom bereiken de gegevens onze applicatie en het is precies in dit gebied dat het wordt georganiseerd en voorbereid voor gebruik door de gebruiker; bij het toepassen van dit concept op een toepassing met één pagina en het gebruik van AJAX we zullen dynamiek kunnen bereiken zonder dat de gebruiker het web opnieuw hoeft te laden waar hij bladert.
Om een ​​eenvoudige . uit te voeren Hallo Wereld En als we het bovenstaande weten, laten we eens kijken wat we nodig hebben om ons doel te bereiken:
  • We hebben een … nodig HTML base waar we twee bestanden opnemen. De eerste wordt de AngularJS en de tweede is een aangepast script waar onze verwerkingslogica naartoe gaat.
  • Binnenkant van de HTML je moet het blok definiëren waar AngularJS gaat invloed hebben, dat wil zeggen, waar we het label gaan plaatsen ng-app.
  • In ons aangepaste script moeten we een controller maken AngularJS om de tekst door te geven aan onze applicatie.
Zodra we weten wat we nodig hebben, moeten we de bijbehorende code bouwen, laten we in de volgende afbeelding zien hoe we het hebben gedaan:

VERGROTEN

We zien dat we hebben opgenomen AngularJS van de Google CDN op deze manier hoeven we de bestanden op dit moment niet naar ons project te downloaden. In plaats van een aangepast script op te nemen, hebben we de instructies geschreven die we nodig hebben, we doen dit als een demonstratie, het is altijd goed om de code, zodat het gemakkelijker te hanteren is.
Al het label HTML heeft de eigenschap ng-app wat betekent dat AngularJS heeft het hele document als scope en we maken een div waar we a . plaatsen ng-controller wat is een controller AngularJS.
BelangrijkHet enige dat onze controller zal doen, is het woord afdrukken Hallo naast het woord Wereld dat we al eerder hebben geschreven, we benadrukken hoe AngularJS heeft niet meer nodig dan is dat we de . definiëren contextvariabele en hij maakt automatisch de bijbehorende links naar ons.
Laten we nu eens kijken hoe dit er allemaal uitziet in de browser, we hebben de firebug-console om te laten zien wat er gebeurde toen we onze applicatie startten:

VERGROTEN

We kunnen dan merken hoe AngularJS op het moment dat u het document laadt, heeft u het woord geplaatst Hallo in onze div en op deze manier zou de applicatie werken.
Zoals we zien hebben we onze Hallo Wereld en we hebben een beetje meer begrepen hoe het werkt AngularJS En wat we bedoelen als we het hebben over de sjabloon in de client, laten we ons voorstellen dat het woord gegevens is die afkomstig zijn van een webservice, hier zien we hoe het een nieuwe dimensie krijgt, omdat we meer dynamiek in onze applicaties zouden kunnen genereren.
Vorigpagina 1 van 2VolgendeVond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven
wave wave wave wave wave