javascript - body - Paquete web: usar require para ng-include

meta html

Question

Soy nuevo en el paquete web y ahora lo estoy usando por primera vez en uno de mis proyectos angulares.

Quiero usar la función require en mi archivo html para poder solicitar la plantilla para una ng-include como esta:

<div ng-include="require(./my-template.html)"></div>

Sé que hay cargadores como ng-cache y ngtemplate, pero no funcionan de la manera que lo necesito. Con ellos, tengo que solicitar la plantilla primero y luego usar el nombre de la plantilla en mi archivo html.

¿Cómo lograr esto?

Answer 1

Otro enfoque sería transformar my-template.html en un componente angular : suponiendo que use html-loader para cargar sus archivos HTML ( loaders: {test: //.html/, loader: ''html''} ), defina un componente myTemplate en su archivo JavaScript de módulo:

import myTemplate from ''./my-template.html'';
angular.module(...)
  .component(''myTemplate'', {template: myTemplate})

Luego úsala:

<my-template></my-template>

Answer 2

Puede usar webpack-required-loader en npm.

En su aplicación js o módulo js agregue comentario:

//@require "./**/*.html" 

Y en tu plantilla puedes usar

<div ng-include="''my-template.html''"></div>

Ngtemplate funcionará bien. Ng-cache también funciona.

También tenga en cuenta que no hay necesidad de una ruta relativa en la directiva ng-include porque eso se soluciona agregando el comando //@require al principio de su archivo de entrada.

Por último, tenga en cuenta que debe usar comillas dobles e individuales para que ng-include funcione. Entonces harías "''template-name.html''" , no "template-name.html" , o ''template-name.html'' .

Cómo cargadores config

Answer 3

Puede usar el cargador HTML y el servicio angular $ templateCache

angular
    .module(''template'',[])
    .run([''$templateCache'', function($templateCache) {
        var url = ''views/common/navigation.html'';
        $templateCache.put(url, require(url));
    }]);

configuración del cargador webpack:

{
    test: //.html$/,
    loader: ''html'',
    query: {
        root:sourceRoot
    }
}

Answer 4

Ya he publicado esto en https://.com/a/34815472/833093 pero:

Para habilitarlo, debe configurar el parámetro "relativeTo"; de lo contrario, los parciales de su plantilla se cargarán en "/ home / username / path / to / project / path / to / template /" (Compruebe su paquete.js, probablemente esté filtrando su nombre de usuario en sus proyectos)

var ngTemplateLoader = (
    ''ngtemplate?relativeTo='' + path.resolve(__dirname, ''./src/'') +
    ''!html''
);

module.exports = {
    ...
    module: {
        loaders: [
            {test: //.html$/, loader: ngTemplateLoader},
        ],
    },
    ...
}

Luego, en su código, haga un efecto secundario solo requiera:

// src/webapp/admin/js/foo.js
require(''../../templates/path/to/template.html'');

Entonces puedes cargar el html:

<div ng-include src="''/webapp/templates/path/to/template.html''"</div>