angularjs – 如何在我的角度指令凉亭包中使用单独的模板？

注：正在使用这种方法的项目仍处于早期阶段,因此所描述的方法绝不是一成不变的.如果我将来必须改编/改变它,我不会感到惊讶.

背景上下文是一样的,我们在GitHub上有多个自包含的指令,通过bower使用.每个组件模板必须与指令内联,因为templateUrl路径不起作用.

我基本上是从上面做选项2,使用gulp,并使用gulp-angular-templatecache插件利用角度模板缓存.

解

gulpfile.js

做两件事,解析组件名称并将模板内容写入模板缓存(通过gulp插件)并将组件代码和标记连接成单个文件(进入dist /< component-name> .js.

var gulp = require('gulp'),templates = require('gulp-angular-templatecache'),concat = require('gulp-concat'),clean = require('gulp-clean'),pkg = require('./package.json');

var template = 'myTemplate.tpl.html'

gulp.task('templates',function () {
  return gulp.src(template)
    .pipe(templates('templates.tmp',{
      root: '/templates/',module: pkg.name
    }))
    .pipe(gulp.dest('.'));
});

gulp.task('concat',['templates'],function () {
  return gulp.src([pkg.main,'templates.tmp'])
    .pipe(concat(pkg.name + '.js'))
    .pipe(gulp.dest('./dist/'));
});

gulp.task('clean',['concat'],function () {
  gulp.src('./*.tmp',{read: false})
    .pipe(clean());
});

gulp.task('watch',function () {
  gulp.watch(['*.js','*.html'],['build']);
});

gulp.task('build',['templates','concat','clean']);
gulp.task('default',['build','watch']);

产量

模板在模板缓存中设置,并且在设置模板属性时,指令通过$templateCache.get(key)检索它.这提供了通过bower使用此组件所需的单个文件输出,同时允许您在源中的单独文件中维护标记.

angular.module('myModule',[]).directive('myDirective',function ($templateCache) {

  return {
    template: $templateCache.get('/template/myTemplate.tpl.html');
    link: function (scope,elm,attr) {

    }
  };
});

angular.module("myModule").run(["$templateCache",function($templateCache) {$templateCache.put("/template/myTemplate.tpl.html","<div>This is the template for your component</div>");}]);

思考

>在处理组件时有一个构建步骤的额外开销.鉴于这一要求,我认为没有办法完全避免这一步骤.如果在组件构建期间没有完成,则必须在实现时完成.鉴于这两个选项,我认为当范围狭窄且清晰时,最好在组件中执行此选项.>我不相信我的gulp任务是完全最优的.存在一定程度的同步性,这与“gulp方式”相反.可能会想出如何用一些时间/精力来改进它.