Qu'est-ce qu'AngularJS ? Introduction à AngularJS_AngularJS

Qu'est-ce qu'AngularJS ?

AngularJS est un framework structurel conçu pour les applications WEB dynamiques. Il vous permet d'utiliser HTML comme langage de modèle et, en étendant la syntaxe HTML, vous pouvez créer les composants de votre application de manière plus claire et plus concise. Son innovation réside dans le fait qu’en utilisant la liaison de données et l’injection de dépendances, il vous évite d’écrire beaucoup de code. Tout cela est implémenté via Javascript côté navigateur, ce qui le rend également parfaitement intégré à toute technologie côté serveur.

AngularJS est conçu pour surmonter les lacunes du HTML dans la création d'applications. HTML est un bon langage déclaratif conçu pour l'affichage de texte statique, mais il est faible lorsqu'il s'agit de créer des applications WEB. J'ai donc fait quelques travaux (des astuces si vous voulez) pour que le navigateur fasse ce que je voulais. formatDate

Habituellement, nous utilisons les technologies suivantes pour résoudre les lacunes de la technologie des pages Web statiques dans la création d'applications dynamiques :

1. Bibliothèque de classes - Une bibliothèque de classes est un ensemble de fonctions qui peuvent vous aider à écrire des applications WEB. C'est votre code qui prend le contrôle et c'est vous qui décidez quand utiliser la bibliothèque. Les bibliothèques de classes incluent : jQuery, etc.

2. Framework - Un framework est une application WEB spéciale déjà implémentée. Il vous suffit de la remplir avec une logique métier spécifique. Le framework joue ici un rôle de premier plan, appelant votre code selon une logique d'application spécifique. Les frameworks incluent : knockout, sproutcore, etc.

AngularJS utilise une approche différente, essayant de compenser les lacunes du HTML lui-même dans la création d'applications. AngularJS permet aux navigateurs de reconnaître la nouvelle syntaxe en utilisant des structures que nous appelons directives. Par exemple :

1. Utilisez la syntaxe double accolades {{}} pour la liaison de données
2. Utilisez les structures de contrôle DOM pour parcourir ou masquer les fragments DOM
; 3. Formulaires de support et validation des formulaires
4. Possibilité d'associer des codes logiques aux éléments DOM pertinents
5. Possibilité de regrouper le HTML en composants réutilisables.

Solution de bout en bout

AngularJS tente d'être une solution de bout en bout pour les applications WEB. Cela signifie qu’il ne s’agit pas seulement d’une petite partie de votre application WEB, mais d’une solution complète de bout en bout. Cela rendra AngularJS très « opiniâtre » (le texte original est opiniâtre, ce qui signifie qu'il n'y a pas beaucoup d'autres moyens) lors de la création d'une application CRUD (ajouter Créer, interroger Récupérer, mettre à jour Mettre à jour, supprimer Supprimer). Cependant, même s'il est « têtu », il garantit toujours que son « entêtement » n'est qu'au point de départ lorsque vous créez l'application, et que vous avez toujours la flexibilité de changer. Certaines des fonctionnalités exceptionnelles d'AngularJS sont les suivantes :

1. Tout ce qui peut être utilisé pour créer une application CRUD comprend : la liaison de données, les identifiants de modèle de base, la validation de formulaire, le routage, les liens profonds, la réutilisation de composants et l'injection de dépendances.
2. Les tests comprennent : les tests unitaires, les tests de bout en bout, la simulation et le cadre de tests automatisés.
3. Seed application avec une disposition de répertoire et des scripts de test comme point de départ.

La gentillesse d'AngularJS

AngularJS simplifie le développement d'applications en présentant aux développeurs un niveau d'abstraction plus élevé. Comme pour d’autres techniques d’abstraction, une certaine flexibilité est perdue. En d’autres termes, toutes les applications ne sont pas adaptées à AngularJS. La principale préoccupation d'AngularJS est de créer des applications CRUD. Heureusement, au moins 90 % des applications WEB sont des applications CRUD. Mais pour comprendre ce qui convient à la construction avec AngularJS, vous devez comprendre ce qui ne convient pas à la construction avec AngularJS.

Par exemple, les jeux, les éditeurs d'interface graphique, les applications avec des opérations DOM fréquentes et complexes sont très différents des applications CRUD, et ils ne conviennent pas pour être construits avec AngularJS. Dans des situations comme celle-ci, il serait peut-être préférable d'utiliser une technologie plus légère et plus simple comme jQuery.

Un exemple simple d'AngularJS

Ce qui suit est une application CRUD typique contenant un formulaire. La valeur du formulaire est d'abord validée, puis utilisée pour calculer la valeur totale, qui est formatée dans un style local. Voici quelques concepts courants parmi les développeurs que vous devez d'abord comprendre :

1. Associer le modèle de données (data-model) à la vue (UI) ; 2. Écrivez, lisez et vérifiez les entrées de l'utilisateur
3. Calculer de nouvelles valeurs selon le modèle
4. Localisez le format de sortie.

index.html :

Copier le code Le code est le suivant :

   
       
       
   
   
       

            Facture :
           

           

           
                QuantitéCoût
               
                   
                   
               
           
           

---

            Total : {{quantité * coût | devise}}
       

   

script.js :

复制代码 代码如下 :

