angularjs - otherwise - ui router ejemplos

Cargando plantilla relativaUrl

Question

He estado tratando de encontrar la mejor manera de crear una aplicación angular modular y escalable. Realmente me gusta la estructura de proyectos como angular-boilerplate , angular-app , donde todos los archivos relacionados se agrupan por características para parciales y directivas.

project
|-- partial
|   |-- partial.js
|   |-- partial.html
|   |-- partial.css
|   |-- partial.spec.js

Sin embargo, en todos estos ejemplos, la URL de la plantilla se carga en relación con la URL base, no con respecto al archivo actual:

angular.module(''account'', [])
.config(function($stateProvider) {
  $stateProvider.state(''account'', {
    url: ''/account'',
    templateUrl: ''main/account/account.tpl.html'', // this is not very modular
    controller: ''AccountCtrl'',
  });
})

Esto no es muy modular y podría ser difícil de mantener en grandes proyectos. Debería recordar cambiar la ruta de templateUrl cada vez que muevo alguno de estos módulos. Sería bueno si hubiera alguna forma de cargar la plantilla en relación con el archivo actual como:

templateUrl: ''./account.tpl.html''

¿Hay alguna manera de hacer algo como esto en angular?

Answer 1

Actualmente es posible hacer lo que quiera usando el cargador de módulos de systemJs .

import usersTemplate from ''./users.tpl'';

var directive = {
   templateUrl: usersTemplate.name
}

Puede consultar el buen ejemplo aquí https://github.com/swimlane-contrib/angular1-systemjs-seed

Answer 2

Creo que eventualmente encontrará que mantener las rutas relativas al archivo js será más difícil, si es posible. Cuando llegue el momento de su envío, lo más probable es que desee concatenar todos sus archivos javascript en un solo archivo, en cuyo caso va a querer que las plantillas estén relacionadas con la baseUrl. Además, si está obteniendo las plantillas a través de ajax, lo que Angular hace de manera predeterminada a menos que las prepare previamente en $ templateCache, definitivamente las querrá en relación con la baseUrl, por lo que el servidor sabrá dónde encontrarlas una vez que su js El archivo ya ha sido enviado al navegador.

¿Quizás la razón por la que no le gusta tenerlos en relación con la baseUrl en desarrollo es porque no está ejecutando un servidor localmente? Si ese es el caso, cambiaría eso. Te hará la vida mucho más fácil, especialmente si vas a trabajar con rutas. Me gustaría probar Grunt , tiene un servidor muy simple que puede ejecutar localmente para imitar una configuración de producción llamada Grunt Connect . También puede registrar un proyecto como Yeoman , que proporciona un entorno de desarrollo front-end preempaquetado con Grunt, por lo que no tiene que perder mucho tiempo en la configuración. El proyecto Angular Seed es también un buen ejemplo de una configuración Grunt para el desarrollo local.

Answer 3

Había estado usando templateUrl: ''./templateFile.tpl.html pero actualicé algo y se rompió. Así que tiré esto allí.

He estado usando esto en mi objeto Gruntfile.js html2js:

html2js: {
  /**
   * These are the templates from `src/app`.
   */
  app: {
    options: {
      base: ''<%= conf.app %>'',
      rename: function( templateName ) {
        return templateName.substr( templateName.lastIndexOf(''/'') );
      }
    },
    src: [ ''<%= conf.app %>/**/{,*/}<%= conf.templatePattern %>'' ],
    dest: ''.tmp/templates/templates-app.js''
  }
}

Sé que esto puede llevar a conflictos, pero ese es un problema menor para mí que tener que editar /path/to/modules/widgets/wigdetName/widgetTemplate.tpl.html en cada archivo, siempre lo /path/to/modules/widgets/wigdetName/widgetTemplate.tpl.html en otro proyecto.

Answer 4

He estado masticando este tema por un tiempo ahora. Utilizo gulp para empaquetar mis plantillas para la producción, pero luchaba por encontrar una solución con la que estuviera contento para el desarrollo.

Aquí es donde terminé. El fragmento de código a continuación permite que cualquier url sea reconfigurado como mejor le parezca.

angular.module(''rm'').config(function($httpProvider) {

  //this map can be defined however you like
  //one option is to loop through script tags and create it automatically
  var templateMap = {
    "relative.tpl.html":"/full/path/to/relative.tpl.html",
    etc...
  };

  //register an http interceptor to transform your template urls
  $httpProvider.interceptors.push(function () {
    return {
      ''request'': function (config) {
        var url = config.url;
        config.url = templateMap[url] || url;
        return config;
      }
    };
  });
});

Answer 5

La mejor manera de hacerlo ahora es usar un cargador de módulos como browserify, webpack o mecanografiado. Hay muchos otros también. Dado que los requisitos se pueden realizar desde la ubicación relativa del archivo, y la ventaja adicional de poder importar plantillas a través de transformaciones o cargadores como la parcialización, ni siquiera tiene que usar las URL de las plantillas. Simplemente en línea la plantilla a través de un requerimiento.

Mi antigua respuesta todavía está disponible a continuación:

Escribí una publicación sobre exactamente este tema y hablé sobre ello en nuestro Angular Meetup local. La mayoría de nosotros ahora lo estamos usando en producción.

Es bastante simple siempre que su estructura de archivos esté representada de manera efectiva en sus módulos. Aquí está una vista previa rápida de la solución. El enlace completo del artículo sigue.

var module = angular.module(''myApp.things'', []);

var all = angular.module(''myApp.things.all'', [
    ''myApp.things'',
    ''things.someThing'',
    ''things.someOtherThing'',
    ''things.someOtherOtherThing'',
]);

module.paths = {
    root: ''/path/to/this/thing/'',
    partials: ''/path/to/this/thing/partials/'',
    sub: ''/path/to/this/thing/sub/'',
};

module.constant(''THINGS_ROOT'', module.paths.root);
module.constant(''THINGS_PARTIALS'', module.paths.partials);
module.constant(''THINGS_SUB'', module.paths.sub);

module.config(function(stateHelperProvider, THINGS_PARTIALS) {

    stateHelperProvider.setNestedState({
        name: ''things'',
        url: ''/things'',
        templateUrl: THINGS_PARTIALS + ''things.html'',
    });
});

Y luego, cualquier módulo secundario o módulo "relativo" se ve así:

var module = angular.module(''things.someThing'', [''myApp.things'']);
var parent = angular.module(''myApp.things'');

module.paths = {
    root: parent.paths.sub + ''/someThing/'',
    sub: parent.paths.sub + ''/someThing/sub/'',
    partials: parent.paths.sub + ''/someThing/module/partials/'',
};

module.constant(''SOMETHING_ROOT'', module.paths.root);
module.constant(''SOMETHING_PARTIALS'', module.paths.partials);
module.constant(''SOMETHING_SUB'', module.paths.sub);

module.config(function(stateHelperProvider, SOMETHING_PARTIALS) {

    stateHelperProvider.setNestedState({
        name: ''things.someThing'',
        url: "/someThing",
        templateUrl: SOMETHING_PARTIALS + ''someThing.html'',
    });
});

¡Espero que esto ayude!

Artículo completo: Relative AngularJS Modules

¡Aclamaciones!