CODEWITHSUNDEEP
angularjsangularjs-directive
tomalex
tomalex

Reputation: 1271

How to minify angularjs directives with templateUrl

I have created an angularjs module which is having directive with templateUrl.

I have used ngmin to generate code with dependencies. But i want to minify whole js along with html referred in templateUrl.

Can someone point out some documents or how it can be done using 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

Updated with another approach

Enable CORS in end domiain where js files and directive view are hosted

This will go inside module config

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

in directive

do like 

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

Upvotes: 0

Views: 1160

Answers (1)

tomalex
tomalex

Reputation: 1271

Here what i'm doing is converting html to javascript template and then we can use it along with the directives.

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"
  }
}

Command

grunt build

Upvotes: 1

Related Questions