IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Angular Discussion :

[Angular 2] Navigation dans une page


Sujet :

Angular

  1. #1
    Membre éclairé
    Homme Profil pro
    Symfony - CMS Wordpress - Zend
    Inscrit en
    Septembre 2011
    Messages
    306
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Symfony - CMS Wordpress - Zend
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2011
    Messages : 306
    Par défaut [Angular 2] Navigation dans une page
    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.

  2. #2
    Membre éclairé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Février 2008
    Messages
    764
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : Février 2008
    Messages : 764
    Par défaut
    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

  3. #3
    Membre éclairé
    Homme Profil pro
    Symfony - CMS Wordpress - Zend
    Inscrit en
    Septembre 2011
    Messages
    306
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Symfony - CMS Wordpress - Zend
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2011
    Messages : 306
    Par défaut Jquery ar Angular2
    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.

  4. #4
    Membre éclairé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Février 2008
    Messages
    764
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : Février 2008
    Messages : 764
    Par défaut
    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.

  5. #5
    Membre éclairé
    Homme Profil pro
    Symfony - CMS Wordpress - Zend
    Inscrit en
    Septembre 2011
    Messages
    306
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Symfony - CMS Wordpress - Zend
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2011
    Messages : 306
    Par défaut jquery bien chargé..
    Merci pour ta réaction..

    mon fichier jquery est bien chargé..

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

  6. #6
    Membre éclairé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Février 2008
    Messages
    764
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : Février 2008
    Messages : 764
    Par défaut
    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 !

  7. #7
    Membre éclairé
    Homme Profil pro
    Symfony - CMS Wordpress - Zend
    Inscrit en
    Septembre 2011
    Messages
    306
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Symfony - CMS Wordpress - Zend
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2011
    Messages : 306
    Par défaut le code est fonctionnel..
    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?

  8. #8
    Membre éprouvé

    Profil pro
    Inscrit en
    Août 2008
    Messages
    1 222
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 1 222
    Par défaut
    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");
    );

  9. #9
    Membre éclairé
    Homme Profil pro
    Symfony - CMS Wordpress - Zend
    Inscrit en
    Septembre 2011
    Messages
    306
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Symfony - CMS Wordpress - Zend
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2011
    Messages : 306
    Par défaut explication..
    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.

  10. #10
    Membre éprouvé

    Profil pro
    Inscrit en
    Août 2008
    Messages
    1 222
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 1 222
    Par défaut
    j'ai testé ceci et j'ai bien l' alert essaye de faire la meme chose

    Nom : test.jpg
Affichages : 573
Taille : 224,1 Ko

    le test.js se trouve à la racine

  11. #11
    Membre éclairé
    Homme Profil pro
    Symfony - CMS Wordpress - Zend
    Inscrit en
    Septembre 2011
    Messages
    306
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Symfony - CMS Wordpress - Zend
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2011
    Messages : 306
    Par défaut oui oui ca fonctionne..
    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.

  12. #12
    Membre éprouvé

    Profil pro
    Inscrit en
    Août 2008
    Messages
    1 222
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 1 222
    Par défaut
    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.

Discussions similaires

  1. Petite colle sur la navigation dans une page
    Par Invité dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 04/04/2016, 00h13
  2. Evénement de navigation dans une page
    Par ultraxa dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 29/01/2013, 12h44
  3. Navigation dans une page façon GitHub
    Par bastien31000 dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 30/12/2011, 14h41
  4. Créer une barre de navigation horizontale dans une page web
    Par sophieetfrederic dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 25/11/2011, 17h16
  5. Probleme ascensseur / barre de navigation dans une page
    Par bixi dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 12/12/2005, 14h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo