0

Estoy tratando de aprender a hacer aplicaciones modulares con Angular, pero para hacerlo estoy experimentando con las webs que realizo en mi trabajo. No sé si es posible o si estará bien aplicado, pero según entiendo, lo que quiero es crear diferentes módulos, por ejemplo un módulo para el slider con su propio controlador, un módulo para la barra de navegación con su respectivo controlador y así con algún otro componente.

Estoy usando routeProvider para las rutas y “creo” que solo se puede añadir un controlador que se encargará de la lógica de esa vista. Mi problema es que en cada vista voy a necesitar usar el controlador del nav, el controlador del slider etc y no solo 1 controlador a la vez. No sé si esto realmente se hace así, de seguro lo estoy entendiendo mal. Soy nuevo con angular y la programación en general, pero quiero seguir y acostumbrarme con buenas prácticas.

Si no es así, ¿podrían decirme como construir aplicaciones modulares? Por ejemplo tener una aplicación que tenga en la misma vista un módulo de usuarios, un módulo de estadisticas, un módulo de lo que sea que se nos ocurra y cada uno funcione de forma independiente, con lo cual yo podría activar o desactivar cualquier módulo mediante configuración en un panel de control por ejemplo.

5
  • Puedes hechar un vistazo a github.com/johnpapa/angular-styleguide. Es sólo una de las múltiples formas de estructurar tu aplicación. Esto esta basado principalmente en opiniones.
    – devconcept
    el 21 mar. 2016 a las 20:55
  • 3
    Creo yo que te estás enfrentando a varios problemas aquí: aprender a programar, aprender a programar en AngularJS, aprender a crear componentes reutilizables utilizando AngularJS, aprender a crear aplicaciones de forma modular, comprender qué significa Single Page Application, entre otros. Te recomiendo que detengas el coche porque vas demasiado acelerado y pierdes muchas cosas y vayas aprendiendo poco a poco.
    – user227
    el 21 mar. 2016 a las 20:56
  • Muchas gracias, ahora mismo estoy en el trabajo y voy a probarlo. Seguramente volveré a postear con los resultados obtenidos.
    – ClaudioZ
    el 21 mar. 2016 a las 20:57
  • Con respecto a SPA ya hice un mini-juego. No es que nosé nada, he visto logica en la facultad y visual basic, javascript y demás por mi cuenta. Pero quiero seguir las mejores practicas, y si... tienes razón, tengo que ver muchas cosas, en especial quiero aprender ahora componentes reutilizables.
    – ClaudioZ
    el 21 mar. 2016 a las 20:59
  • puedes lograr esto creando directivas para cada modulo el 22 mar. 2016 a las 1:35

1 respuesta 1

1

La manera de separar un comportamiento de forma modular en angular es usando directivas y/o componentes. Te pongo un ejemplo (Angular 1.5+):

layouts/header.component.js

function HeaderController() {
  var ctrl = this;
  ctrl.brand = 'NombreDeEmpresa';
}
angular.module('app.layouts').component('myHeader', {
  bindings: {},
  controller: HeaderController,
  template: '<div class="header">'+
            '<div class="brand">{{ $ctrl.brand }}</div>'+
            '</div>'
});

layouts/footer.component.js

function FooterController() {
  var ctrl = this;
  ctrl.author = 'NombreAutor';
}
angular.module('app.layouts').component('myFooter', {
  bindings: {},
  controller: FooterController,
  template: '<footer>Hecho por {{ $ctrl.author }} </footer>'
});

Definición de las rutas:

//...
.when("/inicio", {
  controller: "InicioCtrl",
  templateUrl: "ruta/al/template/inicio.html"
})
//...

inicio.html

<my-header></my-header>
<div>....</div>
<my-footer></my-footer>

Esto tambien puedes hacerlo con directivas dependiendo el caso (revisa la documentación para saber cuando conviene mas usar directivas o componentes).

Por otro lado, otra solución menos elegante es usar la directiva ng-include :

  <ng-include src="'app/layouts/header.html'"></ng-include>
  <div>Contenido de mi inicio controller</div>
  <ng-include src="'app/layouts/footer.html'"></ng-include>

Y en cada template puedes asignar un controlador ng-controller=HeaderCtrl.

Por último, probablemente la mejor solución para este tipo de problema es usar angular ui-router para reemplazar el $routeProvider. Con esta libreria manejas las rutas como estados, de esta manera puedes declarar un estado como "abstracto" y que el resto de rutas "hereden" de él.

$stateProvider
.state('root', {
  templateUrl: 'app/layouts/base.html',
  controller: 'MainCtrl as ctrl',
  abstract: true 
})
.state('perfil', { //hereda de la base 'root' 
  url: '/perfil',
  parent: 'root',
  templateUrl: 'app/usuarios/perfil.html',
  controller: 'ProfileCtrl as ctrl'
})

app/layouts/base.html

<div class="main">
  <my-header></my-header>
  <div ui-view></div>
  <my-footer></my-footer>
</div>

Espero haberte ayudado. Saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.