fonction InvoiceCntl ($ scope) {
    $scope.qty = 1;
    $scope.cost = 19,95;
>

test de bout en bout :

复制代码 代码如下 :

it('devrait afficher une liaison angulaire', function() {
    expect(binding('qty * cost')).toEqual('$19.95');
    input('qté').enter('2');
    input('coût').enter('5.00');
    expect(binding('qty * cost')).toEqual('$10.00');
});
function InvoiceCntl($scope){$scope.qty = 1;$scope.cost = 19.95;}

运行效果：

复制代码 代码如下 :

Facture :
Quantité  Coût
Total : {{quantité * coût | devise}}

试一下上面这个例子，然后我们一起来看下这个例子的工作原理。 在``标签里, 我们用一个`ng, -app`标识符标明这是一个AngularJS应用。这个`ng-app` Il s'agit d'AngularJS**自动初始化**(auto initialize). .min.js">
Le modèle ng-model, AngularJS est également disponible en anglais.的数据验证：

复制代码 代码如下 :

Quantité :
Coût :

Le widget de cette zone de saisie a l'air très ordinaire, mais si vous réalisez les points suivants, il sera extraordinaire :

1. Lorsque la page est chargée, AngularJS générera des variables du même nom en fonction du nom du modèle (quantité, coût) déclaré dans le widget. Vous pouvez considérer ces variables comme M (Modèle) dans le modèle de conception MVC

 ;

2. Notez que l'entrée dans le widget ci-dessus a des capacités spéciales. Si vous n'avez pas saisi de données ou si les données saisies ne sont pas valides, la zone de saisie deviendra automatiquement rouge. Cette nouvelle fonctionnalité de la zone de saisie permet aux développeurs d'implémenter plus facilement des fonctions de validation de champ communes dans les applications CRUD.

Enfin, nous pouvons jeter un œil aux mystérieuses doubles accolades {{}} :

Copier le code Le code est le suivant :

Total : {{quantité * coût devise}}

Cette balise {{expression}} est une liaison de données AngularJS. L'expression peut être une combinaison d'expression et de filtre ({{ expression | filter }}). AngularJS fournit des filtres pour formater les données d'entrée et de sortie.

Dans l'exemple ci-dessus, l'expression dans {{}} indique à AngularJS de multiplier les données obtenues à partir de la zone de saisie, puis de formater le résultat de la multiplication dans le style de devise locale, puis de l'afficher sur la page.

Il convient de mentionner que nous n'avons appelé aucune méthode AngularJS ni écrit de logique spécifique comme l'utilisation d'un framework, nous avons simplement complété les fonctions ci-dessus. La raison derrière cette implémentation est que le navigateur a fait plus de travail qu'auparavant pour générer des pages statiques, afin de pouvoir répondre aux besoins des applications WEB dynamiques. AngularJS abaisse le seuil de développement d'applications WEB dynamiques au point où aucune bibliothèque de classes ou framework n'est requis.

« Zen Tao (Concept) » d'AngularJS

Angular estime que lors de la création d'une vue (UI) et de l'écriture simultanée d'une logique logicielle, le code déclaratif est bien meilleur que le code impératif, bien que le code impératif soit très approprié pour exprimer la logique métier.

1. Le découplage des opérations DOM et de la logique d'application est une très bonne idée, qui peut grandement améliorer l'ajustabilité du code ; 2. C'est une très, très bonne idée de traiter les tests et le développement sur un pied d'égalité. La difficulté des tests dépend dans une large mesure de la structure du code ; 3. Le découplage du client et du serveur est une pratique particulièrement bonne, qui permet un développement parallèle des deux côtés et permet la réutilisation du code des deux côtés
 ; 4. Si le framework peut guider les développeurs tout au long du processus de développement : de la conception de l'interface utilisateur à l'écriture de la logique métier, en passant par les tests, il sera d'une grande aide pour les développeurs
 ; 5. Il est toujours bon de « réduire la complexité à la simplicité et réduire la complexité à néant ».

AngularJS peut vous libérer des cauchemars suivants :

1. Utilisez des rappels : l'utilisation de rappels perturbera la lisibilité de votre code et rendra votre code fragmenté, ce qui rendra difficile la visualisation de la logique métier d'origine. Supprimer certains codes courants, tels que les rappels, est une bonne chose. La réduction drastique du code que vous devez écrire grâce à la conception du langage JavaScript vous permet de voir plus clairement la logique de votre application.

2. Écrivez manuellement du code pour manipuler les éléments du DOM : la manipulation du DOM est une partie très basique des applications AJAX, mais elle est toujours "maladroite" et sujette aux erreurs. L'interface utilisateur décrite de manière déclarative peut changer à mesure que l'état de l'application change, vous libérant ainsi de l'écriture de code de manipulation DOM de bas niveau. Dans la plupart des applications écrites avec AngularJS, les développeurs n'ont plus besoin d'écrire du code pour manipuler eux-mêmes le DOM, mais vous pouvez toujours l'écrire si vous le souhaitez.

3. Lecture et écriture de données sur l'interface utilisateur : une grande partie des applications AJAX sont des opérations CRUD. Un processus classique consiste à organiser les données côté serveur en objets internes, puis à compiler les objets dans des formulaires HTML. Une fois que l'utilisateur a modifié le formulaire, le formulaire est vérifié. S'il y a une erreur, une erreur s'affiche, puis. les données sont réorganisées dans un objet interne, puis renvoyées au serveur. Il y a trop de codes qui doivent être écrits de manière répétée au cours de ce processus, ce qui donne l'impression que le code décrit toujours l'ensemble du processus d'exécution de l'application plutôt que la logique métier et les détails métier spécifiques.

4. Vous devez écrire beaucoup de code de base avant de commencer : vous devez généralement écrire beaucoup de code de base pour implémenter une application "Hello World". Avec AngularJS, il fournira certains services qui vous permettront de commencer officiellement à écrire votre application, et ces services seront automatiquement ajoutés à votre application via une injection de dépendance de type Guice. Vous permet d'entrer rapidement dans le développement spécifique de. votre candidature. En particulier, vous pouvez également appréhender pleinement le processus d'initialisation des tests automatisés.