Question

我创建了一个angularjs模块，该模块具有templateUrl的指令。

我使用ngmin生成带依赖项的代码。但我想将整个js与templateUrl中引用的html一起缩小。

有人可以指出一些文件或如何使用grunt完成吗？

angular.module('myWidget', [])

.constant('MODULE_VERSION', '0.0.3')


.value('defaults', {
    foo: 'bar'
})


.factory('factoryName', function() {/* stuff here */})


.directive('directiveName', function() {
   return {
        restrict: 'A',
        templateUrl  : '/directive.html',
        scope: true,
        controller : 'directiveCtrl',
        link: function(scope, elem, attr) {

        }
    }

})
.controller('directiveCtrl', function (){

});

standalone directive.html page

<div>myWidgetDirectiveHtml</div>

Download Demo Files

使用其他方法更新

在最终domiain中启用CORS，其中托管js文件和指令视图

这将进入模块配置

 $sceDelegateProvider.resourceUrlWhitelist([
        // Allow same origin resource loads.
        'self',
     // Allow loading from our assets domain.Notice the difference between * and   **.
        'https://yourdomain.com/**'
    ]);

指令

中的

喜欢

 templateUrl : "https://yourdomain.com/directive.html"

Answer 1

这里我正在做的是将html转换为javascript模板，然后我们可以将它与指令一起使用。

Gruntfile.js

module.exports = function(grunt) {

    grunt.loadNpmTasks('grunt-html2js');
    grunt.registerTask('build', ['html2js']);
    grunt.registerTask('release', ['html2js']);
    // Project configuration.
    grunt.initConfig({
       html2js: {
        options: {
            // custom options, see below
        },
        main: {
            src: ['yourhtml.html','another.html'],
            dest: 'templates.js'
        }
      }
    })
};

的package.json

{
  "name": "Project Name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-html2js": "~0.1.0"
  }
}

命令

grunt build

如何使用templateUrl缩小angularjs指令

1 个答案: