如何在缩小前后保持相同的 Angular 模板 URL |咕噜声答案

【问题标题】：how to maintain the same angular template URL before and after minification | Grunt如何在缩小前后保持相同的 Angular 模板 URL |咕噜声
【发布时间】：2016-12-11 05:34:52
【问题描述】：

我的指令模板的基本 URL 存在问题。

我在模板 URL 路径中定义了一个自定义指令。
我有一个 grunt html 2 js 任务，我需要在其中传递基本路径，以便它可以与实际未缩小的指令基本路径匹配。

如何将正常的 javascript 基本 URL 传递给 grunt 任务？

这是我尝试过的：

index.html:

<html>
 ......
<script> var basePath = 'basePath'></script>
</html>

directive.js：

angular.module('myModule').directive('myDirective', myDirective)
function myDirective(basePath){
 return {
            restrict: 'E',
            templateUrl: basePath+'/myDir.html'
        }
}
myDirective.$inject = ['basePath'];

由于我的实际 js 模板 URL 与 html2 js 创建的 js 文件路径不匹配。它不是从 html2js 文件中加载模板，而是从不应该发生的实际文件夹中加载模板。

繁重的任务：

module.exports = function(grunt){
  grunt.config('html2js',{
    html2js: {
    options:{
      base:'basePath',
      module: 'templates',
      singleModule:  true,
      useStrict: true
    },
    files: {
      '../my/my.tpl.js':
        ['my/**/*.html'],

    }
  }
  });
};

【问题讨论】：

我建议为此使用专门的任务，例如grunt-angular-templates。

标签： javascript angularjs gruntjs

【解决方案1】：

使用 Angular 常量：

angular.module('myModule').constant("basePath", "http://example.com");

angular.module('myModule').directive('myDirective', myDirective)
function myDirective(basePath){
 return {
            restrict: 'E',
            templateUrl: basePath+'/myDir.html'
        }
}
myDirective.$inject = ['basePath'];

欲了解更多信息，请参阅AngularJS angular.Module API Reference

【讨论】：