AngularJS - Bonjour tout le monde

Table des matières

Bonjour le monde classique


Généralement, lorsque nous apprenons à utiliser une nouvelle langue, la première chose que nous faisons est de créer un petit programme qui imprime le classique pour nous. "Salut monde"Bien que cela puisse ne pas être d'une utilité réelle dans une application, cela a plusieurs implications. Il nous apprend à démarrer la langue et nous donne un moyen de vérifier que tout fonctionne correctement.
Dans cette section, nous verrons comment effectuer un Salut monde, en plus de visualiser et d'examiner les concepts associés qui nous permettent de créer des applications dans AngularJS.
Dans AngularJS Le modèle est côté client, donc les données parviennent à notre application et c'est précisément dans cette zone qu'elles sont organisées et préparées pour sa consommation par l'utilisateur; en appliquant ce concept à une application d'une seule page et en utilisant AJAX nous pourrons atteindre le dynamisme sans que l'utilisateur ait besoin de recharger le Web où il navigue.
Pour effectuer un simple Salut monde Et sachant ce qui précède, voyons ce dont nous avons besoin pour atteindre notre objectif :
  • Nous avons besoin d'un HTML base où nous incluons deux fichiers. Le premier sera le AngularJS et le second est un script personnalisé où ira notre logique de traitement.
  • Dans le HTML vous devez définir le bloc où AngularJS va avoir une influence, c'est-à-dire là où nous allons placer l'étiquette ng-app.
  • Dans notre script personnalisé, nous devons créer un contrôleur AngularJS pour transmettre le texte à notre application.
Une fois que nous savons ce dont nous avons besoin, nous devons construire le code correspondant, voyons dans l'image suivante comment nous l'avons fait :

AGRANDIR

Nous voyons que nous avons inclus AngularJS depuis le CDN Google de cette façon, nous n'avons pas à télécharger les fichiers dans notre projet pour le moment, alors au lieu d'inclure un script personnalisé, nous avons écrit les instructions dont nous avons besoin, nous le faisons à titre de démonstration, il est toujours bon de séparer les code afin qu'il soit plus facile à manipuler.
Déjà l'étiquette HTML a la propriété ng-app Ce qui signifie que AngularJS a le document entier comme portée et nous faisons un div où nous plaçons un ng-contrôleur qui est un contrôleur AngularJS.
ImportantTout ce que notre contrôleur fera est d'imprimer le mot Salut à côté du mot Monde que nous avons déjà écrit précédemment, nous soulignons comment AngularJS n'a besoin de rien de plus que de définir le variable de contexte et il nous fait automatiquement les liens correspondants.
Voyons maintenant à quoi tout cela ressemble dans le navigateur, nous avons ouvert le console Firebug pour montrer ce qui s'est passé lorsque nous avons lancé notre application :

AGRANDIR

On peut alors remarquer comment AngularJS au moment du chargement du document vous avez placé le mot Salut dans notre div et de cette façon l'application fonctionnerait.
Comme nous le voyons, nous avons créé notre Salut monde et on a un peu mieux compris comment ça marche AngularJS Et ce que l'on veut dire quand on parle du template étant dans le client, imaginons que le mot soit des données qui viennent d'un service web, ici on voit comment cela prend une nouvelle dimension puisque nous pourrions générer plus de dynamisme dans nos applications.
Précédentpage 1 sur 2ProchainAvez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif

Vous contribuerez au développement du site, partager la page avec vos amis

wave wave wave wave wave