"Penser à AngularJS", si j’ai un fond jQuery?

Supposons que je connaisse le développement d'applications client dans jQuery , mais j'aimerais maintenant commencer à utiliser AngularJS . Pouvez-vous décrire le changement de paradigme nécessaire? Voici quelques questions qui peuvent vous aider à former la réponse:

  • Comment créer et créer des applications Web clientes différemment? Quelle est la différence?
  • Que devrais-je arrêter de faire / utiliser? Que devrais-je commencer à faire / utiliser à la place?
  • Existe-t-il des considérations / limitations côté serveur?

Je ne cherche pas une comparaison détaillée entre jQuery et AngularJS .

4523
21 февр. fixé par Mark Rajcok le 21 février 2013-02-21 07:09 '13 à 7:09 2013-02-21 07:09
@ 15 réponses

1. Ne créez pas votre page, puis modifiez-la à l'aide de la manipulation DOM

Dans jQuery, vous créez une page, puis vous la créez de manière dynamique. Cela est dû au fait que jQuery a été conçu pour se développer et s’est développé incroyablement hors de ce principe simple.

Mais dans AngularJS, vous devez tout recommencer en gardant à l’esprit votre architecture. Au lieu de penser que «j'ai ce morceau de DOM et que je veux faire ça, faire X», vous devriez commencer par ce que vous voulez, puis commencer à développer votre application, puis enfin commencer à développer votre présentation.

2. Ne pas augmenter jQuery avec AngularJS

De même, ne commencez pas avec l’idée que jQuery utilise X, Y et Z, je vais donc ajouter AngularJS en plus de cela pour les modèles et les contrôleurs. C'est vraiment tentant lorsque vous débutez. Je recommande donc toujours aux nouveaux développeurs d'AngularJS de ne jamais utiliser jQuery, du moins jusqu'à ce qu'ils s'habituent à ce qu'ils ont fait de la «manière angulaire».

J’ai vu beaucoup de développeurs ici et sur la liste de diffusion créer ces solutions complexes avec des plugins jQuery de 150 ou 200 lignes de code qui sont ensuite collés ensemble dans AngularJS avec un ensemble de rappels et que $apply crée de la confusion. mais à la fin ils travaillent! Le problème est que dans la plupart des cas, le plugin jQuery peut être réécrit dans AngularJS dans un extrait de code, où tout devient soudain clair et compréhensible.

L'essentiel est que: lors de la résolution d'un problème, commencez par "penser à AngularJS"; si vous ne pouvez pas trouver de solution, demandez à la communauté; si, après tout, il n’ya pas de solution simple, n'hésitez pas à contacter jQuery. Mais ne laissez pas jQuery devenir une béquille, sinon vous ne maîtriserez jamais AngularJS.

3. Pensez toujours en termes d'architecture.

On sait d’abord que les applications d’une page sont des applications. Ce n'est pas une page web. Par conséquent, nous devons penser comme un développeur côté serveur et non comme un développeur client. Nous devons réfléchir à la manière de diviser notre application en composants distincts, extensibles et testables.

Alors, comment fais-tu? Que pensez-vous dans AngularJS? Voici quelques principes généraux, contrairement à jQuery.

La soumission est le "procès-verbal officiel"

Dans jQuery, nous changeons la vue par programme. Nous pouvons avoir un menu déroulant intitulé ul comme:

Home </li> <li> <a href="#/menu1">Menu 1</a> <ul> <li><a href="#/sm1">Submenu 1</a></li> <li><a href="#/sm2">Submenu 2</a></li> <li><a href="#/sm3">Submenu 3</a></li> </ul> </li> <li> <a href="#/home">Menu 2</a> </li> </ul> 

Dans jQuery, dans notre logique d'application, nous l'activerions avec quelque chose comme:

Ces deux-là font la même chose, mais dans la version d’AngularJS, quiconque regarde le modèle sait ce qui doit se passer. Chaque fois qu'un nouveau membre de l'équipe de développement arrive à bord, elle peut l'examiner et ensuite savoir que la directive dropdownMenu est en place. elle n'a pas besoin d'entrer la bonne réponse ni de passer au crible un code. Un regard nous dit ce qui allait se passer. Beaucoup plus propre.

