Angular Adaptive Templating

Load different templates based on device capability.

Installation

Simply install using Bower:

bower install --save angular-adaptive-templating

Usage

1. Configure 'adaptiveTemplating' as a dependency

Add it between the brackets:

angular.module('myApp', ['adaptiveTemplating']);

2. Configure some tests

Tests can be configured in your module's config block:

myApp.config(function (adaptiveTemplatingProvider) {
  var isMobile = $window.matchMedia('(max-width: 767px)').matches;
  adaptiveTemplatingProvider.addTest('mobile', isMobile);
})

Or at runtime:

myApp.run(function (adaptiveTemplating, $window) {
  var isMobile = $window.matchMedia('(max-width: 767px)').matches;
  adaptiveTemplating.addTest('mobile', isMobile);
});

Note that all tests defined by Modernizr are included by default, provided that Modernizr is available.

3. Update your templateUrls

It works with routes:

myApp.config(function ($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: 'views/{mobile}/index.html'
  });
})

Or in directives:

myApp.directive('myDirective', function() {
  return {
    templateUrl: 'my-directive/{mobile}/main.html'
  };
});

Or with ngInclude:

<div ng-include="'partials/{mobile}/something.html'"></div>

Provider API

These are available in your module's config block.

{function} addTest({string} name, {boolean|function} test)

@param {string} name The name by which determines the pattern.
@param {boolean|function} test The actual test, as boolean or function.
@returns {this} Reference to this, to enable method chaining.

{function} removeTest({string} name)

Remove a registered test from the list of tests.

@param {string} name The name of the test.
@returns {this} Reference to this, to enable method chaining.

{function} getTests()

Retrieve all registered tests.

@returns {Object} Hash of all tests.

{RegExp} patternRegExp

Regular expression by which to match test patterns. Override it if necessary. The default pattern matches strings like {testname}.

{function} normalizeUrl({string} url)

Reformats the final URL. Override it if necessary. The default implementation removes superfluous slashes and dots.

@param {string} url The original URL.
@returns {string} The reformatted URL.

{function} whenTrue({string} url, {string} match, {string} testname)

Callback to rewrite the URL when a test succeeds. Override it to suit your needs.

@param {string} url The current URL.
@param {string} match The matching test pattern.
@param {string} testname The name of the test.
@returns {string} The new URL.

{function} whenFalse({string} url, {string} match, {string} testname)

Callback to rewrite the URL when a test fails. Override it to suit your needs.

@param {string} url The current URL.
@param {string} match The matching test pattern.
@param {string} testname The name of the test.
@returns {string} The new URL.

{function} rewriteUrl({string} templateUrl)

Takes a URL containing test patterns and rewrites it according to the test results.

@param {string} templateUrl The original URL.
@returns {string} The rewritten URL.

patrickjs / angular-adaptive-templating Goto Github PK