这是情况.我有一个指令,这取决于一个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,所以我选择一个grunt任务读取我的文件,并将它们处理成一个单一的
$templateCache js文件.
原文链接:https://www.f2er.com/angularjs/142807.html解
Grunt build task to concatenate & register your AngularJS templates in
the $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组合我的文件,以方便加载.
结帐“Grunt concat + uglify with sourcemaps”(或者在评论中留下更好的链接),了解如何将uglify(aka min)js文件连接到单个“dist”文件中.
如果在自己的定制凉鞋包上工作
确保将级联(又名内置)文件提交到包repo,以便您的包消费者可以简单地包含my-concat-package.js或my-concat-package.min.js