Les développeurs débutant avec AngularJS demandent souvent comment trouver tous les liens d’un type particulier et y ajouter des directives. Le développeur est toujours surpris lorsque nous répondons: vous ne le faites pas. Mais la raison pour laquelle vous ne le faites pas, c’est que c’est comme à moitié jQuery, à moitié AngularJS et rien de bon. Le problème ici est que le développeur essaie "d'exécuter jQuery" dans le contexte d'AngularJS. Cela ne marchera jamais bien. La soumission est une entrée officielle. En dehors de la directive (plus de détails ci-dessous), vous ne modifiez jamais le DOM. Et les directives sont appliquées dans la soumission, l'intention est donc claire.

Rappelez-vous: ne créez pas, puis marquez. Vous devez architecte et ensuite concevoir.

Liaison de données

C’est certainement l’une des fonctionnalités les plus étonnantes d’AngularJS, et élimine en grande partie le besoin de faire le genre de manipulations DOM que j’ai mentionné dans la section précédente. AngularJS mettra automatiquement à jour votre présentation afin que vous n'ayez pas à le faire! Dans jQuery, nous répondons aux événements, puis mettons à jour le contenu. Quelque chose comme:

 <ul class="messages" id="log"> </ul> 

En plus de mé>

C'est un peu brouillon et un peu fragile. Mais dans AngularJS, nous pouvons le faire:

 <ul class="messages"> <li ng-repeat="entry in log">{{ entry.msg }}</li> </ul> 

Mais à cet égard, notre vue peut ressembler à ceci:

séparation des problèmes et offre une possibilité de vérification beaucoup plus grande.  D’autres réponses ont mentionné ce point, alors je vais en rester là. 

Séparation des problèmes

Et tout ce qui précède relie ce sujet complexe: gardez vos problèmes séparés. Votre opinion sert de rapport officiel sur ce qui devrait se passer (pour la plupart); votre modèle représente vos données; vous avez un niveau de service pour effectuer des tâches réutilisables; vous manipulez DOM et développez votre vue avec des directives; et vous collez tout cela avec les contrôleurs. Cela est également mentionné dans d'autres réponses, et la seule chose que je voudrais ajouter concerne la testabilité, que je traiterai dans une autre section ci-dessous.

Activer les dépendances

Pour nous aider avec la séparation des problèmes, injection de dépendance (DI). Si vous utilisez un >Java à PHP ), vous êtes probablement déjà familiarisé avec ce concept, mais si vous êtes un client jQuery, ce concept peut sembler quelque chose de stupide à inutile à hipster. Mais ce n'est pas le cas: -)

D'un point de vue général, DI signifie que vous êtes libre de déclarer des composants, puis de demander à n'importe quel autre composant d'en obtenir une copie, qui vous sera fournie. Vous n'avez pas besoin de connaître l'ordre de démarrage, l'emplacement des fichiers ou quelque chose du genre. La force peut ne pas être immédiatement visible, mais je ne donnerai qu'un exemple (commun): le test.

Disons que, dans notre application, nous avons besoin d'un service qui implémente le stockage du serveur via l'API REST et, en fonction de l'état de l'application, le stockage est également local. Lors des tests sur nos contrôleurs, nous ne souhaitons pas contacter le serveur - nous testons toujours le contrôleur. Nous pouvons simplement ajouter une structure de service avec le même nom que notre composant d'origine et l'injecteur garantira que notre contrôleur en recevra automatiquement un faux - notre contrôleur ne sait pas et ne devrait pas connaître la différence.

En parlant de procès ...

4. Développement basé sur des tests - toujours

Cela fait effectivement partie de la section 3 sur l'architecture, mais il est très important que je la place dans ma propre section de niveau supérieur.

Parmi tous les nombreux plugins jQuery que vous avez vus, utilisés ou écrits, combien avaient une suite de tests compagnon? Pas beaucoup, parce que jQuery n’est pas très réceptif à cela. Mais AngularJS est.

Dans jQuery, le seul moyen de tester consiste à créer un composant indépendamment avec une page échantillon / démo, avec laquelle nos tests peuvent effectuer des manipulations DOM. Nous devons donc développer le composant séparément, puis l’intégrer dans notre application. Comme c'est gênant! Tant de temps, lors du développement avec jQuery, nous avons choisi une option itérative au lieu d’un développement basé sur des tests. Et qui peut nous en vouloir?

Mais puisque nous avons une séparation des problèmes, nous pouvons faire des tests de développement itératifs dans AngularJS! Par exemple, supposons qu'une directive très simple indique dans notre menu quel est notre itinéraire actuel. Nous pouvons dire ce que nous voulons du point de vue de notre application:

 

