webpack html-loader Açısal uygulama

Question

ifadeleri gerektiren src özniteliklerini değiştirmeyerek açısal öğrenmeye çalışıyorum. Ben bir test projesi var Bu eğitimde aşağıdaki Ben kurulum o:

http://shmck.com/webpack-angular-part-1/

benim html dosyalarını ayrıştırmak için html-yükleyici kullanabilir ve benim img etiketlere src yerine çoğaltmak çalışıyorum derlendikten sonra gerektirir. Şanssız. Scss yükleyiciyi, görüntünün içeriğini değiştirecek şekilde alabilirim. Görünümüm için denetleyicideki görüntüyü de isteyebilirim. Ancak img etiketinin src özniteliğini yalnızca göreceli bir url ile yalnız bırakırsam hiçbir şey yapmaz.

İşte webpack.config benim yükleyici var:

loaders: 
[ 
    { 
     test: /\.scss$/, 
     loader: 'style!css!sass' 
    }, 
    { 
     test: /\.js$/, 
     loader: 'ng-annotate!babel!jshint', 
     exclude: /node_modules|bower_components/ 
    }, 
    { 
     test: /\.html$/, 
     loader: "html-loader" 
    }, 
    { 
     test: /\.json/, 
     loader: 'json' 
    }, 
    //not sure if this is still needed 
    { 
     test: /\.jpe?g$|\.gif$|\.png$/i, loader: "url-loader" 
    } 
] 

Ve burada benim aşağı html img etiket aşağıdaki gibidir:

<img src="./darthvader.jpg"> 

satır içi img etiketleri ton olan mevcut bir siteyi refactor çalışılıyor ve bu kullanarak bir test olarak.

app.directive('myDirective', function() { 
    return { 
     restrict: 'E', 
     template: require('../views/my-directive.html'), 
     transclude: true 
    }; 
}) 

yerine

app.directive('myDirective', function() { 
    return { 
     restrict: 'E', 

     //WRONG!! 
     templateUrl: '/views/my-directive.html', 
     transclude: true 
    }; 
}) 

Answer 1

yerine templateUrl ait desteklemek şablon kullanılmalıdır Ayrıca

var templateUrl = require('ngtemplate!html!./test.html'); 

app.directive('testDirective', function() { 
    return { 
     restrict: 'E', 
     templateUrl: templateUrl 
    } 
}); 

, statik için basit bir şekilde kullanmaktır CSS background-image özelliği.

Answer 2

kullanın require ithalatı için: