Webpack: использование require для ng-include

Я новичок в веб-пакете, и сейчас я впервые использую его в одном из своих угловых проектов.

Я хочу использовать функцию require в моем html-файле, чтобы потребовать шаблон для ng-include, например:

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

Я знаю, что есть загрузчики вроде ng-cache и ngtemplate, но они не работают так, как мне нужно. С ними я должен сначала потребовать шаблон в js, а затем использовать имя шаблона в моем html-файле.

Как это сделать?


webpack javascript angularjs angularjs-ng-include
person Sebastian    schedule 30.10.2015    source источник
comment
Создать директиву — самый простой способ. Можно потом требовать в директиве - иначе ищи загрузчик   -  person Callum Linington    schedule 30.10.2015
comment
stackoverflow.com/ вопросы/30605266/   -  person Callum Linington    schedule 30.10.2015

Ответы (4)


arrow_upward
16
arrow_downward

Вы можете использовать webpack-required-loader в npm.

В вашем приложении js или модуле js добавьте комментарий:

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

И в своем шаблоне вы можете использовать

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

Ngtemplate будет работать нормально. Ng-cache тоже работает.

Также обратите внимание, что в директиве ng-include нет необходимости указывать относительный путь, потому что об этом позаботится добавление команды //@require в начало файла записи.

Наконец, обратите внимание, что вы должны использовать двойные и одинарные кавычки, чтобы заставить ng-include работать. Так что вы бы сделали "'template-name.html'", а не "template-name.html" или 'template-name.html'.

Как настроить загрузчики конфигурации

person shanhaichik    schedule 26.12.2015
comment
Как вы настроили загрузчики? - person ave; 01.04.2016
comment
@ave, привет. В моем последнем проекте я использую эту конфигурацию: Конфигурация веб-пакета loaders: ['ng-annotate','babel','required?import[]=angular'] В приложении import angular from 'angular'; ... //@require "./components/**/index.js" //@require "./views/**/*.html" ... angular.module('sep', requiresModules) .config(onConfig) .run(onRun); - person shanhaichik; 03.04.2016
comment
@ave, если у вас есть какие-либо вопросы или предложения. Напишите сюда, я постараюсь ответить. - person shanhaichik; 03.04.2016
comment
спасибо за ваш отличный ответ. но почему вы не обновляете свой ответ вопросом -Ave и не добавляете его в комментарии? :) - person Mojtaba Pourmirzaei; 02.11.2016
comment
@MojtabaPourmirzaei, привет. Добавьте ссылку, как настроить загрузчики :) - person shanhaichik; 02.11.2016
comment
Кажется, что он устарел из-за новых ошибок веб-пакета, таких как: использование должно использовать требуемый загрузчик, а не просто требовать. - person davidbuttar; 05.01.2017
comment
Привет, @davidbuttar! Не понимаю тебя - person shanhaichik; 05.01.2017
comment
В ваших документах вы говорите такие вещи, как «загрузчик: ng-cache», но когда я запускаю это, он говорит что-то вроде нарушения изменений, вы должны включить -loader, например. 'loader: ng-cache-loader', поэтому предполагается, что этот помощник устарел. Сейчас я избегаю ng-include, так что это не нужно, но я подумал, что упоминаю об этом. - person davidbuttar; 05.01.2017

arrow_upward
26
arrow_downward

Другим подходом может быть преобразование my-template.html в компонент angular: предполагается, что вы используете html-loader для загрузки файлов HTML (loaders: {test: /\.html/, loader: 'html'}), определите компонент myTemplate в файле JavaScript вашего модуля:

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

После этого используйте его:

<my-template></my-template>
person simon04    schedule 13.12.2016
comment
Спасибо за совет! ИМО и для моего случая использования проще, чем другие ответы :) - person troig; 16.09.2017
comment
Это хороший ответ, однако он не отвечает на вопрос: как насчет условия ng-include? - person SchemeSonic; 13.05.2019

arrow_upward
22
arrow_downward

Вы можете использовать загрузчик HTML и угловой сервис $templateCache

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

Конфигурация загрузчика webpack:

{
    test: /\.html$/,
    loader: 'html',
    query: {
        root:sourceRoot
    }
}
person shengbeiniao    schedule 15.03.2016
comment
Спасибо, работает и просто, без дополнительного загрузчика (ну html загрузчик вполне стандартный, я имею в виду). Для справки, он также работает с необработанным загрузчиком в соответствии с конфигурацией, найденной на github.com/preboot/ angular-webpack Для тестирования (dev/prod) для других конфигураций, если включенный фрагмент ссылается на изображения. - person PhiLho; 21.06.2016
comment
Для справки, я сделал вариант вышеупомянутого проекта на github.com/PhiLhoSoft/Angular-Webpack. -Игровая площадка, где я добавил ng-include, как вы показываете. - person PhiLho; 21.06.2016

arrow_upward
3
arrow_downward

Я уже публиковал это на https://stackoverflow.com/a/34815472/833093, но:

Чтобы включить, вы должны настроить параметр «relativeTo», иначе ваши частичные шаблоны будут загружены в «/home/username/path/to/project/path/to/template/» (проверьте свой bundle.js, вы, вероятно, пропускаете свой имя пользователя в ваших проектах)

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

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

Затем в вашем коде побочный эффект требует только:

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

Затем вы можете загрузить html:

<div ng-include src="'/webapp/templates/path/to/template.html'"</div>
person Thomas Grainger    schedule 15.01.2016