Eh bien, maintenant nous pouvons écrire un test pour la directive non when-active existante when-active :

 

Et lorsque nous effectuons notre test, nous pouvons confirmer qu'il échoue. Seulement maintenant nous devons créer notre directive:

Il y a plusieurs erreurs dans ceci:

  • Tout d'abord, jQuery n'a jamais été requis. Ici, nous n’avons rien fait dont jQuery avait besoin!
  • Deuxièmement, même si jQuery est déjà sur notre page, il n’ya aucune raison de l’utiliser ici; nous pouvons simplement utiliser angular.element , et notre composant fonctionnera quand vous angular.element dans un projet sans jQuery.
  • Troisièmement, même si on suppose que cette directive nécessite jQuery, jqLite ( angular.element ) utilisera toujours jQuery si elle a été chargée! Donc nous n’avons pas besoin d’utiliser $ - nous pouvons simplement utiliser angular.element .
  • Le quatrième, étroitement lié au troisième, est que les éléments jqLite ne doivent pas être encapsulés dans $ - l' element qui est passé à la fonction link sera déjà un élément jQuery!
  • Et cinquièmement, pourquoi avons-nous mé>

Cette directive peut être réécrite (même pour des cas très complexes!) Beaucoup plus simple:

7185
22 февр. Réponse donnée par Josh David Miller le 22 février 2013-02-22 00:26 '13 à 0:26 2013-02-22 00:26

Impératif → déclaratif

Dans jQuery, un sélecteur est utilisé pour rechercher le DOM , puis lier / enregistrer les gestionnaires d’événements. Lorsqu'un événement est déclenché, ce code (impératif) met à jour / modifie le DOM.

Dans AngularJS, vous souhaitez réfléchir aux vues , pas aux éléments DOM. Représentations HTML (déclaratives) contenant les directives AngularJS . Les directives établissent pour nous des gestionnaires d’événements et nous fournissent une liaison dynamique des données. Les sélecteurs étant rarement utilisés, le besoin d'identificateurs (et de certains types de classes) est considérablement réduit. Les vues sont liées à des modèles (à travers des zones). Les vues sont une projection d'un modèle. Modèles de modification d'événements (données, propriétés de région) et de vues qui conçoivent ces modèles "automatiquement".

Dans AngularJS, pensez aux modèles, pas aux éléments DOM sélectionnés par jQuery qui contiennent vos données. Considérez les idées comme des projections de ces modèles, plutôt que d’enregistrer des rappels pour manipuler ce que l’utilisateur voit.

Séparation des problèmes

jQuery utilise du code JavaScript non intrusif - le comportement (JavaScript) est séparé de la structure (HTML).

AngularJS utilise des contrôleurs et des directives (chacun pouvant avoir son propre contrôleur et / ou des fonctions de compilation et de liaison) pour supprimer le comportement de la vue / structure (HTML). Angular propose également des services et des filtres pour diviser / organiser votre application.

border=0

Voir aussi recomed.site.site/questions/511 / ...

Conception de l'application

Une approche pour développer une application AngularJS:

  • Pensez à vos modèles. Créez des services ou vos propres objets JavaScript pour ces modèles.
  • Réfléchissez à la manière dont vous souhaitez présenter vos modèles - vos points de vue. Créez des modèles HTML pour chaque présentation, en utilisant les directives nécessaires pour obtenir une liaison de données dynamique.
  • Associez un contrôleur à chaque vue (en utilisant ng-view et routing ou ng-controller). Demandez au répartiteur de rechercher / récupérer uniquement les données de modèle que les vues doivent effectuer. Rendez les contrôleurs aussi minces que possible.

Héritage prototype

Vous pouvez faire beaucoup avec jQuery sans savoir comment fonctionne le prototype d'héritage JavaScript. Lors du développement d'applications AngularJS, vous éviterez certaines erreurs courantes si vous maîtrisez bien l'héritage JavaScript. Lecture recommandée: Quelles sont les nuances du volume prototype / prototype d'héritage dans AngularJS?

408
21 февр. Réponse donnée par Mark Rajcok le 21 février. 2013-02-21 07:09 '13 à 7:09 2013-02-21 07:09

AngularJS vs. jQuery

AngularJS et jQuery acceptent des idéologies complètement différentes. Если вы отправляетесь из jQuery, вы можете обнаружить некоторые отличия от удивления. Angular может рассердить вас.