https://github.com/etianen/requirejs-tpl-angular

AngularJS template loader plugin for RequireJS.
https://github.com/etianen/requirejs-tpl-angular

Last synced: 25 days ago
JSON representation

AngularJS template loader plugin for RequireJS.

• Host: GitHub
• URL: https://github.com/etianen/requirejs-tpl-angular
• Owner: etianen
• License: bsd-3-clause
• Created: 2014-04-28T10:28:24.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-04-28T14:36:29.000Z (over 10 years ago)
• Last Synced: 2024-10-09T14:07:09.849Z (29 days ago)
• Language: JavaScript
• Size: 145 KB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# requirejs-tpl-angular

AngularJS template loader plugin for RequireJS.

## Features

* Load AngularJS templates using RequireJS.

* Inline AngularJS templates into your javascript during r.js optimization.

## Installation

Copy the `tpl.js` script into your RequireJS `baseURL`. You can also install requirejs-tpl-angular using [bower](http://bower.io/):

``` bash

$ bower install requirejs-tpl-angular

```

## Usage

AngularJS templates should be stored in a directory named `templates`, at a relative path of `../templates` to your `baseURL`.

A recommended directory structure is as follows:

```

www

 |-- js

 |   |-- angular.js

 |   |-- tpl.js

 |   +-- main.js

 |

 +-- templates

     +-- widget.html

```

Load AngularJS templates in your RequireJS modules:

``` js

define([

    "angular",

    // Load a named AngularJS template.

    "tpl!widget.html"

], function(

    angular

) {

    

    angular.module("main", [

        // Inject the special `tpl` angular module that

        // contains all the loaded templates.

        "tpl"

    ])

    .directive("widget", function() {

        return {

            // Reference loaded AngularJS templates by URL

            // in your directives.

            templateUrl: "widget.html"

        };

    });

});

```

## How it works

The `tpl.js` loader plugin creates a special AngularJS module called `tpl`. Whenever you

load an AngularJS template using `require("tpl!widget.html")`, that template is added

to the AngularJS `$templateCache` inside the `tpl` module. By adding the `tpl` module to

you AngularJS app, you gain access to all the preloaded AngularJS templates.

When the r.js optimizer is run, templates loaded in your RequireJS modules are inlined

into the built file, avoiding additional network requests in production.

## Support and announcements

The requirejs-tpl-angular project was developed by Dave Hall. You can get the code

from the [requirejs-tpl-angular project site](http://github.com/etianen/requirejs-tpl-angular).

## More information

    

Dave Hall is a web developer, based in Cambridge, UK. You can usually

find him on the Internet in a number of different places:

*   [Website](http://www.etianen.com/ "Dave Hall's homepage")

*   [Twitter](http://twitter.com/etianen "Dave Hall on Twitter")

*   [Google Profile](http://www.google.com/profiles/david.etianen "Dave Hall's Google profile")