Dev Faq
2
votes

Utilisez le fichier .js dans ionic 4

Je suis nouveau dans ionic, je souhaite utiliser le fichier .js dans une page

J'ai un fichier .js qui crée une bulle dans le canevas,

Ce que je veux faire, c'est utiliser ce fichier .js dans mon projet ionic 4 et afficher la bulle sur ma page d'accueil.

Voici le Lien pour ce codepen que je souhaite utiliser

J'ai créé un fichier dans 'assets / js / bubblefile.js' mais je ne sais pas comment utiliser le fichier 'bubblefile.js' dans mon home.html code > ou home.ts ? Voici mon code.

Modifié

home.html Code: 

var nodes = new vis.DataSet([
    {label: "Pop"},
    {label: "Alternative"},
    {label: "Rock"},
    {label: "Jazz"},
    {label: "Hits"},
    {label: "Dance"},
    {label: "Metal"},
    {label: "Experimental"},
    {label: "Rap"},
    {label: "Electronic"},
]);
var edges = new vis.DataSet();

var container = document.getElementById('bubbles');
var data = {
    nodes: nodes,
    edges: edges
};

var options = {
    nodes: {borderWidth:0,shape:"circle",color:{background:'#F92C55', highlight:{background:'#F92C55', border: '#F92C55'}},font:{color:'#fff'}},
    physics: {
        stabilization: false,
        minVelocity:  0.01,
        solver: "repulsion",
        repulsion: {
            nodeDistance: 40
        }
    }
};
var network = new vis.Network(container, data, options);


// Events
network.on("click", function(e) {
    if (e.nodes.length) {
        var node = nodes.get(e.nodes[0]);
        // Do something
        nodes.update(node);
    }
});
export { nodes, edges, container, data, options, network };

0 commentaires

4 Réponses :

1
votes

Si vous souhaitez l'utiliser dans un fichier HTML: 

import "./assets/js/bubblefile";

si vous souhaitez l'utiliser dans un fichier JavaScript / TypeScript:

Ajoutez ceci en bas de votre bubblefile.js:

export { nodes, edges, container, data, options, network };

En haut du fichier dans lequel vous souhaitez l'utiliser: 

<script src="assets/js/bubblefile.js"></script>

7 commentaires

Dans quel fichier dois-je ajouter la dernière ligne?

Ajoutez la ligne export dans votre bubblefile.js et la ligne import dans le fichier JS que vous souhaitez utiliser bubblefile.js < / code> dans.

je veux l'utiliser dans le fichier .ts pas dans le fichier JS

Merci pour votre relecture rapide, mais cela donne une erreur ./src/app/home/home.page.ts Module non trouvé: Erreur: Impossible de résoudre './assets/js/bubblefile' dans '/ Users / atologistimac2 / Documents / HybridApps / musicbubble / src / ‌ app / home '

Où votre fichier bubblefile.js est-il stocké par rapport à votre fichier home.page.ts ?

Je mets à jour la question et j'ajoute du code de mes fichiers, veuillez le regarder

bubblefile.js n'est pas en relation avec home.page.ts c'est ce que je veux savoir, comment faire une relation entre ça?

1
votes

home.html Code: 

var bubble = (function(){
    var nodes = new vis.DataSet([
        {label: "Pop"},
        {label: "Alternative"},
        {label: "Rock"},
        {label: "Jazz"},
        {label: "Hits"},
        {label: "Dance"},
        {label: "Metal"},
        {label: "Experimental"},
        {label: "Rap"},
        {label: "Electronic"},
    ]);
    var edges = new vis.DataSet();

    var container = document.getElementById('bubbles');
    var data = {
        nodes: nodes,
        edges: edges
    };

    var options = {
        nodes: {borderWidth:0,shape:"circle",color:{background:'#F92C55', highlight:{background:'#F92C55', border: '#F92C55'}},font:{color:'#fff'}},
        physics: {
            stabilization: false,
            minVelocity:  0.01,
            solver: "repulsion",
            repulsion: {
                nodeDistance: 40
            }
        }
    };
    var network = new vis.Network(container, data, options);


    // Events
    network.on("click", function(e) {
        if (e.nodes.length) {
            var node = nodes.get(e.nodes[0]);
            // Do something
            nodes.update(node);
        }
    });
    export { nodes, edges, container, data, options, network };
})

home.ts Code 

import { Component,OnInit } from '@angular/core';
import * as bubble from './assets/js/bubble';
declare var bubble: any;
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage  implements OnInit{

    ngOninit(){
        bubble();
        }
}

bubble.js Code 

    <ion-header>
      <ion-toolbar>
        <ion-title>
          Ionic Blank
        </ion-title>
      </ion-toolbar>
    </ion-header>

<ion-content>

  <script src="assets/js/bubblefile.js"></script>

</ion-content>

1 commentaires

vérifiez le chemin de votre fichier

0
votes

A partir de @sivakumar Answer, je reçois quelques astuces pour utiliser le fichier .js

code home.html: 

var bubble = (function(){
    var nodes = new vis.DataSet([
        {label: "Pop"},
        {label: "Alternative"},
        {label: "Rock"},
        {label: "Jazz"},
        {label: "Hits"},
        {label: "Dance"},
        {label: "Metal"},
        {label: "Experimental"},
        {label: "Rap"},
        {label: "Electronic"},
    ]);
    var edges = new vis.DataSet();

    var container = document.getElementById('bubbles');
    var data = {
        nodes: nodes,
        edges: edges
    };

    var options = {
        nodes: {borderWidth:0,shape:"circle",color:{background:'#F92C55', highlight:{background:'#F92C55', border: '#F92C55'}},font:{color:'#fff'}},
        physics: {
            stabilization: false,
            minVelocity:  0.01,
            solver: "repulsion",
            repulsion: {
                nodeDistance: 40
            }
        }
    };
    var network = new vis.Network(container, data, options);


    // Events
    network.on("click", function(e) {
        if (e.nodes.length) {
            var node = nodes.get(e.nodes[0]);
            // Do something
            nodes.update(node);
        }
    });
})

code home.ts: 

import { Component, OnInit } from '@angular/core';
declare var bubble: any;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

  constructor() {
  }

  ngOnInit(): void {
    bubble();
  }
}

code bubblefile.js: 

<ion-header>
  <ion-toolbar>
    <ion-title>
      Music Bubble
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div id="bubbles">
  </div>
</ion-content>

1 commentaires

changez votre nom de fichier comme bulle

1
votes

Il existe une bibliothèque pour charger des fichiers JavaScript asynchrones. https://www.npmjs.com/package/scriptjs

Installez le package: 

document.querySelector('script[src="assets/js/search.js"]').remove();

Ensuite, utilisez-le n'importe où comme ci-dessous: 

$('head').append('<script async src="assets/js/search.js"></script>');

OU

Vous pouvez simplement utiliser le jquery pour ajouter ou supprimer la balise de script dans votre en-tête.

Pour ajouter un fichier .js, appelez la ligne ci-dessous sous ngOnInit (): 

import { get } from 'scriptjs';

ngOnInit() {

    get("assets/js/searchEmp.js", () => {
        getSerchInspContext = this;
        loadSearchEmp();
    });}`

Supprimer Fichier .js: 

npm i scriptjs

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO