Come si possono compilare modelli angolari con Webpack?

Question

L'idea è di avere 1 file JS tra tutti i file html. e dopo appena usarlo tramite richiedono:

templateUrl: require('./views/user-list.html') 

Potrebbe condividere si verificano per favore? Stavo cercando su google e ho trovato diversi caricatori per il webpack ma non sono sicuro di cosa usare.

Answer 1

Ho deciso di utilizzare il caricatore ng-cache per il webpack insieme alla sintassi ES2015: significa import from anziché require.

Parte del mio webpack config:

module: { 
    loaders: [ 
     { test: /\.js$/, loader: 'babel', include: APP }, 
     { test: /\.html$/, loader: 'ng-cache?prefix=[dir]/[dir]' }, 
    ] 
    }, 

e l'esempio della direttiva con il modello:

import avatarTemplate from './views/avatar.html'; 

const avatar = function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     user: '=' 
    }, 
    template: avatarTemplate 
    } 
}; 

export default avatar; 

Answer 2

la vostra risposta è giusta. Tuttavia solo offrendo un'alternativa per esso:

const avatar = function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     user: '=' 
    }, 
    template: require("../path/to/file.html"), 
    } 
}; 

export default avatar; 

Answer 3

In Webpack.config il file è possibile aggiungere HTML principale come qui di seguito

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

], Includi HTML-loader in package.json e utilizzare il metodo seguito nella il blocco di configurazione è sufficiente.

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

Così tutti i parziali sarà in bundle nei bundle.js itself.No necessità di aggiungere i caricatori in webpack-config così