Tutoriel d'introduction à AngularJS Hello World!_AngularJS

Une excellente façon de commencer à apprendre AngularJS est de créer l'application classique "Hello World!" :

1. À l'aide de votre éditeur de texte préféré, créez un fichier HTML, par exemple : helloworld.html.
2. Copiez le code source ci-dessous dans votre fichier HTML.
3. Ouvrez ce fichier HTML dans un navigateur Web.

Code source :

Copier le code Le code est le suivant :

            


Bonjour {{'Monde'}} !

Veuillez exécuter le code ci-dessus dans votre navigateur pour voir l'effet.

Regardons maintenant de plus près le code et voyons ce qui se passe. Lorsque la page se charge, la balise ng-app indique à AngularJS de traiter l'intégralité de la page HTML et de démarrer l'application :

Copier le code Le code est le suivant :

Cette ligne charge le script AngularJS :

Copier le code Le code est le suivant :

(Pour plus de détails sur la façon dont AngularJS gère l'intégralité de la page HTML, voir Bootstrap.)

Enfin, le corps du texte dans la balise est le modèle appliqué pour afficher notre message d'accueil dans l'interface utilisateur :

Copier le code Le code est le suivant :

Bonjour {{'Monde'}} !

Notez que le contenu marqué par des doubles accolades {{}} est l'expression liée dans le message d'accueil. Cette expression est une simple chaîne 'Monde'.

Ensuite, regardons un exemple plus intéressant : utiliser AngularJS pour lier une expression dynamique à notre texte de salutation.

Bonjour le monde AngularJS !

Cet exemple illustre la liaison de données bidirectionnelle dans AngularJS :

1. Modifiez le document helloworld.html créé précédemment.
2. Copiez le code source ci-dessous dans votre fichier HTML.
3. Actualisez la fenêtre du navigateur.

Code source :

Copier le code Le code est le suivant :

            


Votre nom :
                                                                                    Bonjour {{votrenom || 'Monde'}} !

Veuillez exécuter le code ci-dessus dans votre navigateur pour voir l'effet.

Il y a quelques points importants à noter à propos de cet exemple :

1. La commande de saisie de texte est liée à une variable de modèle appelée yourname.
2. La balise double accolade ajoute la variable de modèle de votre nom au texte de salutation.
3. Vous n'avez pas besoin d'enregistrer un écouteur d'événement supplémentaire ou d'ajouter un gestionnaire d'événements pour cette application !

Essayez maintenant de saisir votre nom dans la zone de saisie, le nom que vous saisissez sera immédiatement mis à jour et affiché dans le message d'accueil. C'est le concept de liaison de données bidirectionnelle dans AngularJS. Toute modification apportée à la zone de saisie est immédiatement reflétée dans les variables du modèle (dans un sens), et toute modification apportée aux variables du modèle est immédiatement reflétée dans le texte de bienvenue (dans l'autre sens).

Analyse des applications AngularJS

Cette section décrit les trois composants d'une application AngularJS et explique comment ils correspondent au modèle de conception Model-View-Controller :

Modèles

Les modèles sont des fichiers que vous écrivez en HTML et CSS qui représentent les vues de votre application. Vous pouvez ajouter de nouveaux éléments et balises d'attribut au HTML en tant qu'instructions pour le compilateur AngularJS. Le compilateur AngularJS est entièrement extensible, ce qui signifie qu'avec AngularJS vous pouvez créer votre propre balisage HTML en HTML !

Logique applicative (Logique) et comportement (Comportement)

La logique et le comportement des applications sont des contrôleurs que vous définissez en JavaScript. AngularJS est différent des applications AJAX standard dans la mesure où vous n'avez pas besoin d'écrire des écouteurs ou des contrôleurs DOM supplémentaires car ils sont déjà intégrés à AngularJS. Ces fonctionnalités rendent la logique de votre application facile à écrire, tester, maintenir et comprendre.

Données du modèle (Données)

Les modèles sont dérivés des propriétés des objets de portée AngularJS. Les données du modèle peuvent être des objets Javascript, des tableaux ou des types primitifs. L'important est qu'ils appartiennent tous à des objets de portée AngularJS.

AngularJS utilise la portée pour maintenir une synchronisation bidirectionnelle entre le modèle de données et l'interface utilisateur de l'interface d'affichage. Une fois l'état du modèle modifié, AngularJS actualisera immédiatement l'interface d'affichage et vice versa.

De plus, AngularJS fournit également des fonctionnalités de service très utiles :

1. Les services sous-jacents incluent les services d'injection de dépendances, de XHR, de mise en cache, de routage d'URL et d'abstraction du navigateur.
2. Vous pouvez également étendre et ajouter vos propres services d'application spécifiques.
3. Ces services vous permettent d'écrire des applications WEB très facilement.