Discussion :

[sinzen]

Bonjour à tous,

Je débute avec Angular2 et les animations.
Avant j'utilisait jquery pour faire certaine tâche de manipulation de DOM.

Et je rencontre quelque souci avec l'inclusion de celui-ci dans un projet angular2.

Mon objectif est je faire scroller ma page quand je clique sur un bouton.
Quel fonction utilisé sous Angular2 avec les animation pour réaliser cela?

voici mon code qui fait un scale avec une mesure ce qui donne un effet de zoom.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
...
animations: [
    trigger('movementtrigger', [
      state('inactive', style({
        backgroundColor: '#ced7df',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ],
...

merci pour vos réactions.

[francky74]

Bonjour,

A ma connaissance, avec Angular tu peux faire le "two way data binding" (passage des données du html au javascript et inversement), du routing avec angular ngRoute ou uiRouter, mais en ce qui concerne le scrolling, je pense que tu dois continuer à utiliser JQuery en même temps qu'AngualrJS.

Bon courage

[sinzen]

Merci pour ta réaction.

Du coup si je veux utilisé jquery comment je procède?

car quand je un simple inclusion comme suite ca ne fonctionne pas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript" src="../../app/assets/js/jquery.min.js"></script>

il n'exécute pas mon code jquery..

une idée?

merci pour vos réactions.

[francky74]

Hello !

car quand je un simple inclusion comme suite ca ne fonctionne pas

-> désolé je ne te comprends pas sur cette phrase ....

Dans ton navigateur, tu dois regarder le "réseau" et voir si ton jquery est chargé avec ta page (dans firefox, tape F12 pour ouvrir les outils de développement). S'il n'est pas chargé vérifie que tu as bien écris le src="../../app/assets/js/jquery.min.js".
Le chemin de src doit être le chemin parcouru depuis la page où il est déclaré.

Donc si tu as une page acceuil.html et que ton fichier jquery.js est au même niveau, pas besoin de chemin et le src sera simplement "src="jquery.js".
mais si tu as une page acceuil.html et que ton fichier jquery.js est dans un dossier /javascirpt, le chemin sera "javascript/jquery.js".
ou si tu as une page acceuil.html dans un fichier /vues/acceuil.html et que ton fichier jquery.js est dans un dossier /js/jquery.js, le chemin sera "../js/jquery.js".
Les deux points servant à reculer d'un niveau dans les dossiers.

[sinzen]

Merci pour ta réaction..

mon fichier jquery est bien chargé..

mais le code dans mon fichier HTML n'est pas exécuté..

[francky74]

Alors c'est que tu dois avoir un problème avec ton code.
Il te faut maintenant poster un nouveau message dans le forum JQUERY qui se trouve ici car tu n'est pas dans le bon forum. C'est un problème JQUERY que tu as et non AngularJS.
Et n'oublies pas mettre ce sujet en résolu

Bon courage !

[sinzen]

Merci pour ta réaction.

Le code jQuery est fonctionnel, car sur mon site sans Angular 2 il tourne.

Ensuite mon souci est dans la page HTML ou se trouve mon code.

Angular2 n'exécute pas le code en question.

Je trouve bien mes librairies incluse dans mon navigateur network etc. Mais..

donc j'espère que quelqu'un a une solution a cela?

[keokaz]

bonsoir,

es-tu sur que angular2 arrive à lire la lib ?

lorsqu'on utilise le boostrap de twitter je fais ceci

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />

essayer de mettre ta lib directement dans le dossier node_modules/jquery/j.min.js par exemple ?

et sinon un simple ça donne quoi avant </body>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(document).ready(
console.log("ok");
);

[sinzen]

Merci pour ta réaction Keokaz.

Pour être vraiment honnête..
Seul le code se retrouvant dans mon fichier HTML ne passe pas.
Par contre le css ça fonctionne bien.
Si tu à déjà fait du Angular2, on peux inclure le css seulement et pas le js.
Le js lui et la déclaration ou plus précisément l'inclusion du fichier css dois se trouver dans le composant du projet.
Du coup je parle moi des mes page html ou je gère un fichier css lier a cette page.
Et pas un css général et inclus dans l'index.html -> point d'entré du projet Angular2.
De toute façon j'ai testé dans tous les cas les inclusions du js (pas les librairies mais le code lier au DOM) dans le fichier index.html
Ca ne fonctionne pas.

j'ai partiellement ou du moins j'ai trouve une solution et inclus dans mon composant le code Jquery.

[keokaz]

j'ai testé ceci et j'ai bien l' alert essaye de faire la meme chose



le test.js se trouve à la racine

[sinzen]

Merci pour ton post..

Oui je confirme le js est exécuté.

du moins mon alert.. mais pas le reste de mon code lier au html de mon composant

Je suis forcé de le faire dans mon composant également.

Je pense que une manipulation du DOM est lié a ce comportement?

un idée ? tu peux tester ca et lié une page html a ton composant?
Ensuite faire l'inclusion du js au point d'entré de ton projet ou dans la page?

Je doute que cela fonctionne? mais faut testé..

Merci pour vos réactions.

[keokaz]

ton plugins est t'il écrit en typescript ?
car je pense que dans ton composant , si tu lui donne du js pure il va le comprendre ?
je n'a pour le moment pas essayer d'utiliser du jquery....

peu être que cela peut t'aider à comprendre pouquoi cela ne fonctionne pas, il faut faire une adaptation

https://www.thepolyglotdeveloper.com...cript-project/

ici il utilise une lib extérieur qui crype en sha2 avec angular2.