Tutorial migracion – From: Angular/YeoMan to: SGE/JBoss – Pasos a realizar - Migracion

View Github Repository Open presentation in a new window

darioodiaz

See all presentation from darioodiaz

Tutorial migracion – From: Angular/YeoMan to: SGE/JBoss – Pasos a realizar - Migracion

0 0

migracionAngularSge

Tutorial de como migrar desde Yeoman o HTML al modelo SGE/JBoss

On Github darioodiaz / migracionAngularSge

Tutorial migracion

From: Angular/YeoMan to: SGE/JBoss

Pasos a realizar - Start!

  • Crear dentro scripts/app, una carpeta con el nombre ng-CU
  • Dentro de esa carpeta, crear las carpetas controllers, services, modules o la forma de organizacion que sea comodo
  • Crear un archivo CUapp.js

Pasos a realizar - 2nd round

Pasos a realizar - Migracion

//Controller, service o modulo normal
var modulo = angular.module('templateModule', []);
modulo.controller("TemplateCtrl", ["dependencies", function(inyection) {
	....
}]);

app/ng-CU/controllers/misControllers.js

//Definiendo modulo Require
define([], function() {
var moduleDef = {};
moduleDef.init = function(app) {
	//Aqui crear el controller #TagAQUI
	app.controller("TemplateCtrl", ["dependencies", function(inyection) {
		    ....
	}]);
	//Repetir #TagAQUI para cada controller que se use
};
return moduleDef;
});

Migracion para services

app/ng-CU/services/misServices.js

//Definiendo modulo Require
define([], function() {
var moduleDef = {};
moduleDef.init = function(app) {
	//Aqui crear el controller #TagAQUI
	app.service("TemplateSrv", ["dependencies", function(inyection) {
		    ....
	}]);
	//Repetir #TagAQUI para cada service que se use
};
return moduleDef;
});

Pasos a realizar - Creacion del modulo principal

app/ng-CU/CUapp.js

//Definiendo modulo Require
define(["angular", "CUCtrls", "CUSrvs", ..], function(angular, ctrls, svrs, ..) {
var CUModule = angular.module("CUApp", ["dependencies"]);
ctrls.init(CUModule);
svrs.init(CUModule);

angular.bootstrap(document.getElementsByTagName("body")[0], [ "CUApp" ]); //si usamos el body
angular.bootstrap(document.getElementById("ID")[0], [ "CUApp" ]); //si vamos a usar otro elemento

return CUModule;
});

Pasos a realizar - Config general en JSP

  • Creamos la Index.jsp o traemos nuestra Index.html y la renombramos a .jsp
  • Aramos la cabezera como cualquier jsp con los <jsp:include> como siempre
  • Eliminamos los scripts bower, etc e incluimos al final de todo una sola etiqueta <script>

Pasos a realizar - Config general en JSP

<script>
	require("app/config.js", function(config) {
		//Por cada modulo Require que hemos creado hacemos config.addPath, donde los parametros son:
		//1º parametro: Nombre que se usa en la inyecion del modulo principal, ej. CUCtrls, CUSrvs, etc
		//2º parametro: Ruta del archivo siguiendo la siguiente sintaxis ng-CU/carpeta/archivo (sin la extension js). Ej. ng-template/controllers/misControllers
		config.addPath("CUCtrls" ,"ng-CU/controllers/controllers", true);
		config.addPath("CUSrvs" ,"ng-CU/services/services", true);
		//Si hubieran mas controllers, services, etc hacer una addPath por cada uno
		//Por ultimo tambien agregamos el CUApp (sin la extension js)
		config.addPath("CUApp" ,"ng-CU/CUApp", true);
		//Realizamos la configuracion
		config.init();
		//Traemos nuestra ng-app :D
		require(["CUApp"], function() {
		});

	});
</script>

Fin :D

Hay un ejemplo en scritps/app/ng-TemplateCU (para los scripts)

Y views/TemplateCU (para las views)

Menu