feat(ngdocs): provide support for user to jump between different versions of the angularjs documentation

1 files changed, 66 insertions, 57 deletions

diff --git a/docs/src/templates/index.html b/docs/src/templates/index.html
index 8e2fbc37..15093d4c 100644
--- a/docs/src/templates/index.html
+++ b/docs/src/templates/index.html
@@ -48,8 +48,8 @@
       addTag('script', {src: 'components/google-code-prettify.js' }, sync);
       addTag('script', {src: 'components/' + (debug ? 'lunr.js' : 'lunr.min.js') }, sync);
       addTag('script', {src: 'components/' + (debug ? 'showdown.js' : 'showdown.min.js') }, sync);
+      addTag('script', {src: 'docs-data.js'}, sync);
       addTag('script', {src: 'js/docs.js'}, sync);
-      addTag('script', {src: 'docs-keywords.js'}, sync);
 
       function path(name) {
         if (production) {
@@ -233,74 +233,83 @@
 
     <div class="row">
       <div class="span3">
-        <form class="well form-search" ng-submit="submitForm()">
-          <div class="dropdown search"
-               ng-class="{open: focused && bestMatch.rank > 0 && bestMatch.page != currentPage}">
-            <input type="text" ng-model="search" placeholder="search the docs"
-                   tabindex="1" accesskey="s" class="input-medium search-query" focused="focused">
-            <ul class="dropdown-menu">
-              <li>
-                <a href="{{bestMatch.page.url}}">{{bestMatch.page.shortName}}</a>
-              </li>
-            </ul>
+        <div class="well">
+          <div ng-controller="DocsVersionsCtrl">
+            <select ng-options="v.version as v.title group by v.group for v in versions"
+                    ng-model="version"
+                    ng-change="jumpToDocsVersion(version)"
+                    class="docs-version-jump">
+            </select>
           </div>
+          <form class="form-search" ng-submit="submitForm()">
+            <div class="dropdown search"
+                 ng-class="{open: focused && bestMatch.rank > 0 && bestMatch.page != currentPage}">
+              <input type="text" ng-model="search" placeholder="search the docs"
+                     tabindex="1" accesskey="s" class="input-medium search-query" focused="focused">
+              <ul class="dropdown-menu">
+                <li>
+                  <a href="{{bestMatch.page.url}}">{{bestMatch.page.shortName}}</a>
+                </li>
+              </ul>
+            </div>
 
-          <div class="spacer"></div>
-          <div ng-show="search">Filtered results:</div>
+            <div class="spacer"></div>
+            <div ng-show="search">Filtered results:</div>
 
-          <ul class="nav nav-list" ng-hide="page">
-            <li ng-repeat="page in pages track by page.url" ng-class="navClass(page)" class="api-list-item">
-              <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
-            </li>
-          </ul>
+            <ul class="nav nav-list" ng-hide="page">
+              <li ng-repeat="page in pages track by page.url" ng-class="navClass(page)" class="api-list-item">
+                <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
+              </li>
+            </ul>
 
 
-          <ul class="nav nav-list well" ng-repeat="module in modules track by module.url" class="api-list-item">
-            <li class="nav-header module">
-              <a class="guide" href="{{URL.module}}">module</a>
-              <a class="code" href="{{module.url}}">{{module.name}}</a>
-            </li>
+            <ul class="nav nav-list well" ng-repeat="module in modules track by module.url" class="api-list-item">
+              <li class="nav-header module">
+                <a class="guide" href="{{URL.module}}">module</a>
+                <a class="code" href="{{module.url}}">{{module.name}}</a>
+              </li>
 
-            <li class="nav-header section" ng-show="module.directives">
-              <a href="{{URL.directive}}" class="guide">directive</a>
-            </li>
-            <li ng-repeat="page in module.directives track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
-              <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
-            </li>
+              <li class="nav-header section" ng-show="module.directives">
+                <a href="{{URL.directive}}" class="guide">directive</a>
+              </li>
+              <li ng-repeat="page in module.directives track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
+                <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
+              </li>
 
-            <li class="nav-header section" ng-show="module.filters">
-              <a href="{{URL.filter}}" class="guide">filter</a>
-            </li>
-            <li ng-repeat="page in module.filters track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
-              <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
-            </li>
+              <li class="nav-header section" ng-show="module.filters">
+                <a href="{{URL.filter}}" class="guide">filter</a>
+              </li>
+              <li ng-repeat="page in module.filters track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
+                <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
+              </li>
 
-            <li class="nav-header section" ng-show="module.services">
-              <a href="{{URL.service}}" class="guide">service</a>
-            </li>
-            <li ng-repeat="service in module.services track by service.instance.url" ng-animate="'expand'" ng-class="navClass(service.instance, service.provider)" class="api-list-item">
-              <a ng-show="service.provider" class="pull-right" href="{{service.provider.url}}" tabindex="2"><i class="icon-cog"></i></a>
-              <a href="{{service.instance.url}}" tabindex="2">{{service.name}}</a>
-            </li>
+              <li class="nav-header section" ng-show="module.services">
+                <a href="{{URL.service}}" class="guide">service</a>
+              </li>
+              <li ng-repeat="service in module.services track by service.instance.url" ng-animate="'expand'" ng-class="navClass(service.instance, service.provider)" class="api-list-item">
+                <a ng-show="service.provider" class="pull-right" href="{{service.provider.url}}" tabindex="2"><i class="icon-cog"></i></a>
+                <a href="{{service.instance.url}}" tabindex="2">{{service.name}}</a>
+              </li>
 
-            <li class="nav-header section" ng-show="module.types">
-              <a href="{{URL.type}}" class="guide">Types</a>
-            </li>
-            <li ng-repeat="page in module.types track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
-              <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
-            </li>
+              <li class="nav-header section" ng-show="module.types">
+                <a href="{{URL.type}}" class="guide">Types</a>
+              </li>
+              <li ng-repeat="page in module.types track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
+                <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
+              </li>
 
-            <li class="nav-header section" ng-show="module.globals">
-              <a href="{{URL.api}}" class="global guide">global APIs</a>
-              &nbsp;
-            </li>
-            <li ng-repeat="page in module.globals track by page.url" ng-class="navClass(page)" class="api-list-item">
-              <a href="{{page.url}}" tabindex="2">{{page.id}}</a>
-            </li>
+              <li class="nav-header section" ng-show="module.globals">
+                <a href="{{URL.api}}" class="global guide">global APIs</a>
+                &nbsp;
+              </li>
+              <li ng-repeat="page in module.globals track by page.url" ng-class="navClass(page)" class="api-list-item">
+                <a href="{{page.url}}" tabindex="2">{{page.id}}</a>
+              </li>
 
-          </ul>
+            </ul>
 
-        </form>
+          </form>
+        </div>
       </div>
       <div class="span9">