slam4:richclient:angularjs:browserify

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
slam4:richclient:angularjs:browserify [2016/02/02 02:33] – [1- Installation] jcheronslam4:richclient:angularjs:browserify [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
Ligne 47: Ligne 47:
 ===== -- Installation ===== ===== -- Installation =====
  
-  - Télécharger et installer **[[http://nodejs.org/download/|Node.js]]** +  - Télécharger et installer **[[https://nodejs.org/en/|Node.js]]** 
-  - Démarrer ensuite l'invite de commande node+  - Démarrer ensuite l'invite de commande
   - Frappez et exécuter :   - Frappez et exécuter :
  
Ligne 57: Ligne 57:
 </sxh> </sxh>
  
-[[https://www.npmjs.com/|npm]] est un gestionnaire de packages pour javascript+[[https://www.npmjs.com/|npm]] est un gestionnaire de packages pour javascript (installé avec node)
  
 ===== -- Mise en oeuvre ===== ===== -- Mise en oeuvre =====
Ligne 154: Ligne 154:
 Le module **App2** utilise le même principe, et exporte (**module.exports**) son nom (**name**), afin qu'il soit utilisé par **App1** comme dépendance : Le module **App2** utilise le même principe, et exporte (**module.exports**) son nom (**name**), afin qu'il soit utilisé par **App1** comme dépendance :
  
-<sxh javascript;title:js/app.js;highlight:[3]>+<sxh javascript;title:js/app2.js;highlight:[3]>
 angular.module("App2", []); angular.module("App2", []);
 angular.module("App2").controller("App2Controller", ["$scope",require("./controller2")]); angular.module("App2").controller("App2Controller", ["$scope",require("./controller2")]);
Ligne 185: Ligne 185:
 module.exports=function($routeProvider) { module.exports=function($routeProvider) {
  $routeProvider.when('/page1', {  $routeProvider.when('/page1', {
- controller: 'AppController',+ controller: 'App1Controller',
  templateUrl: 'templates/main.html'  templateUrl: 'templates/main.html'
  }).when('/page2', {  }).when('/page2', {
Ligne 201: Ligne 201:
  
 Pour créer le bundle Browserify, qui va réunir l'ensemble des sources JS définies dans l'application : Pour créer le bundle Browserify, qui va réunir l'ensemble des sources JS définies dans l'application :
-  - Repasser à l'invite de commandes Node.js+  - Repasser à l'invite de commandes
   - Aller dans le dossier js du projet   - Aller dans le dossier js du projet
   - Entrer la commande :   - Entrer la commande :
Ligne 230: Ligne 230:
  
 === -- Intégration d'angular === === -- Intégration d'angular ===
 +<html><div class="todo">A faire, mais chez vous, ou plus tard... </div></html>
 Il est également possible d'utiliser Browserify pour l'intégration d'angularJS, et de ses modules liés (ngCookies, ngRoute...). Il est également possible d'utiliser Browserify pour l'intégration d'angularJS, et de ses modules liés (ngCookies, ngRoute...).
 Mais c'est une méthode qui ne permet pas d'utiliser les CDN (google API par exemple). Mais c'est une méthode qui ne permet pas d'utiliser les CDN (google API par exemple).
Ligne 282: Ligne 283:
  
 === -- Minification === === -- Minification ===
 +Installer uglifyjs :
 +<sxh bash>
 +npm install uglify-js -g
 +</sxh>
 +
 +puis minifiez le bundle par :
 +<sxh bash>
 +uglifyjs bundle.js -mc > bundle.min.js
 +</sxh>
  
-Utilisez un des outils en ligne, du genre http://jscompress.com/ , http://javascript-minifier.com/ ...+Ou utilisez un des outils en ligne, du genre http://jscompress.com/ , http://javascript-minifier.com/ ...
  
 == Résultat : == == Résultat : ==
  • slam4/richclient/angularjs/browserify.1454376782.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)