Включите угловой шаблон в другой с помощью webpack

У меня проблема с использованием углового и webpack. Мой проект состоит из нескольких видов с контроллерами.Включите угловой шаблон в другой с помощью webpack

Например, у меня есть вид userSummary.tmpl.html, который загружает список всех пользователей. Я хотел бы повторно использовать этот шаблон в другом groupSummary.tmpl.html, который отображает всех пользователей.

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

Возможно ли это?

источник

2015-06-02 Donovan Charpin

Почему с помощью Webpack, когда вы можете пойти для маршрутизации и вложенных взглядов? Посмотрите здесь https://github.com/angular-ui/ui-router – Michelangelo

Спасибо @Mikey. Я использую плагин ui-router, но, похоже, он не работает в моем случае. Я уже использую шаблон в своем состоянии, и я не могу добавить представление с помощью ui-view в html. –

Нечетный. Работает каждый раз для меня. Что вы хотите, это вложенные представления или нет? – Michelangelo

Чтобы включить параметр «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>

источник

2016-01-15 16:22:15

Интересно, я попробую это. Спасибо –

@DonovanCharpin, если это работает, вы можете выбрать это как одобренный ответ. –

Если это использует специальный загрузчик (как кажется), было бы неплохо дать ссылку (и имя НПМ) для этого загрузчика ... – PhiLho

Вы можете использовать ng-include при использовании примерно ngtemplate-loader или ng-cache-loader. Это, как вы упомянули, свяжет все это в файл.

Хотя вы также можете разделить материалы на отдельные файлы с помощью file-loader, которые будут клонировать файл в каталоге пакетов и предоставлять вам пути к каждому файлу HTML и будут работать одинаково в угловом формате.

источник

2015-10-08 20:31:44 marksyzm

Я использую ngtemplate-загрузчик, но это не вызывает на нг-включать на всех –

Вы должны использовать его вне угловой составляющей, еще он не будет включать. Неужели это действительно стоит? – marksyzm

В Webpack.config файл, вы можете добавить основной HTML, как показано ниже

plugins: [ 
    new HtmlWebpackPlugin({ 
    template: 'index.html' 
    }), 
    new ExtractTextPlugin('bundle.css') 
    ],

Включить HTML-погрузчик в package.json ниже и используйте метод в конфигурационном блоке само по себе достаточно.

$stateProvider.state('app', { 
    url: '/app', 
    template: require('html-loader!root/app/Common/templates/role.html'), 
    controller: 'roleController' 
})

Таким образом, все обертоны будут группироваться в пределах bundle.js itself.No нужно добавить загрузчики в WebPack-конфигурации, а также

источник

2017-08-04 16:24:40 user1645290

Пожалуйста, не публикуйте [идентичные] (http://stackoverflow.com/a/45511348) [ответы] (http://stackoverflow.com/a/45511404) на несколько вопросов. Отправьте один хороший ответ, затем проголосовате/отметьте, чтобы закрыть другие вопросы как дубликаты. Если вопрос не является дубликатом, * приложите свои ответы на вопрос. * –

Updtaed конфиг для Webpack 3

{ 
    test: /\.html$/, 
    exclude: /node_modules/, 
    use: [ 
     { loader: 'ngtemplate-loader?relativeTo=' + __dirname + '/app' }, 
     { loader: 'html-loader' } 
    ] 
    },

Затем html можно импортировать, используя требование в вашем js-файле компонента.

require('../../templates/path/to/template.html');

и в вашем HTML файл компоненты

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

источник

2018-02-06 16:16:50

Включите угловой шаблон в другой с помощью webpack

ответ

Смежные вопросы