web-dev-qa-db-fra.com

Comment inclure et utiliser des modules de nœuds dans votre application Ionic / AngularJs?

J'ai une application Ionic et j'aimerais inclure le module de nœud angular-base64 à utiliser dans mes contrôleurs, ou même envelopper dans une angular etc. Je suis allé de l'avant et j'ai couru

npm install angular-base64

Qui est allé de l'avant et a installé le dossier contenant angular-base64.min.js fichier à l'intérieur /myIonicApp/node_modules/. Le chemin complet du fichier est donc /myIonicApp/node_modules/angular-base64/angular-base64.min.js.

Cependant, lorsque j'essaie d'utiliser le module dans l'un de mes contrôleurs comme celui-ci:

app.controller('myController', ['$scope', '$base64',
  function($scope, $base64) {

    //$base64... 

  }
]);

Il n'a aucune idée de quoi je parle. Dois-je faire autre chose pour que cela fonctionne? Peut-être quelque chose dans mon app.js?

javascriptangularjsnode.jsionic-frameworkionic
26
user818700

La réponse acceptée n'est plus exacte pour Ionic V2 et le .bowerrc a été supprimé de l'installation par défaut.

Voici comment vous le faites maintenant , à partir des documents officiels Ionic V2.

Pour ajouter une bibliothèque tierce à une application, exécutez la commande suivante:

npm install --save

ex: utilisation de la fonction importée

// modèle d'exportation nommé

importer {maFonction} de 'theLibraryName';

...

// utilise la fonctionnalité importée

myFunction ();

8
Quinn Daley

La réponse acceptée n'est pas correcte. Afin d'ajouter des modules côté client à votre application Ionic/AngularJS, vous devez utiliser Bower et non NPM. NPM ne doit être utilisé que pour installer des modules faisant partie des processus de développement/génération/déploiement. Tout ce que vous souhaitez rencontrer auprès de vos utilisateurs dans le cadre du package côté client doit être géré par Bower.

Si vous regardez dans le fichier .bowerrc, Vous verrez ce qui suit:

{
  "directory": "www/lib"
}

Cette configuration définit le répertoire www/lib Comme la maison de tout ce qui est installé par bower. Si vous utilisez la commande suivante, le package sera installé à l'emplacement correct:

bower install --save angular-base64

(L'indicateur --save Enregistre la dépendance dans votre fichier bower.json.)

Vous pouvez maintenant ajouter la balise de script à votre fichier index.html: <script src="lib/angular-base64/angular-base64.min.js"></script>

Vous devrez également injecter le module dans votre application comme décrit ci-dessus. Dans app.js Ajoutez le module comme suit: angular.module('starter', ['base64'])

Lorsque j'utilise des outils comme Bower ou NPM, je trouve que devoir apporter des modifications manuelles à une installation est souvent le premier signe que je l'ai mal fait!

25
shawnr

  • Placez le répertoire angular-base64/angular-base64.min.js Dans www/lib.

  • Incluez le fichier JS dans index.html (Par exemple: <script src="lib/angular-base64/angular-base64.min.js"></script>.

  • Injectez le module dans app.js: angular.module('starter', ['base64']).

Ensuite, vous devriez pouvoir utiliser base64 Partout dans votre application.

9
Vidul