Skip navigation

These instructions will walk you through how to use Google Closure Templates with your own closure set up, using goog.require and goog.provide.

First make sure you know how to use goog.require and goog.provide for your own code.

Secondly, read the instructions for using Google Closure Template with JavaScript.

The easiest way to get all of this to work nicely is to use a directory structure such as this:

/media/js/goog
/media/js/app
/media/js/app/templates
/media/js/soy
/media/templates

Explaining these directories:

/media/js
Where all of your JavaScript files are, your path to this place is probably different.

/media/js/goog
Where the Google Closure Library source code lives (closure-library-read-only/closure/goog/).

/media/js/app
Where your application’s code is.

/media/js/app/templates
Where you’ll have the Google Closure Template generator put your compiled template (JavaScript) files.

/media/js/soy
Where you need to put Google Closure Template’s JavaScript files. Otherwise you’ll get this error:

Exception: Missing provider for (soy)

/media/templates
Where you’ll put your .soy files.

When you generate your template files use the –shouldProvideRequireSoyNamespaces parameter to make sure you add the correct goog.provide and goog.require statements.

When you call the template compiler be sure to make sure it’s putting them into the right place (/media/js/app/templates).

Make sure the namespaces you use in your templates adhere to the directory structure you’re using so that goog.provide and goog.require work correctly. For example:

For a template called “hello_world.soy” (/media/templates/hello_world.soy) use

{app.templates.hello_world}

as your namespace. This file should create a “hello_world.js” by the generator (/media/js/app/templates/hello_world.js).

In your require.js (/media/js/app/require.js) add

goog.require(“app.templates.hello_world”);

and you should be good to go.

Make sure you give the path to /media/js/soy to the Google Closure Compiler (not the template compiler, when you’re compiling your actual JavaScript app) when you generate your deps.js or release with the -p option.

Advertisements

One Trackback/Pingback

  1. […] Update: Added a HOWTO for using Google Closure’s Template files with your own code. […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: