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:18] – [2.2- Avec Browserify] jcheronslam4:richclient:angularjs:browserify [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
Ligne 16: Ligne 16:
 <td>Sans Browserify</td><td>Avec Browserify</td></tr> <td>Sans Browserify</td><td>Avec Browserify</td></tr>
 <tr> <tr>
-<td></html><sxh html;title:index.html;highlight:[9,10,11,12,13,14,15]><!DOCTYPE html>+<td></html><sxh html;title:index.html;highlight:[6,7,9,10,11,12,13,14,15]><!DOCTYPE html>
 <html data-ng-app="App"> <html data-ng-app="App">
 <head> <head>
Ligne 33: Ligne 33:
  
 </head></sxh><html></td> </head></sxh><html></td>
-<td></html><sxh html;title:index.html;highlight:[9]><!DOCTYPE html>+<td></html><sxh html;title:index.html;highlight:[6]> 
 +<!DOCTYPE html>
 <html data-ng-app="App"> <html data-ng-app="App">
 <head> <head>
 <meta charset="UTF-8"> <meta charset="UTF-8">
 <title>Insert title here</title> <title>Insert title here</title>
- <script src="libs/angular.min.js"></script> 
- <script src="libs/angular-route.min.js"></script> 
- 
  <script src="js/bundle.js"></script>  <script src="js/bundle.js"></script>
- 
 </head></sxh><html></td> </head></sxh><html></td>
 </tr> </tr>
Ligne 50: 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 60: Ligne 57:
 </sxh> </sxh>
  
 +[[https://www.npmjs.com/|npm]] est un gestionnaire de packages pour javascript (installé avec node)
  
 ===== -- Mise en oeuvre ===== ===== -- Mise en oeuvre =====
Ligne 156: 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 187: 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 203: 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 232: 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 284: 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.1454375934.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)