"Penser en AngularJS" si j'ai un jQuery arrière-plan?

Question

Supposons que je suis familier avec le développement des applications côté client en jQuery, mais maintenant, je voudrais commencer en utilisant AngularJS. Pouvez-vous décrire le changement de paradigme qui est nécessaire? Voici quelques questions qui pourraient vous aider à formuler une réponse:

• Comment puis-je l'architecte et de conception d'applications web côté client différemment? Quelle est la différence?
• Que dois-je arrêter de faire/aide; Que devrais-je commencer à faire/utiliser à la place?
• Il n'existe aucun côté serveur considérations/restrictions?

Je ne suis pas à la recherche d'une comparaison détaillée entre jQuery et AngularJS.

Answer 1

Impératif → déclarative

En jQuery, les sélecteurs sont utilisés pour trouver les DOM éléments et ensuite lier/enregistrer les gestionnaires d'événements. Lorsqu'un événement déclenche, que (impératif) le code s'exécute à mettre à jour/modifier le DOM.

Dans AngularJS, vous souhaitez réfléchir sur les points de vue plutôt que des éléments du DOM. Les vues sont (déclarative) HTML qui contiennent AngularJS directives. Les Directives de l'événement gestionnaires de derrière les coulisses pour nous et de nous donner de la dynamique de la liaison de données. Les sélecteurs sont rarement utilisés, de sorte que le besoin pour l'Id (et de certains types de classes) est fortement diminuée. Les vues sont liés à des modèles (via les étendues). Les vues sont une projection du modèle. Les événements de changement de modèles (qui est, les données, les propriétés de l'étendue), et le point de vue que le projet de ces modèles de mise à jour "automatique".

Dans AngularJS, pensez à des modèles, plutôt que de jQuery-sélectionné des éléments du DOM que la conservation de vos données. Pensez vues comme des projections de ces modèles, plutôt que d'enregistrer les callbacks pour manipuler ce que l'utilisateur voit.

La séparation des préoccupations

jQuery utilise JavaScript discret - le comportement (JavaScript) est séparé de la structure (HTML).

AngularJS utilise des contrôleurs et des directives (qui peuvent avoir leur propre contrôleur, et/ou de compiler et lier des fonctions) pour supprimer le comportement de la vue ou de la structure (HTML). Angulaire a aussi des services et des filtres pour séparer et organiser votre application.

Voir aussi http://stackoverflow.com/a/14346528/215945

La conception de l'Application

Une approche pour la conception d'une application AngularJS:

1. Pensez à vos modèles. Créer des services ou vos propres objets JavaScript pour ces modèles.
2. Pensez à comment vous voulez présenter vos modèles, vos points de vue. Créer des modèles HTML pour chaque vue, en utilisant les directives nécessaires pour obtenir la dynamique de la liaison de données.
3. Joindre un contrôleur pour chaque point de vue (à l'aide de ng-view et de routage, ou ng-controller). Ont le contrôleur de trouver/obtenir seulement quel que soit le modèle de données de la vue a besoin pour faire son travail. Faire les contrôleurs aussi mince que possible.

Prototypes héritage

Vous pouvez faire beaucoup avec jQuery sans savoir à propos de comment JavaScript prototypes héritage fonctionne. Lors du développement d'applications AngularJS, vous permettra d'éviter certains pièges courants à éviter si vous avez une bonne connaissance de JavaScript héritage. Lecture recommandée: Quelles sont les nuances de portée prototypes / l'héritage par prototype dans AngularJS?

Answer 2

Pouvez-vous décrire le changement de paradigme qui est nécessaire?

Impératif vs Déclarative

Avec jQuery , vous dire le DOM ce qui doit arriver, étape par étape. Avec AngularJS vous décrivez les résultats que vous voulez, mais pas comment le faire. En savoir plus sur ce ici. Aussi, découvrez la Marque Rajcok de réponse.

Comment puis-je l'architecte et le design web côté client apps différemment?

AngularJS est un framework côté client qui utilise le MVC modèle (découvrez leur représentation graphique). Il a grandement met l'accent sur la séparation des préoccupations.

Quelle est la différence? Que dois-je arrêter de faire/aide; que devrais-je commencer à faire/utiliser à la place?

jQuery est une bibliothèque

AngularJS est un beau côté client, le cadre, très testable, qui combine des tonnes de trucs cool comme MVC, l'injection de dépendance, la liaison de données et bien plus encore.

Il met l'accent sur la séparation des préoccupations et de tests (tests unitaires et de fin de test), ce qui facilite le développement piloté par les tests.

La meilleure façon de commencer est de passer par leur incroyable tutoriel. Vous pouvez aller à travers les étapes dans une couple d'heures; toutefois, dans le cas où vous souhaitez maîtriser les concepts derrière les coulisses, ils comprennent une myriade de référence pour d'autres lectures.

Il n'existe aucun côté serveur considérations/restrictions?

Vous pouvez l'utiliser sur les applications existantes où vous êtes déjà purs jQuery. Cependant, si vous souhaitez profiter pleinement de la AngularJS fonctionnalités, vous pouvez envisager de codage du côté serveur à l'aide d'un Réparateur approche.

Cela vous permettra de tirer parti de leurs ressources en usine, ce qui crée une abstraction de votre côté serveur RESTful API et fait côté serveur d'appels (get, enregistrer, supprimer, etc.) incroyablement facile.

Answer 3

Pour décrire le "changement de paradigme", je pense qu'une réponse courte peut suffire.

Angulaire change la manière dont vous trouverez les éléments

En jQuery, vous utilisez généralement les sélecteurs de trouver des éléments, et puis de fil:
$('#id .class').click(doStuff);

Dans AngularJS, vous utilisez les directives pour marquer les éléments directement, de les câbler:
<a ng-click="doStuff()">

Angulaire n'a pas besoin (ou envie) de vous trouver des éléments à l'aide des sélecteurs de - la principale différence entre Angulaire du jqLite rapport complet de jQuery , c'est que jqLite ne prend pas en charge les sélecteurs.

Alors, quand les gens disent "ne pas inclure jQuery à tous", c'est principalement parce qu'ils ne veulent pas que vous utiliser des sélecteurs; ils veulent vous apprendre à utiliser les directives de la place. Direct, pas le sélectionner!