Implemented annotation of URL path attributes

public/browser/browser.js

@@ -92,6 +92,23 @@ angular.module('fairySlipper.browser', [
     };
   }])
 
+  .directive('swaggerPath', ['$http', '$sce', function($http, $sce) {
+    function link(scope, element, attrs) {
+      var path = urldescription.parse(scope.path);
+      scope.annotated_path = $sce.trustAsHtml(path.annotate(scope.parameters));
+    }
+
+    return {
+      restrict: 'E',
+      scope: {
+        path: '=path',
+        parameters: '=parameters'
+      },
+      link: link,
+      template: '<div ng-bind-html="annotated_path"></div>'
+    };
+  }])
+
   .controller('ParametersCtrl', ['$scope', function($scope) {
     $scope.parameters = {};
     angular.forEach($scope.operation.parameters, function (item) {

public/browser/by-path.html

@@ -5,7 +5,11 @@
 </div>
 
 <div ng-repeat="operations in paths | orderBy: '$key'">
-  <h2>{{ operations.$key }}</h2>
+  <h2>
+    <swagger-path path="operations.$key"
+                  parameters="operations[0].parameters">
+    </swagger-path>
+  </h2>
   <accordion>
     <accordion-group ng-repeat="operation in operations">
       <accordion-heading>

public/browser/by-tag.html

@@ -19,7 +19,11 @@
       </accordion-heading>
       <div class="row">
         <div class="col-md-12">
-          <h4>{{ operation.path }}</h4>
+          <h4>
+            <swagger-path path="operation.path"
+                          parameters="operation.parameters">
+            </swagger-path>
+          </h4>
         </div>
         <div ng-controller="ParametersCtrl" class="col-md-6">
           <tabset>

public/browser/tests/url.js

@@ -3,11 +3,13 @@ describe("A suite", function() {
   it("contains spec with an expectation", function() {
     var emailUrl = urldescription.parse('{tenant_id}/servers/{server_id}');
 
-    expect(emailUrl.annotate({
-      email: 'user@domain',
-      folder: 'test',
-      id: 42
-    })).toBe('{tenant_id}/servers/{server_id}');
+    expect(emailUrl.annotate([{"required":true,
+                               "in":"path",
+                               "type":"string",
+                               "name":"alias",
+                               "description":"The extension name."
+                              }]))
+      .toBe('{tenant_id}/servers/{server_id}');
   });
 });
 
@@ -15,9 +17,18 @@ describe("A suite", function() {
   it("contains spec with an expectation", function() {
     var emailUrl = urldescription.parse('{tenant_id}/servers/{server_id}');
 
-    expect(emailUrl.annotate({
-      tenant_id: 'test_tenant',
-      server_id: 'test_server'
-    })).toBe('test_tenant/servers/test_server');
+    expect(emailUrl.annotate([{"required":true,
+                               "in":"path",
+                               "type":"string",
+                               "name":"tenant_id",
+                               "description":"The id of the tenant."
+                              },
+                              {"required":true,
+                               "in":"path",
+                               "type":"string",
+                               "name":"server_id",
+                               "description":"The id of the server."
+                              }]))
+      .toBe('<abbr title="The id of the tenant.">{tenant_id}</abbr>/servers/<abbr title="The id of the server.">{server_id}</abbr>');
   });
 });

public/browser/url.js

@@ -15,11 +15,16 @@
 
     return {
       annotate: function (context) {
+        var context_map = {};
+        angular.forEach(context, function(value) {
+          context_map[value.name] = value;
+        });
+
         return template.replace(/\{([^\{\}]+)\}|([^\{\}]+)/g, function (_, key, literal) {
           if (key) {
-            var value = context[key];
+            var value = context_map[key];
             if (value !== undefined && value !== null) {
-              return value;
+              return '<abbr title="' + value.description + '">{' + value.name + '}</abbr>';
             } else {
               return '{' + key + '}';
             }

public/index.html

@@ -27,6 +27,7 @@
     <script src="components/highlightjs/highlight.pack.js"></script>
     <script src="components/angular-highlightjs/angular-highlightjs.js"></script>
     <script src="app.js"></script>
+    <script src="browser/url.js"></script>
     <script src="browser/browser.js"></script>
     <script src="browser/index.js"></script>
   </head>