웹 팩: ng-include에 대한 요구 사용

웹 팩: ng-include에 대한 요구 사용

저는 웹 팩을 처음 사용하는 사람이고, 지금은 각진 프로젝트 중 하나에서 처음으로 사용하고 있습니다.

다음과 같이 ng-include 템플릿을 요구하기 위해 html 파일에서 require 함수를 사용하고 싶습니다.

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

ng-cache나 ngtemplate 등의 로더가 있는 것은 알고 있습니다만, 필요한 대로 동작하지 않습니다.이 경우 먼저 js에 템플릿이 필요하며 그 다음 html 파일에 템플릿 이름을 사용해야 합니다.

어떻게 하면 좋을까요?

또 다른 접근방식은 IT 환경을 혁신하는 것입니다.my-template.html각진 컴포넌트로 변환: HTML 파일을 로드하기 위해 html-loader를 사용한다고 가정합니다.loaders: {test: /\.html/, loader: 'html'}컴포넌트를 정의합니다.myTemplate모듈 JavaScript 파일에서 다음을 수행합니다.

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

나중에 사용:

<my-template></my-template>

HTML 로더와 각도 $templateCache 서비스를 사용할 수 있습니다.

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

웹 팩 로더 구성:

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

npm에 webpack-required-loader를 사용할 수 있습니다.

앱 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'.

로더 설정 방법

이미 https://stackoverflow.com/a/34815472/833093에 게시했습니다만,

"relativeTo" 파라미터를 설정할 필요가 있습니다.그렇지 않으면 템플릿 파셜은 "/home/username/path/to/project/path/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>

언급URL : https://stackoverflow.com/questions/33436729/webpack-using-require-for-ng-include