Salut, comment utiliser jquery avec angular js ??
merci d'avance

7 réponses


yanis-git
Réponse acceptée

Bonjour Med001, je vais tenter de t'apporter une trame de compréhension. Ni jQuery, ni Angular n'est magique. Et de façon plus général, rien ne l'est et dans l'univers Javascript tout peut virtuellement fonctionner ensemble.

n'importe où dans Angular tu pourras utiliser jQuery(".foo")ou encore $(".foo"). Le piège est de te retrouver avec une instance de jQlite (la version angular de jQuery pour vulgariser : plus d'information ici https://docs.angularjs.org/api/ng/function/angular.element)

Tout comme n'importe ou tu peux faire depuis n'importe où :

//Avec un selecteur interprété par jQuery.
angular.element($('[ng-controller="DocsController"]')).scope()

//Avec un selecteur interprété par du javascript natif.
angular.element(document.querySelector('[ng-controller="DocsController"]')).scope()

à noter que le selecteur CSS doit target un element bind avec Angular (typiquement avec une class .ng-scope .ng-isolate-scope .ng-binding)

Maintenant que ce constat est fais, pourquoi tu ne vois pas de jQuery dans un controller ?
Car sur Angular, les bonnes pratiques veulent qu'on concentre l'intéraction avec le DOM et l'UI de façon plus général dans les directives. Tu peux presque voir ça comme la partie view d'un model MVC. Mais rien ne t'empèche techniquement de le faire (cf point ci-dessus).

Pourquoi créé une directive ng-date-picker pour simplement appeler dans mon link $(element).datepicker(); quand on peut le faire directement dans notre controller ?

Respect des standards :
Pour répondre au bonne pratique donnée juste au dessus, on touche à l'UI dans les directives, Angular propose un ensemble d'outil pour répondre à chaque besoin, nous respectons donc les règles établies pour être sur que chaque développeur maitrisant Angular puisse contribuer.

Encapsulation:
De plus ça répond à un principe fondamental qui s'appel l'encapsulation, ici nous souhaitons enfermer dans une boite le fait de generer un datepicker, ansi, si demain nous souhaitons changer le datepicker à utiliser, nous le ferons qu'à un endroit.

Robuste et evolutif
Mais cela va plus loin que ça, si tu décides d'ajouter une fonction de tracking sur le datepicker, tu peux compléter ta directive pour ajouter ta logic de tracking, tu ne travails qu'à un endroit et tu es sûre de ne rien oublier.

Tests
Tu isoles tes tests aussi.

J'espère avoir été claire, n'hésite pas si des questions te viennent.

med001
Auteur

et pour code comment utilisée jquery avec angular js ??

tu es serieux? il suffit de faire une recherche sur internet pour avoir la reponse -_-'

aller je suis sympa je te donne le lien ici

med001
Auteur

@Defy dans mes prochains sujet vous n'ecrivez pas des commentaires indépendantes de mes questions s'il vous plait

merci :)

@med001 la prochaine fois fait des recherche avant, on est pas un moteur de recherche ici ;-)

med001
Auteur

@Defy je fait une recherche mon ami mais je suis débutant en angular et hier je comprend pas pourquoi on utilise jquery de façon de directive , je test avec plugin datepicker et timepicker et je début de comprend l'utilisation
en tout cas merci @Defy

med001
Auteur

@yanis-git super mon ami, merci beaucoup