AngularJs Template Asset-Pipeline

The angular-template-asset-pipeline is an Asset Pipeline module that provides angular template precompiler support for Gradle projects.

Note	Starting with version 2.2.0 the default for the config setting includePathInName is true.

Getting started

Make sure your templates are contained within a templates folder within the assets folder and have the file extension .tpl.htm or .tpl.html

Setup

build.gradle

buildscript {
    dependencies {
        classpath 'com.bertramlabs.plugins:asset-pipeline-gradle:2.6.11'
    }
}

dependencies {
	assets "com.craigburke.angular:angular-template-asset-pipeline:2.4.0"
}

How it works

This plugin inserts the compressed contents of your template files into AngularJs’s $templateCache. Both the template name and module are determined by the file name and location. This plugin expects the module name to be in camel case (ex. myApp not MyApp).

For example a file located at

/assets/javascripts/my-app/app-section/templates/index.tpl.htm

Will generate javascript like this:

angular.module('myApp.appSection').run(['$templateCache', function($templateCache) {
	$templateCache.put('/my-app/app-section/index.htm', '<h1>Hello World!</h1>');
}]);

This allows you to reference your template by just using the path (without the .tpl).

Note	this requires that the module myApp.appSection was previously defined in your JavaScript.

Example project

Here’s an example of how you might use this plugin in a project.

//= require /angular/angular
//= require /angular/angular-route
//= require_self (1)
//= require_tree /my-app/app-section/templates

angular.module('myApp.appSection', ['ngRoute'])
	.config(function($routeProvider) {
	      $routeProvider
	          .when('/index', {
	              templateUrl: '/my-app/app-section/index.htm'
	          })
	          .otherwise({redirectTo: '/index'});
	});

1. The require_self is needed to make sure that the myApp.appSection module is defined before the template files are imported.

Configuration

moduleBaseName

You can set the moduleBaseName property that will set the base of each calculated module name. For example if we set the value to myApp then a file located at: /assets/javascripts/app-section/templates/index.tpl.htm

Will then generate javascript like this:

angular.module('myApp.appSection').run(['$templateCache', function($templateCache) {
        $templateCache.put('/app-section/index.htm', '<h1>Hello World!</h1>');
}]);

Note that myApp. was added to the front of the module name.

convertUnderscores

The convertUnderscores property controls whether an underscore in a folder name will be translated to a camel case equivalent. For example whether a file at /assets/javascripts/my_app/app_section/foo.tpl.htm will be put into a module name myApp.appSection or my_app.app_section

templateModuleName

If you set the templateModuleName property than all templates will be placed in a single module (regardless of what the moduleBaseName is set to or what the path of the template file is). For example, if templateModuleName is set to myTemplates then a file located at /assets/javascripts/app-section/templates/index.tpl.htm

Will generate javascript like:

angular.module('myTemplates').run(['$templateCache', function($templateCache) {
        $templateCache.put('/app-section/index.htm', '<h1>Hello World!</h1>');
}]);

includePathInName

If you want to refer to a template but just its file name, you can change the includePathInName.

With the setting set to false, a file located at /assets/javascripts/my-app/app-section/templates/index.tpl.htm

Will then generate javascript like this:

angular.module('myApp.appSection').run(['$templateCache', function($templateCache) {
	$templateCache.put('index.htm', '<h1>Hello World!</h1>');
}]);

Warning

it’s important to make sure you file name are unique to avoid collisions

In addition to those settings, you can also change the template folder, disable the compression of your HTML templates, or preserve Html comments.

Default Settings

In gradle these settings can be changed in your build.gradle

build.gradle

assets {
	configOptions = [
		angular : [
			templateFolder: 'templates',
			moduleNameBase: '',
            includePathInName: true,
			templateModuleName: '',
			convertUnderscores: true,
			compressHtml: true,
			preserveHtmlComments: false,
			preserveLineBreaks: false
		]
	]
}