app/views/general/documentation.phtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php echo $title ?></title>
    <!-- Bootstrap core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body ng-app="app" ng-controller="AppController as vm">
<div class="container">
    <h1><?php echo $title ?></h1>
    <p class="lead">Документация</p>
    <h2>Коллекции</h2>
    <div class="list-group">
        <a href="#" class="list-group-item active">
            Анкоры
        </a>
        <a ng-repeat="collection in vm.documentation.collections" href="#{{collection.prefix}}" class="list-group-item">{{collection.name}}</a>
    </div>
    <div ng-repeat="collection in vm.documentation.collections">
        <div class="panel panel-primary" id="{{collection.prefix}}">
            <div class="panel-heading">
                {{ collection.name || collection.prefix }}
            </div>
            <table class="table table-bordered">
                <tr ng-show="collection.description">
                    <th>Описание</th>
                    <td>{{ collection.description }}</td>
                </tr>
                <tr>
                    <th>Префикс</th>
                    <td>{{ collection.prefix }}</td>
                </tr>
                <tr ng-show="collection.fields">
                    <th>Поля</th>
                    <td>
                        <table class="table table-bordered">
                            <tr ng-repeat="(field, dataType) in collection.fields">
                                <th>
                                    {{ field }}
                                </th>
                                <td>
                                    <div class="label label-primary">{{ dataType | dataType }}</div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <div class="panel-footer">
                <div class="panel panel-primary" ng-repeat="endpoint in collection.endpoints">
                    <div class="panel-heading">
                        <span ng-bind-html="endpoint.httpMethod | method"></span> {{ collection.prefix + endpoint.path }}
                    </div>
                    <table class="table table-bordered">
                        <tr ng-show="endpoint.description">
                            <th>Описание</th>
                            <th>{{ endpoint.description }}</th>
                        </tr>
                        <tr>
                            <th>URL</th>
                            <td>
                                <a ng-href="{{ vm.documentation.basePath + collection.prefix + endpoint.path }}" target="_blank">
                                    {{ vm.documentation.basePath + collection.prefix + endpoint.path }}
                                </a>
                            </td>
                        </tr>
                        <tr ng-show="endpoint.paramsDescription">
                            <th>Описание параметров</th>
                            <th><pre style="font-weight: normal;">{{ endpoint.paramsDescription | json }}</pre></th>
                        </tr>
                        <tr ng-show="endpoint.exampleRequest">
                            <th>Пример запроса</th>
                            <th><pre style="font-weight: normal;">{{ endpoint.exampleRequest | json }}</pre></th>
                        </tr>
                        <tr ng-show="endpoint.exampleResponse">
                            <th>Пример ответа</th>
                            <th><pre style="font-weight: normal;">{{ endpoint.exampleResponse | json }}</pre></th>
                        </tr>
                        <tr>
                            <th>Доступ</th>
                            <td>
                                <div class="label label-primary" ng-repeat="role in endpoint.allowedRoles" style="margin-right: 5px">{{ role }}</div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <h2>Другие запросы</h2>
    <div class="panel panel-default" ng-repeat="route in vm.documentation.routes">
        <div class="panel-heading">
            {{ route.pattern }}
        </div>
    </div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.4.8/angular-sanitize.min.js"></script>
<!--<script src="https://code.angularjs.org/1.4.8/angular-sanitize.min.js"></script>-->
<script>
    var documentationPath = '<?php echo $documentationPath ?>';
    var app = angular.module('app', [
        'ngSanitize'
    ]);
    app.controller('AppController', AppController);
    function AppController($http) {
        var vm = this;
        $http.get(documentationPath).then(function(response) {
            vm.documentation = response.data.documentation;
        });
    }
    app.filter('method', function() {
        return function(input) {
            switch(input) {
                case 'GET':
                    return '<div class="label label-success">' + input + '</div>';
                case 'POST':
                    return '<div class="label label-warning">' + input + '</div>';
                case 'PUT':
                    return '<div class="label label-info">' + input + '</div>';
                case 'DELETE':
                    return '<div class="label label-danger">' + input + '</div>';
                default:
                    return null;
            }
        }
    });
    app.filter('dataType', function() {
        return function(input) {
            switch(input) {
                case 1:
                    return 'Integer';
                case 2:
                    return 'Float';
                case 3:
                    return 'Double';
                case 4:
                    return 'Boolean';
                case 5:
                    return 'String';
                case 6:
                    return 'Timestamp';
                case 7:
                    return 'JSON';
                default:
                    return 'Unknown';
            }
        }
    });
</script>
</body>
</html>