AngularJS - 지시어 + 템플릿 조합을 모듈화하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com//questions/24045499

  •  21-12-2019
  •  | 
  •  

문제

상황은 다음과 같습니다.templateUrl에 따라 달라지는 지시문이 있습니다.

지시문은 다음과 같습니다.

angular.module('foo')
.directive('bar', function(){
  return {
    restrict: 'E',
    replace: true,
    templateUrl: '/foo/bar.html',
    controller: 'fooController',
    require: '^ngModel',
    scope: {
      onSuccess: '&'
    }
  };
});

이 지시문은 내 애플리케이션 중 하나의 일부이므로 애플리케이션의 일부로 유지되는 것이 중요합니다.그러나 다른 프로젝트에서도 동일한 지시문을 사용하고 싶고 현재는 Bower를 사용하여 저장소를 다른 프로젝트로 풀다운하고 있습니다.그러나 templateUrl이 올바르지 않기 때문에 이 지시문은 중단됩니다.Bower는 내 전체 프로젝트를 복제하며 템플릿의 실제 경로는 기껏해야 내 다른 프로젝트에서 다음과 같아야 합니다.

/lib/public/foo/bar.html

다른 사람들은 이것을 어떻게 관리합니까?

도움이 되었습니까?

해결책

나는 유지 보수성에 따른 문제로 인해 템플릿 문자열을 사용하여 템플릿 문자열을 사용하여 결코 좋아하지 않았습니다. 나는 HTML을 매우 빠르게 프로토 타입으로 내 파일을 읽고 단일 $ templateCache js 파일.

솔루션

그 루트 각 템플릿

angularjs 템플릿을 연결하고 등록 할 수있는 빌트 빌드 작업 $ templateCache 

// within my Gruntfile.js
grunt.initConfig({
  ngtemplates: {
    'angular-my-directives': {
      src:      'views/**/*.html', // where my view files are
      dest:     'src/templates.js' // single file of $templateCache
    }
  }
  // ...
});
.

는 다음과 같습니다 : 내 폴더 구조를 보존하는 ./src/templates.js : 

angular.module('angular-my-directives').run(['$templateCache', function($templateCache) {

  $templateCache.put('views/directives/my-download.html',
    "<form name=\"myDownloadForm\" ng-submit=\"submit()\" novalidate>\n" +
    "</form>"
  );

}]);
.

이제는 templateUrl: 'views/directives/my-download.html'를 사용하기 만하면 $ TemplateCache를 사용합니다.

마침내 나는 Grunt-Contrib-concat 에 대한 파일을 결합하여 쉬운 로딩.

체크 아웃 " Sourcemaps with Uglify unglify (또는 댓글의 더 나은 링크를 남겨주세요)에 대해 알아보십시오. Concat + Uglify (일명 Min) JS 파일을 단일 "Dist"파일로 연결하십시오.

자신의 맞춤 Bower 패키지에서 작업하는 경우 ..

패키지 소비자가 my-concat-package.js 또는 my-concat-package.min.js

을 간단하게 포함 할 수 있도록 패키지 repo에 연결된 (일명을 구축 한 파일) 파일을 커밋하십시오.

다른 팁

각 지시문은 templateUrl 및 template 속성 을가집니다.template는 HTML 문자열을받습니다.JS에 HTML을 넣어야하기 때문에 완벽한 해결책이 아닙니다.그러나 라이브러리 작성자가 HTML 문자열을 template 속성에 직접 넣을 수 있도록하는 일반적인 패턴이므로 모듈을 단일 파일로 랩핑 할 수 있습니다.

해당 TemplateURL-To-Template에서 Lib의 빌드 단계를 수행 할 수 있습니다.

Angular Bootstrap Bower repo .

이에 대한 한 가지 해결책이자 개인적으로 선호하는 해결책은 템플릿을 $templateCache 안에 Module.run 기능.이렇게 하면 URL이 잘못된 것을 참조하는 것에 대해 걱정할 필요가 없습니다. 원하는 임의의 식별 URL을 제공할 수 있으며 부팅하기 위해 해당 템플릿을 가져오기 위해 http 요청이 필요하지 않습니다.

귀하의 지시문 프로젝트 :

xyz.tpl.html 파일 이름으로 모든 템플릿을 만들고 모든 JS 코드로 지시문 디렉토리에 넣으십시오.모든 templateurl은

처럼 보입니다

templateurl : '/template/my.tpl.html'

앱 프로젝트 :

모든 * .tpl.html 파일을 Bower_Components (기본값)에서 / template / dir에 복사하는 프로젝트에서 Project에서 Gulp / Grunt 작업을 만듭니다.

e.g. : 

// copy template files
gulp.task('copy-tpl', function() {
    return gulp.src([
        config.dirs.src.bower_components + '/**/*.tpl.html'
    ])
            .pipe(flatten())
            .pipe(gulp.dest(config.dirs.build.tpl));
});
.

중요! / 템플릿 디렉터는 협약 (JS, CSS 등)입니다.

julp gulp-angular-templateCache .

지시문은 다음과 같습니다 : 

angular.module('foo').directive('bar', function($templateCache){
  return {
    restrict: 'E',
    replace: true,
    template: '$templateCache.get('bar.html')',
    controller: 'fooController',
    require: '^ngModel',
    scope: {
      onSuccess: '&'
    }
  };
});
.

및 gulpfile.js는 다음과 같습니다. 

var gulp = require('gulp'),
    addTemplates = require('gulp-angular-templatecache');

gulp.task('default', function() {
    gulp.src('templatesDir/**/*.html')
        .pipe(addTemplates('templateFile.js', {module: 'foo' }))
        .pipe(gulp.dest('dist'));
});
.

이것은 Dist 폴더의 'templateFilejs'파일을 생성합니다. 그런 다음 Bower.json에서 지시문 파일과 함께 패키지 할 수 있습니다.

이미 답변 답변을 사용하여 HTML 파일을 $ TemplateCache 파일에 빌드하지만 전환 된 후꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 듣는 사람은 같은 과정을 따르지 않고 Gulp-angular-templateCache

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top