angular.url-matcher/example.html at master · aquilae/angular.url-matcher · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!doctype html>
<html>
    <head>
        <title>example</title>
        <script type="text/javascript" src="http://code.angularjs.org/snapshot/angular.js"></script>
        <script type="text/javascript" src="http://code.angularjs.org/snapshot/angular-route.js"></script>
        <script type="text/javascript" src="/dist/angular.url_matcher.js"></script>
    </head>
    <body ng-app="app">
        <div ng-controller="suppliersList">
            <h3>I am {{ iam }}</h3>
            <div><a href="{{ link }}">{{ link }}</a></div>
            <div ng-controller="accountRegister">
                <h4>I am {{ iam }}</h4>
                <div><a href="{{ link }}">{{ link }}</a></div>
                <div ng-controller="suppliersList">
                    <h5>I am {{ iam }}</h5>
                    <div><a href="{{ link }}">{{ link }}</a></div>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            (function () {
                angular
                    .module('app', ['aq.urlMatcher'], function ($locationProvider) {
                        $locationProvider.html5Mode(true);
                    })
                    .controller('suppliersList', function suppliersList($scope, $urlMatcher, $location) {
                        $scope.iam = 'simple suppliers list';
                        $scope.link = '/suppliers/list/mode/ord-dir/page';
                        $urlMatcher.map(
                            'suppliers/list/{mode}/{ord=t}-{dir=auto}/{page}',
                            function ($tokens, $build) {
                                $scope.iam = 'tough supplier list: ' + JSON.stringify($tokens);
                                for (var key in $tokens) {
                                    if ($tokens.hasOwnProperty(key)) {
                                        $tokens[key] = '[' + $tokens[key] + ']';
                                    }
                                }
                                $scope.link = $build($tokens);
                            },
                            function ($build) {
                                $scope.iam = 'simple suppliers list';
                                $scope.link = $build({ mode: 'mode', ord: 'ord', dir: 'dir', page: 'page' });
                            }
                        );
                    })
                    .controller('accountRegister', function accountRegister($scope, $urlMatcher) {
                        $scope.iam = 'simple account register';
                        $scope.link = '/account/register/who';
                        $urlMatcher.map(
                            'account/register/{who}',
                            function ($tokens, $build) {
                                $scope.iam = 'tough account register: ' + JSON.stringify($tokens);
                                for (var key in $tokens) {
                                    if ($tokens.hasOwnProperty(key)) {
                                        $tokens[key] = '[' + $tokens[key] + ']';
                                    }
                                }
                                $scope.link = $build($tokens);
                            },
                            function ($build) {
                                $scope.iam = 'simple account register';
                                $scope.link = $build({ who: 'who' });
                            }
                        );
                    });
            })();
        </script>
    </body>
</html>