如何在angular指令凉亭包中使用单独的模板？

Question

所以我创建了一大堆我想要在许多项目上使用的指令,所以我把它变成了一个bower包并将它包含在我的一个项目中.不幸的是,指令不起作用,因为templateUrl路径不正确.

templateUrls基于与指令的js位于同一目录中的模板.所以"./tabbedtextareas.html"我解决这个问题的一些简单选择是什么？

到目前为止我想到的是:

• 将html复制并粘贴到JS文件中
  • 编辑模板后会很痛苦
• 使用grunt用JS编译模板,甚至可以创建一个钩子来提交,合并到master和push.
  • 这是一个非常简单的插件,我更喜欢让事情尽可能简单.
• 把我的模板放在一个目录中,然后在每个项目中让我的服务器处理对该文件夹的请求.
  • 任何需要我的指令作为凉亭依赖的人都需要知道这个具体的事情.IE浏览器.只有通过凉亭安装才能安装包裹.

是否有可能添加的凉亭安装脚本或其他东西？任何帮助表示赞赏.

Answer 1

我一直在寻找关于这个问题的指导/建议,并考虑了许多不同的选择.我以为我会分享我目前已经解决的问题.

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

背景上下文是一样的,我们在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)在设置template属性时检索它.这提供了通过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>");}]);

思考

1. 在处理组件时有一个构建步骤的额外开销.鉴于这一要求,我认为没有办法完全避免这一步骤.如果在组件构建期间没有完成,则必须在实现时完成.鉴于这两个选项,我认为当范围狭窄且清晰时,最好在组件中执行此选项.

2. 我不相信我的gulp任务是完全最优的.存在一定程度的同步性,这与"gulp方式"相反.可能会想出如何用一些时间/精力来改进它.