Angular UI-Router typed parameter test

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
    <script src="app.config.js"></script>
  </head>

  <body ng-app="myApp">
    <h1>Routing Test</h1>    
    
  	<div ui-view></div>
  	
  	<ul>
  	  <li><a href="#/list">List</a></li>
  	  <li><a href="#/version/123/list">Version valid List</a></li>
  	  <li><a href="#/version/X/list">Version invalid List</a></li>
  	  <li><a href="#/complex/Bill/4">Complex valid</a></li>
  	  <li><a href="#/complex/B4ll/4">Complex invalid</a></li>
  	  <li><a href="#/base/1">Child state valid</a></li>
  	  <li><a href="#/base/x1">Child state invalid</a></li>
  	  <li><a href="#/custom/e1e75aa3-a413-4c11-8fff-87f7cd43243e">Custom type valid</a></li>
  	  <li><a href="#/custom/junk">Custom type invalid</a> (does not trigger otherwise)</li>
  	</ul>

  </body>
</html>

(function () {
    'use strict';

    var myApp = angular.module('myApp', ['ui.router']);
    
    myApp
        .config(routeCustomTypeConfigurator)
        .config(configurator);
    
    routeCustomTypeConfigurator.$inject = ['$urlMatcherFactoryProvider'];
        
    function routeCustomTypeConfigurator($urlMatcherFactoryProvider) {
        // http://stackoverflow.com/questions/30475790/how-to-add-guid-regex-in-angular-ui-router-state
        var GUID_REGEXP = /^[a-f\d]{8}-(?:[a-f\d]{4}-){3}[a-f\d]{12}$/i;
        
        $urlMatcherFactoryProvider.type('guid', {
            encode: angular.identity,
            decode: angular.identity,
            equals: function(a, b) { return a === b; },
            is: function(item) {
                return GUID_REGEXP.test(item);
            },
            pattern: GUID_REGEXP
        });
    }
    
    configurator.$inject = ['$stateProvider', '$urlRouterProvider'];
    
    function configurator ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('list', {
                url: '/list',
                template: '<p>List state</p>'
            })
            .state('versionList', {
                url: '/version/{version:int}/list',
                template: '<p>Version List</p>'
            })
            .state('complex', {
                url: '/complex/{name:[A-Za-z]+}/{id:int}',
                template: '<p>Complex</p>'
            })
            .state('base', {
                abstract: true,
                url: '/base',
                template: '<h2>Base</h2><div ui-view="child1"></div>'
            })
            .state('base.child', {
                url: '/{id:int}',
                views: {
                    'child1@base': {
                        template: '<p>child1</p>'
                    }
                }
            })
            .state('custom', {
                url: '/custom/{customId:guid}',
                template: '<p>Custom type</p>'
            });

        $urlRouterProvider.otherwise('/list');
    }
}());