Tutoriel d'introduction à AngularJS Hello World!_AngularJS

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.