Browserify

Ceci est une ancienne révision du document !

Browserify est une bibliothèque javascript, utilisable en ligne de commande.
Browserify permet le découpage d'une application javascript en modules :

Par la création d'un seul point d'entrée dans l'application en façade (bundle.js)
En facilitant la référence à des fichiers annexes (require(“./autreFichier”))

Sans Browserify

Avec Browserify

<!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/app2.js"></script>
	<script src="js/controller2.js"></script>
	<script src="js/app.js"></script>
	<script src="js/controller1.js"></script>
	<script src="js/directives.js"></script>
	<script src="js/routes.js"></script>
	...

</head>

<!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>

Télécharger et installer Node.js
Démarrer ensuite l'invite de commande node
Frappez et exécuter :


npm install -g browserify

L'application affiche simplement 2 pages (définies dans le fichier routes.js), à partir de contrôleurs différents.
Le module principal est App (défini dans app.js), il requiert le module App2, le contrôleur App1Controller, la directive dirClient

Pour que l'application fonctionne correctement, tous les fichiers js doivent être inclus dans le fichier HTML, et dans un ordre cohérent, respectant les dépendances (app2.js avant app.js).

<!DOCTYPE html>
<html data-ng-app="App">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.min.js"></script>

	<script src="js/app2.js"></script>
	<script src="js/controller2.js"></script>
	<script src="js/app.js"></script>
	<script src="js/controller1.js"></script>
	<script src="js/directives.js"></script>
	<script src="js/routes.js"></script>

</head>
<body>
	<h1>Main</h1>
	<ul>
		<li><a href="#page1">Page 1</a></li>
		<li><a href="#page2">Page 2</a></li>
	</ul>
	<data-ng-view></data-ng-view>
</body>
</html>

angular.module("App2", []);

angular.module("App2").controller("App2Controller", ["$scope",function($scope) {
	$scope.client="Durand";
}]);

angular.module("App", ['ngRoute','App2']);

angular.module("App").controller("AppController", ["$scope",function($scope) {
	$scope.client="Dupond";
}]);

angular.module("App").directive("dirClient", function() {
	return {
		template : "<div>Client : {{client}}</div>"
	};
})

angular.module("App").config(["$routeProvider",function($routeProvider) {
	$routeProvider.when('/page1', {
		controller: 'AppController',
		templateUrl: 'templates/main.html'
	}).when('/page2', {
		controller: 'App2Controller',
		templateUrl: 'templates/main.html'
	}).otherwise({
		redirectTo: '/page1'
	});
}]);

<dir-client></dir-client>

Browserify

-- Installation

-- Mise en oeuvre

-- Projet simple sans Browserify