Qu'est-ce que AngularJS?
AngularJS est un cadre structurel conçu pour les applications Web dynamiques. Il vous permet d'utiliser HTML comme langue de modèle, et en étendant la syntaxe HTML, vous pouvez créer vos composants d'application plus clairement et concise. Son innovation est qu'il utilise la liaison des données et l'injection de dépendance, ce qui élimine la nécessité d'écrire beaucoup de code. Tous ces éléments sont implémentés via JavaScript côté navigateur, ce qui le rend également parfaitement combiné avec n'importe quelle technologie côté serveur.
AngularJS est conçu pour surmonter les lacunes de HTML dans les applications de construction. HTML est un bon langage déclaratif conçu pour l'affichage de texte statique, mais il sera faible si vous souhaitez créer des applications Web. J'ai donc fait un peu de travail (vous pourriez penser que c'était un petit truc) pour faire en sorte que le navigateur fasse ce que je veux. format-femelle
Habituellement, nous utilisons les technologies suivantes pour résoudre les lacunes de la technologie Web statique dans la création d'applications dynamiques:
1. Bibliothèque de classe - La bibliothèque de classe est une collection de fonctions qui peuvent vous aider à rédiger des applications Web. C'est votre code qui vous mène, et c'est à vous de décider quand utiliser la bibliothèque de classe. Les bibliothèques de classe comprennent: jQuery, etc.
2. Framework - Framework est une application Web spéciale et implémentée, vous n'avez qu'à remplir une logique métier spécifique. Le framework joue ici un rôle leader, et il appelle votre code en fonction de la logique d'application spécifique. Les cadres comprennent: KO, Sproutcore, etc.
AngularJS utilise une approche différente, qui essaie de compenser les lacunes de HTML elle-même dans les applications de construction. AngularJS permet aux navigateurs de reconnaître la nouvelle syntaxe en utilisant une structure que nous appelons les identifiants. Par exemple:
1. Utilisez la syntaxe des doublées doubles {{}} pour la liaison des données;
2. Utilisez la structure de contrôle DOM pour itérer ou masquer les fragments DOM;
3. Formulaires de soutien et vérification du formulaire;
4. être capable d'associer le code logique aux éléments DOM associés;
5. Peut diviser HTML en composants réutilisables.
Solutions de bout en bout
AngularJs essaie de devenir une solution de bout en bout dans 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 fera apparaître AngularJS "têtu" lors de la création d'une application qui a crud (ajouter Créer, requête en récupération, mise à jour de mise à jour, supprimer supprimer) (le texte d'origine est opinion, ce qui signifie qu'il n'y a pas beaucoup d'autres façons). Mais malgré son «entêtement», il garantit toujours que son «entêtement» est juste au point de départ de la construction de votre application, et que vous pouvez toujours changer de manière flexible. Certaines des caractéristiques exceptionnelles d'AngularJS sont les suivantes:
1. Tous les contenus possibles qui peuvent être utilisés pour créer une application CRUD comprennent: la liaison des données, les identifiants de modèle de base, la vérification du formulaire, le routage, la liaison profonde, la réutilisation des composants et l'injection de dépendance.
2. Les aspects de test comprennent: les tests unitaires, les tests de bout en bout, la simulation et les cadres de test automatisés.
3. Application de graines avec disposition du répertoire et tester les scripts comme point de départ.
La gentillesse des angulaires
AngularJS simplifie le développement d'applications en présentant un niveau d'abstraction plus élevé pour les développeurs. Comme d'autres techniques abstraites, cela perd également une certaine flexibilité. En d'autres termes, toutes les applications ne conviennent pas à une utilisation avec AngularJS. AngularJS considère principalement la création d'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.
Tels que les jeux et les éditeurs d'interface graphique, les applications avec des opérations DOM fréquentes et complexes sont très différentes des applications CRUD. Ils ne conviennent pas à la construction avec AngularJS. Il pourrait être préférable d'utiliser des techniques plus légères et plus simples comme jQuery comme celle-ci.
Une instance Angularjs simple
Vous trouverez ci-dessous une application CRUD typique contenant un formulaire. La valeur de forme est d'abord vérifiée puis utilisée pour calculer la valeur totale, qui est formatée dans le style local. Voici quelques concepts communs pour les développeurs, vous devez d'abord comprendre:
1. Associez le modèle de données (modèle de données) à la vue (UI);
2. Écrivez, lire et vérifier l'entrée utilisateur;
3. Calculer de nouvelles valeurs en fonction du modèle;
4. Localisez le format de sortie.
index.html:
La copie de code est la suivante:
<! doctype html>
<html ng-app>
<adal>
<script src = "http://code.angularjs.org/angular-1.1.0.min.js"> </ script>
<script src = "script.js"> </ script>
</ head>
<body>
<div ng-controller = "invoicecntl">
<b> facture: </b>
<br>
<br>
<ballage>
<tr> <td> Quantité </td> <TD> Coût </td> </tr>
<tr>
<Td> <Type de saisie = "Integer" min = "0" ng-model = "Qty" requis> </td>
<td> <entrée type = "nombre" ng-model = "Cost" requis> </td>
</tr>
</ table>
<hr>
<b> Total: </b> {{Qty * Coût | devise}}
</div>
</docy>
</html>
script.js:
La copie de code est la suivante:
fonction invoicecntl ($ scope) {
$ scope.qty = 1;
$ scope.cost = 19,95;
}
Test de bout en bout:
La copie de code est la suivante:
il ('devrait montrer de la liaison angulaire', function () {
attendre (liant («Qté * coût»)). toequal («19,95 $»);
entrée («Qté»). Entrée («2»);
entrée («coût»). Entrée («5,00»);
attendre (liaison («Qté * coût»)). toequal («10,00 $»);
});
fonction invoicecntl ($ scope) {$ scope.qty = 1; $ scope.cost = 19.95;}
Effet de course:
La copie de code est la suivante:
Facture:
Coût de quantité
Total: {{Qté * Coût | devise}}
Essayez l'exemple ci-dessus et jetons un coup d'œil à la façon dont cet exemple fonctionne ensemble. Dans la balise ``, nous utilisons un identifiant `` ng-app '' pour indiquer qu'il s'agit d'une application angularjs. Cet identifiant «ng-appa» entraînera l'initialiser automatiquement votre application AngularJS **. Nous utilisons la tag `` pour charger le script angularjs: <script src = "http://code.angularjs.org/angular-1.1.0.min.js">
En définissant la propriété NG-Model dans la balise <port>, AngularJS liera automatiquement les données à double sens. Nous avons également effectué une vérification simple des données en même temps:
La copie de code est la suivante:
Quantité: <Type d'entrée = "Integer" min = "0" ng-model = "qty" requis>
Coût: <entrée type = "nombre" ng-model = "coût" requis>
Le widget de cette boîte d'entrée semble ordinaire, mais il n'est pas ordinaire si vous reconnaissez les points suivants:
1. Lorsque la page est chargée, AngularJS générera des variables avec le même nom en fonction du nom du modèle (Qté, 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'entrez pas de données ou si les données d'entrée sont non valides, cette boîte d'entrée d'entrée deviendra automatiquement rouge. Cette nouvelle fonctionnalité de la zone d'entrée permet aux développeurs d'implémenter plus facilement les fonctions de vérification du champ commun dans les applications CRUD.
Enfin, nous pouvons jeter un œil aux mystérieux doublures:
La copie de code est la suivante:
Total: {{Qté * Coût | devise}}
Cette balise {{expression}} est la liaison des données angularjs. Les expressions peuvent être une combinaison d'une expression et d'un filtre ({{expression | filtre}}). AngularJS fournit des filtres pour formater les données d'entrée et de sortie.
Dans l'exemple ci-dessus, l'expression dans {{}} demande à AngularJS de multiplier les données obtenues à partir de la zone d'entrée, puis de formater le résultat de multiplication dans le style de devise local, puis de le sortir sur la page.
Il convient de mentionner que nous n'appelons ni les méthodes AngularJS ni écrivons une logique spécifique comme l'utilisation d'un framework, mais nous avons rempli les fonctions ci-dessus. Derrière cette implémentation, le navigateur fait plus de travail qu'auparavant pour générer des pages statiques, ce qui lui permet de répondre aux besoins des applications Web dynamiques. AngularJS réduit le seuil de développement pour les applications Web dynamiques au point où il n'y a pas besoin de bibliothèques de classe ou de cadres.
"Zen Tao (concept) d'AngularJS" d'AngularJS "
Angular estime que lors de la création de vues (UIS) et d'écriture de la logique des logiciels, le code déclaratif sera bien meilleur que le code impératif, bien que le code impératif soit très adapté pour exprimer la logique métier.
1. Le découplage des opérations DOM et la logique d'application est une très bonne idée, ce qui peut considérablement améliorer l'accordabilité du code;
2. C'est une très, très bonne idée de traiter également les tests et le développement. La difficulté de tester dépend dans une large mesure de la structure du code;
3. Le découplage du côté client et du serveur est une pratique particulièrement bonne. Il peut permettre aux deux côtés de se développer en parallèle et de permettre la réutilisation des deux côtés;
4. Si le cadre peut guider les développeurs tout au long du processus de développement: de la conception de l'interface utilisateur, de la rédaction de la logique métier, puis des tests, il sera d'une grande aide aux développeurs;
5. Il est toujours bon de "simplifier le complexe en simplification et de le simplifier en zéro".
AngularJS peut vous libérer du cauchemar suivant:
1. Utilisez des rappels: l'utilisation des rappels perturbera la lisibilité de votre code, rendez votre code fragmenté et il est difficile de voir la logique commerciale d'origine. C'est une bonne chose de supprimer un code commun, tel que des rappels. Une réduction radicale du code que vous devez écrire en raison de la conception de la langue JavaScript peut vous permettre de voir la logique de votre application plus clairement.
2. Écrivez manuellement le code pour les éléments DOM de fonctionnement: le DOM de fonctionnement est une partie très basique des applications AJAX, mais elle est toujours "lourde" et sujette aux erreurs. L'interface d'interface utilisateur décrite de manière déclarative peut changer avec le changement de l'état de l'application, vous permettant de vous libérer de l'écriture du code de fonctionnement DOM de bas niveau. Dans la plupart des applications écrites dans AngularJS, les développeurs n'ont plus besoin d'écrire de codes qui fonctionnent par eux-mêmes, mais vous pouvez toujours les écrire si vous le souhaitez.
3. Lire et écrire des données sur l'interface de l'interface utilisateur: Une grande partie des applications AJAX est les opérations CUD. Un processus classique consiste à former les données du serveur dans des objets internes, puis à compiler l'objet dans des formulaires HTML, et l'utilisateur modifie le formulaire, puis vérifiez le formulaire. S'il y a une erreur, il affichera l'erreur, puis réorganisera les données dans des objets internes et le renverra sur le serveur. Il y a trop de code pour être répété dans ce processus, ce qui fait que le code semble toujours décrire l'intégralité du processus d'exécution de l'application, plutôt que la logique métier et les détails commerciaux spécifiques.
4. Avant de commencer, vous devez écrire beaucoup de code de base: 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 permettra de commencer à écrire votre application facilement, et ces services sont automatiquement ajoutés à votre application avec une injection de dépendance à la dépendance de la dépendance à l'injection de type Guice, qui vous permet d'entrer rapidement le développement spécifique de votre application. Ce qui est particulièrement vrai, c'est que vous pouvez pleinement saisir le processus d'initialisation des tests automatisés.