Différences

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

--- slam4:richclient:angularjs:browserify [2015/03/12 16:30] – [12.2- Avec Browserify] jcheron
+++ slam4: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>
 <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">
 <head>
@@ Ligne 33: / Ligne 33: @@
 </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">
 <head>
 <meta charset="UTF-8">
 <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>
 </head></sxh><html></td>
 </tr>
@@ Ligne 50: / Ligne 47: @@
 ===== -- 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 :
@@ Ligne 60: / Ligne 57: @@
 </sxh>
+[[https://www.npmjs.com/|npm]] est un gestionnaire de packages pour javascript (installé avec node)
 ===== -- 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 :
-<sxh javascript;title:js/app.js;highlight:[3]>
+<sxh javascript;title:js/app2.js;highlight:[3]>
 angular.module("App2", []);
 angular.module("App2").controller("App2Controller", ["$scope",require("./controller2")]);
@@ Ligne 187: / Ligne 185: @@
 module.exports=function($routeProvider) {
 	$routeProvider.when('/page1', {
-		controller: 'AppController',
+		controller: 'App1Controller',
 		templateUrl: 'templates/main.html'
 	}).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 :
-  - Repasser à l'invite de commandes Node.js
+  - Repasser à l'invite de commandes
   - Aller dans le dossier js du projet
   - Entrer la commande :
@@ Ligne 232: / Ligne 230: @@
 === -- 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...).
 Mais c'est une méthode qui ne permet pas d'utiliser les CDN (google API par exemple).
+== Inclusion dans le projet ==
+A partir de la racine de votre application :\\
+Inclure Angular dans le projet à partir de npm :
+<sxh bash>
+npm install angular --save
+</sxh>
+Il faut ensuite créer un module utilisable par Browserify :
+Dans un fichier angular.browserify.js :
+<sxh javascript;title:angular.browserify.js>
+require('./node_modules/angular/angular.min');
+module.exports = angular;
+</sxh>
+Dans le fichier package.json :
+<sxh javascript;title:package.json>
+{
+  "browser": {
+    "angular-latest": "./angular.browserify.js"
+  }
+}
+</sxh>
+Il est ensuite possible d'inclure angular dans l'application par :
+<sxh javascript;title:app.js>
+var angular = require('angular-latest');
+angular.module("myApp",[]);
+</sxh>
+== Inclusion de modules supplémentaires ==
+On souhaite par exemple intégrer ngAnimate :
+Inclure Angular-animate dans le projet à partir de npm :
+<sxh bash>
+npm install angular-animate --save
+</sxh>
+L'inclure ensuite dans le projet :
+<sxh javascript;title:app.js>
+var angular = require('angular-latest');
+var modules = [require('angular-animate')];
+angular.module("myApp", modules);
+</sxh>
 === -- 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>
+Ou utilisez un des outils en ligne, du genre http://jscompress.com/ , http://javascript-minifier.com/ ...
+== Résultat : ==
 <html>
 <pre style="height: 200px; word-wrap: break-word;"></html><nowiki>
 !function e(r,t,n){function o(i,p){if(!t[i]){if(!r[i]){var u="function"==typeof require&&require;if(!p&&u)return u(i,!0);if(l)return l(i,!0);var c=new Error("Cannot find module '"+i+"'");throw c.code="MODULE_NOT_FOUND",c}var a=t[i]={exports:{}};r[i][0].call(a.exports,function(e){var t=r[i][1][e];return o(t?t:e)},a,a.exports,e,r,t,n)}return t[i].exports}for(var l="function"==typeof require&&require,i=0;i<n.length;i++)o(n[i]);return o}({1:[function(e){angular.module("App",["ngRoute",e("./app2")]).controller("App1Controller",["$scope",e("./controller1")]).directive("dirClient",e("./directives")).config(["$routeProvider",e("./routes")])},{"./app2":2,"./controller1":3,"./directives":5,"./routes":6}],2:[function(e,r){angular.module("App2",[]).controller("App2Controller",["$scope",e("./controller2")]),r.exports=angular.module("App2").name},{"./controller2":4}],3:[function(e,r){r.exports=function(e){e.client="Dupond"}},{}],4:[function(e,r){var t=function(e){e.client="Durand"};r.exports=t},{}],5:[function(e,r){r.exports=function(){return{template:"<div>Client : {{client}}</div>"}}},{}],6:[function(e,r){r.exports=function(e){e.when("/page1",{controller:"App1Controller",templateUrl:"templates/main.html"}).when("/page2",{controller:"App2Controller",templateUrl:"templates/main.html"}).otherwise({redirectTo:"/page1"})}},{}]},{},[1]);
 </nowiki><html></pre></html>