From 8e2675029f5ca404a7c649cc161df3ea642d941f Mon Sep 17 00:00:00 2001
From: Misko Hevery
Date: Sat, 28 Apr 2012 22:45:28 -0700
Subject: chore(docs): re-skin main documentation

---
 src/ng/cacheFactory.js           |  10 +++
 src/ng/directive/ngClass.js      |  76 ++++++++++++-------
 src/ng/directive/ngController.js |   2 +-
 src/ng/directive/ngInclude.js    |  76 ++++++++++---------
 src/ng/directive/ngStyle.js      |  17 +++--
 src/ng/directive/ngView.js       |  99 ++++++++++++-------------
 src/ng/directive/select.js       |   2 +-
 src/ng/http.js                   | 135 +++++++++++++++++-----------------
 src/ng/route.js                  | 153 ++++++++++++++++++++-------------------
 9 files changed, 311 insertions(+), 259 deletions(-)

(limited to 'src/ng')

diff --git a/src/ng/cacheFactory.js b/src/ng/cacheFactory.js
index 82c939cc..c91ffce7 100644
--- a/src/ng/cacheFactory.js
+++ b/src/ng/cacheFactory.js
@@ -151,6 +151,16 @@ function $CacheFactoryProvider() {
   };
 }
 
+/**
+ * @ngdoc object
+ * @name angular.module.ng.$templateCache
+ *
+ * @description
+ * Cache used for storing html templates.
+ *
+ * See {@link angular.module.ng.$cacheFactory $cacheFactory}.
+ *
+ */
 function $TemplateCacheProvider() {
   this.$get = ['$cacheFactory', function($cacheFactory) {
     return $cacheFactory('templates');
diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
index 1e9a260b..7e0d5dba 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -36,30 +36,35 @@ function classDirective(name, selector) {
  *   names, an array, or a map of class names to boolean values.
  *
  * @example
-   <doc:example>
-     <doc:source>
-      <input type="button" value="set" ng-click="myVar='ng-invalid'">
+   <example>
+     <file name="index.html">
+      <input type="button" value="set" ng-click="myVar='my-class'">
       <input type="button" value="clear" ng-click="myVar=''">
       <br>
-      <span ng-class="myVar">Sample Text &nbsp;&nbsp;&nbsp;&nbsp;</span>
-     </doc:source>
-     <doc:scenario>
+      <span ng-class="myVar">Sample Text</span>
+     </file>
+     <file name="style.css">
+       .my-class {
+         color: red;
+       }
+     </file>
+     <file name="scenario.js">
        it('should check ng-class', function() {
          expect(element('.doc-example-live span').prop('className')).not().
-           toMatch(/ng-invalid/);
+           toMatch(/my-class/);
 
          using('.doc-example-live').element(':button:first').click();
 
          expect(element('.doc-example-live span').prop('className')).
-           toMatch(/ng-invalid/);
+           toMatch(/my-class/);
 
          using('.doc-example-live').element(':button:last').click();
 
          expect(element('.doc-example-live span').prop('className')).not().
-           toMatch(/ng-invalid/);
+           toMatch(/my-class/);
        });
-     </doc:scenario>
-   </doc:example>
+     </file>
+   </example>
  */
 var ngClassDirective = classDirective('', true);
 
@@ -80,26 +85,33 @@ var ngClassDirective = classDirective('', true);
  *   of the evaluation can be a string representing space delimited class names or an array.
  *
  * @example
-   <doc:example>
-     <doc:source>
+   <example>
+     <file name="index.html">
         <ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
           <li ng-repeat="name in names">
-           <span ng-class-odd="'ng-format-negative'"
-                 ng-class-even="'ng-invalid'">
-             {{name}} &nbsp; &nbsp; &nbsp;
+           <span ng-class-odd="'odd'" ng-class-even="'even'">
+             {{name}}
            </span>
           </li>
         </ol>
-     </doc:source>
-     <doc:scenario>
+     </file>
+     <file name="style.css">
+       .odd {
+         color: red;
+       }
+       .even {
+         color: blue;
+       }
+     </file>
+     <file name="scenario.js">
        it('should check ng-class-odd and ng-class-even', function() {
          expect(element('.doc-example-live li:first span').prop('className')).
-           toMatch(/ng-format-negative/);
+           toMatch(/odd/);
          expect(element('.doc-example-live li:last span').prop('className')).
-           toMatch(/ng-invalid/);
+           toMatch(/even/);
        });
-     </doc:scenario>
-   </doc:example>
+     </file>
+   </example>
  */
 var ngClassOddDirective = classDirective('Odd', 0);
 
@@ -120,8 +132,8 @@ var ngClassOddDirective = classDirective('Odd', 0);
  *   result of the evaluation can be a string representing space delimited class names or an array.
  *
  * @example
-   <doc:example>
-     <doc:source>
+   <example>
+     <file name="index.html">
         <ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
           <li ng-repeat="name in names">
            <span ng-class-odd="'odd'" ng-class-even="'even'">
@@ -129,15 +141,23 @@ var ngClassOddDirective = classDirective('Odd', 0);
            </span>
           </li>
         </ol>
-     </doc:source>
-     <doc:scenario>
+     </file>
+     <file name="style.css">
+       .odd {
+         color: red;
+       }
+       .even {
+         color: blue;
+       }
+     </file>
+     <file name="scenario.js">
        it('should check ng-class-odd and ng-class-even', function() {
          expect(element('.doc-example-live li:first span').prop('className')).
            toMatch(/odd/);
          expect(element('.doc-example-live li:last span').prop('className')).
            toMatch(/even/);
        });
-     </doc:scenario>
-   </doc:example>
+     </file>
+   </example>
  */
 var ngClassEvenDirective = classDirective('Even', 1);
diff --git a/src/ng/directive/ngController.js b/src/ng/directive/ngController.js
index 55da78cd..72bd3c00 100644
--- a/src/ng/directive/ngController.js
+++ b/src/ng/directive/ngController.js
@@ -33,7 +33,7 @@
  * for a manual update.
    <doc:example>
      <doc:source>
-      <script type="text/javascript">
+      <script>
         function SettingsController($scope) {
           $scope.name = "John Smith";
           $scope.contacts = [
diff --git a/src/ng/directive/ngInclude.js b/src/ng/directive/ngInclude.js
index 9796b4e1..6d89e847 100644
--- a/src/ng/directive/ngInclude.js
+++ b/src/ng/directive/ngInclude.js
@@ -26,41 +26,47 @@
  *                  - Otherwise enable scrolling only if the expression evaluates to truthy value.
  *
  * @example
-    <doc:example>
-      <doc:source jsfiddle="false">
-       <script>
-         function Ctrl($scope) {
-           $scope.templates =
-             [ { name: 'template1.html', url: 'examples/ng-include/template1.html'}
-             , { name: 'template2.html', url: 'examples/ng-include/template2.html'} ];
-           $scope.template = $scope.templates[0];
-         }
-       </script>
-       <div ng-controller="Ctrl">
-         <select ng-model="template" ng-options="t.name for t in templates">
-          <option value="">(blank)</option>
-         </select>
-         url of the template: <tt><a href="{{template.url}}">{{template.url}}</a></tt>
-         <hr/>
-         <div ng-include src="template.url"></div>
-       </div>
-      </doc:source>
-      <doc:scenario>
-        it('should load template1.html', function() {
-         expect(element('.doc-example-live [ng-include]').text()).
-           toBe('Content of template1.html\n');
-        });
-        it('should load template2.html', function() {
-         select('template').option('1');
-         expect(element('.doc-example-live [ng-include]').text()).
-           toBe('Content of template2.html\n');
-        });
-        it('should change to blank', function() {
-         select('template').option('');
-         expect(element('.doc-example-live [ng-include]').text()).toEqual('');
-        });
-      </doc:scenario>
-    </doc:example>
+  <example>
+    <file name="index.html">
+     <div ng-controller="Ctrl">
+       <select ng-model="template" ng-options="t.name for t in templates">
+        <option value="">(blank)</option>
+       </select>
+       url of the template: <tt>{{template.url}}</tt>
+       <hr/>
+       <div ng-include src="template.url"></div>
+     </div>
+    </file>
+    <file name="script.js">
+      function Ctrl($scope) {
+        $scope.templates =
+          [ { name: 'template1.html', url: 'template1.html'}
+          , { name: 'template2.html', url: 'template2.html'} ];
+        $scope.template = $scope.templates[0];
+      }
+     </file>
+    <file name="template1.html">
+      Content of template1.html
+    </file>
+    <file name="template2.html">
+      Content of template2.html
+    </file>
+    <file name="scenario.js">
+      it('should load template1.html', function() {
+       expect(element('.doc-example-live [ng-include]').text()).
+         toMatch(/Content of template1.html/);
+      });
+      it('should load template2.html', function() {
+       select('template').option('1');
+       expect(element('.doc-example-live [ng-include]').text()).
+         toMatch(/Content of template2.html/);
+      });
+      it('should change to blank', function() {
+       select('template').option('');
+       expect(element('.doc-example-live [ng-include]').text()).toEqual('');
+      });
+    </file>
+  </example>
  */
 
 
diff --git a/src/ng/directive/ngStyle.js b/src/ng/directive/ngStyle.js
index c24c1b6d..30a266cd 100644
--- a/src/ng/directive/ngStyle.js
+++ b/src/ng/directive/ngStyle.js
@@ -13,15 +13,20 @@
  *      keys.
  *
  * @example
-   <doc:example>
-     <doc:source>
+   <example>
+     <file name="index.html">
         <input type="button" value="set" ng-click="myStyle={color:'red'}">
         <input type="button" value="clear" ng-click="myStyle={}">
         <br/>
         <span ng-style="myStyle">Sample Text</span>
         <pre>myStyle={{myStyle}}</pre>
-     </doc:source>
-     <doc:scenario>
+     </file>
+     <file name="style.css">
+       span {
+         color: black;
+       }
+     </file>
+     <file name="scenario.js">
        it('should check ng-style', function() {
          expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)');
          element('.doc-example-live :button[value=set]').click();
@@ -29,8 +34,8 @@
          element('.doc-example-live :button[value=clear]').click();
          expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)');
        });
-     </doc:scenario>
-   </doc:example>
+     </file>
+   </example>
  */
 var ngStyleDirective = ngDirective(function(scope, element, attr) {
   scope.$watch(attr.ngStyle, function(newStyles, oldStyles) {
diff --git a/src/ng/directive/ngView.js b/src/ng/directive/ngView.js
index 16ae792e..7c737765 100644
--- a/src/ng/directive/ngView.js
+++ b/src/ng/directive/ngView.js
@@ -14,51 +14,8 @@
  *
  * @scope
  * @example
-    <doc:example module="ngView">
-      <doc:source>
-        <script type="text/ng-template" id="examples/book.html">
-          controller: {{name}}<br />
-          Book Id: {{params.bookId}}<br />
-        </script>
-
-        <script type="text/ng-template" id="examples/chapter.html">
-          controller: {{name}}<br />
-          Book Id: {{params.bookId}}<br />
-          Chapter Id: {{params.chapterId}}
-        </script>
-
-        <script>
-          angular.module('ngView', [], function($routeProvider, $locationProvider) {
-            $routeProvider.when('/Book/:bookId', {
-              template: 'examples/book.html',
-              controller: BookCntl
-            });
-            $routeProvider.when('/Book/:bookId/ch/:chapterId', {
-              template: 'examples/chapter.html',
-              controller: ChapterCntl
-            });
-
-            // configure html5 to get links working on jsfiddle
-            $locationProvider.html5Mode(true);
-          });
-
-          function MainCntl($scope, $route, $routeParams, $location) {
-            $scope.$route = $route;
-            $scope.$location = $location;
-            $scope.$routeParams = $routeParams;
-          }
-
-          function BookCntl($scope, $routeParams) {
-            $scope.name = "BookCntl";
-            $scope.params = $routeParams;
-          }
-
-          function ChapterCntl($scope, $routeParams) {
-            $scope.name = "ChapterCntl";
-            $scope.params = $routeParams;
-          }
-        </script>
-
+    <example module="ngView">
+      <file name="index.html">
         <div ng-controller="MainCntl">
           Choose:
           <a href="Book/Moby">Moby</a> |
@@ -76,8 +33,52 @@
           <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
           <pre>$routeParams = {{$routeParams}}</pre>
         </div>
-      </doc:source>
-      <doc:scenario>
+      </file>
+
+      <file name="book.html">
+        controller: {{name}}<br />
+        Book Id: {{params.bookId}}<br />
+      </file>
+
+      <file name="chapter.html">
+        controller: {{name}}<br />
+        Book Id: {{params.bookId}}<br />
+        Chapter Id: {{params.chapterId}}
+      </file>
+
+      <file name="script.js">
+        angular.module('ngView', [], function($routeProvider, $locationProvider) {
+          $routeProvider.when('/Book/:bookId', {
+            template: 'book.html',
+            controller: BookCntl
+          });
+          $routeProvider.when('/Book/:bookId/ch/:chapterId', {
+            template: 'chapter.html',
+            controller: ChapterCntl
+          });
+
+          // configure html5 to get links working on jsfiddle
+          $locationProvider.html5Mode(true);
+        });
+
+        function MainCntl($scope, $route, $routeParams, $location) {
+          $scope.$route = $route;
+          $scope.$location = $location;
+          $scope.$routeParams = $routeParams;
+        }
+
+        function BookCntl($scope, $routeParams) {
+          $scope.name = "BookCntl";
+          $scope.params = $routeParams;
+        }
+
+        function ChapterCntl($scope, $routeParams) {
+          $scope.name = "ChapterCntl";
+          $scope.params = $routeParams;
+        }
+      </file>
+
+      <file name="scenario.js">
         it('should load and compile correct template', function() {
           element('a:contains("Moby: Ch1")').click();
           var content = element('.doc-example-live [ng-view]').text();
@@ -90,8 +91,8 @@
           expect(content).toMatch(/controller\: BookCntl/);
           expect(content).toMatch(/Book Id\: Scarlet/);
         });
-      </doc:scenario>
-    </doc:example>
+      </file>
+    </example>
  */
 
 
diff --git a/src/ng/directive/select.js b/src/ng/directive/select.js
index dda59375..b269973f 100644
--- a/src/ng/directive/select.js
+++ b/src/ng/directive/select.js
@@ -75,7 +75,7 @@
           <ul>
             <li ng-repeat="color in colors">
               Name: <input ng-model="color.name">
-              [<a href ng-click="colors.$remove(color)">X</a>]
+              [<a href ng-click="colors.splice($index, 1)">X</a>]
             </li>
             <li>
               [<a href ng-click="colors.push({})">add</a>]
diff --git a/src/ng/http.js b/src/ng/http.js
index 157c5d98..19b7d246 100644
--- a/src/ng/http.js
+++ b/src/ng/http.js
@@ -400,72 +400,75 @@ function $HttpProvider() {
      *
      *
      * @example
-        <doc:example>
-          <doc:source jsfiddle="false">
-            <script>
-              function FetchCtrl($scope, $http) {
-                $scope.method = 'GET';
-                $scope.url = 'examples/http-hello.html';
-
-                $scope.fetch = function() {
-                  $scope.code = null;
-                  $scope.response = null;
-
-                  $http({method: $scope.method, url: $scope.url}).
-                    success(function(data, status) {
-                      $scope.status = status;
-                      $scope.data = data;
-                    }).
-                    error(function(data, status) {
-                      $scope.data = data || "Request failed";
-                      $scope.status = status;
-                  });
-                };
-
-                $scope.updateModel = function(method, url) {
-                  $scope.method = method;
-                  $scope.url = url;
-                };
-              }
-            </script>
-            <div ng-controller="FetchCtrl">
-              <select ng-model="method">
-                <option>GET</option>
-                <option>JSONP</option>
-              </select>
-              <input type="text" ng-model="url" size="80"/>
-              <button ng-click="fetch()">fetch</button><br>
-              <button ng-click="updateModel('GET', 'examples/http-hello.html')">Sample GET</button>
-              <button ng-click="updateModel('JSONP', 'http://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero')">Sample JSONP</button>
-              <button ng-click="updateModel('JSONP', 'http://angularjs.org/doesntexist&callback=JSON_CALLBACK')">Invalid JSONP</button>
-              <pre>http status code: {{status}}</pre>
-              <pre>http response data: {{data}}</pre>
-            </div>
-          </doc:source>
-          <doc:scenario>
-            it('should make an xhr GET request', function() {
-              element(':button:contains("Sample GET")').click();
-              element(':button:contains("fetch")').click();
-              expect(binding('status')).toBe('200');
-              expect(binding('data')).toBe('Hello, $http!\n');
-            });
-
-            it('should make a JSONP request to angularjs.org', function() {
-              element(':button:contains("Sample JSONP")').click();
-              element(':button:contains("fetch")').click();
-              expect(binding('status')).toBe('200');
-              expect(binding('data')).toMatch(/Super Hero!/);
-            });
-
-            it('should make JSONP request to invalid URL and invoke the error handler',
-                function() {
-              element(':button:contains("Invalid JSONP")').click();
-              element(':button:contains("fetch")').click();
-              expect(binding('status')).toBe('0');
-              expect(binding('data')).toBe('Request failed');
-            });
-          </doc:scenario>
-        </doc:example>
+      <example>
+        <file name="index.html">
+          <div ng-controller="FetchCtrl">
+            <select ng-model="method">
+              <option>GET</option>
+              <option>JSONP</option>
+            </select>
+            <input type="text" ng-model="url" size="80"/>
+            <button ng-click="fetch()">fetch</button><br>
+            <button ng-click="updateModel('GET', 'http-hello.html')">Sample GET</button>
+            <button ng-click="updateModel('JSONP', 'http://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero')">Sample JSONP</button>
+            <button ng-click="updateModel('JSONP', 'http://angularjs.org/doesntexist&callback=JSON_CALLBACK')">Invalid JSONP</button>
+            <pre>http status code: {{status}}</pre>
+            <pre>http response data: {{data}}</pre>
+          </div>
+        </file>
+        <file name="script.js">
+          function FetchCtrl($scope, $http, $templateCache) {
+            $scope.method = 'GET';
+            $scope.url = 'http-hello.html';
+
+            $scope.fetch = function() {
+              $scope.code = null;
+              $scope.response = null;
+
+              $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
+                success(function(data, status) {
+                  $scope.status = status;
+                  $scope.data = data;
+                }).
+                error(function(data, status) {
+                  $scope.data = data || "Request failed";
+                  $scope.status = status;
+              });
+            };
+
+            $scope.updateModel = function(method, url) {
+              $scope.method = method;
+              $scope.url = url;
+            };
+          }
+        </file>
+        <file name="http-hello.html">
+          Hello, $http!
+        </file>
+        <file name="scenario.js">
+          it('should make an xhr GET request', function() {
+            element(':button:contains("Sample GET")').click();
+            element(':button:contains("fetch")').click();
+            expect(binding('status')).toBe('200');
+            expect(binding('data')).toMatch(/Hello, \$http!/);
+          });
+
+          it('should make a JSONP request to angularjs.org', function() {
+            element(':button:contains("Sample JSONP")').click();
+            element(':button:contains("fetch")').click();
+            expect(binding('status')).toBe('200');
+            expect(binding('data')).toMatch(/Super Hero!/);
+          });
+
+          it('should make JSONP request to invalid URL and invoke the error handler',
+              function() {
+            element(':button:contains("Invalid JSONP")').click();
+            element(':button:contains("fetch")').click();
+            expect(binding('status')).toBe('0');
+            expect(binding('data')).toBe('Request failed');
+          });
+        </file>
+      </example>
      */
     function $http(config) {
       config.method = uppercase(config.method);
diff --git a/src/ng/route.js b/src/ng/route.js
index 895749fe..fd54b1c5 100644
--- a/src/ng/route.js
+++ b/src/ng/route.js
@@ -117,78 +117,85 @@ function $RouteProvider(){
        Note that this example is using {@link angular.module.ng.$compileProvider.directive.script inlined templates}
        to get it working on jsfiddle as well.
 
-      <doc:example module="route">
-        <doc:source>
-          <script type="text/ng-template" id="examples/book.html">
-            controller: {{name}}<br />
-            Book Id: {{params.bookId}}<br />
-          </script>
-
-          <script type="text/ng-template" id="examples/chapter.html">
-            controller: {{name}}<br />
-            Book Id: {{params.bookId}}<br />
-            Chapter Id: {{params.chapterId}}
-          </script>
-
-          <script>
-            angular.module('route', [], function($routeProvider, $locationProvider) {
-              $routeProvider.when('/Book/:bookId', {template: 'examples/book.html', controller: BookCntl});
-              $routeProvider.when('/Book/:bookId/ch/:chapterId', {template: 'examples/chapter.html', controller: ChapterCntl});
-
-              // configure html5 to get links working on jsfiddle
-              $locationProvider.html5Mode(true);
-            });
-
-            function MainCntl($scope, $route, $routeParams, $location) {
-              $scope.$route = $route;
-              $scope.$location = $location;
-              $scope.$routeParams = $routeParams;
-            }
-
-            function BookCntl($scope, $routeParams) {
-              $scope.name = "BookCntl";
-              $scope.params = $routeParams;
-            }
-
-            function ChapterCntl($scope, $routeParams) {
-              $scope.name = "ChapterCntl";
-              $scope.params = $routeParams;
-            }
-          </script>
-
-          <div ng-controller="MainCntl">
-            Choose:
-            <a href="Book/Moby">Moby</a> |
-            <a href="Book/Moby/ch/1">Moby: Ch1</a> |
-            <a href="Book/Gatsby">Gatsby</a> |
-            <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
-            <a href="Book/Scarlet">Scarlet Letter</a><br/>
-
-            <div ng-view></div>
-            <hr />
-
-            <pre>$location.path() = {{$location.path()}}</pre>
-            <pre>$route.current.template = {{$route.current.template}}</pre>
-            <pre>$route.current.params = {{$route.current.params}}</pre>
-            <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
-            <pre>$routeParams = {{$routeParams}}</pre>
-          </div>
-        </doc:source>
-        <doc:scenario>
-          it('should load and compile correct template', function() {
-            element('a:contains("Moby: Ch1")').click();
-            var content = element('.doc-example-live [ng-view]').text();
-            expect(content).toMatch(/controller\: ChapterCntl/);
-            expect(content).toMatch(/Book Id\: Moby/);
-            expect(content).toMatch(/Chapter Id\: 1/);
-
-            element('a:contains("Scarlet")').click();
-            content = element('.doc-example-live [ng-view]').text();
-            expect(content).toMatch(/controller\: BookCntl/);
-            expect(content).toMatch(/Book Id\: Scarlet/);
-          });
-        </doc:scenario>
-      </doc:example>
+     <example module="ngView">
+       <file name="index.html">
+         <div ng-controller="MainCntl">
+           Choose:
+           <a href="Book/Moby">Moby</a> |
+           <a href="Book/Moby/ch/1">Moby: Ch1</a> |
+           <a href="Book/Gatsby">Gatsby</a> |
+           <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
+           <a href="Book/Scarlet">Scarlet Letter</a><br/>
+
+           <div ng-view></div>
+           <hr />
+
+           <pre>$location.path() = {{$location.path()}}</pre>
+           <pre>$route.current.template = {{$route.current.template}}</pre>
+           <pre>$route.current.params = {{$route.current.params}}</pre>
+           <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
+           <pre>$routeParams = {{$routeParams}}</pre>
+         </div>
+       </file>
+
+       <file name="book.html">
+         controller: {{name}}<br />
+         Book Id: {{params.bookId}}<br />
+       </file>
+
+       <file name="chapter.html">
+         controller: {{name}}<br />
+         Book Id: {{params.bookId}}<br />
+         Chapter Id: {{params.chapterId}}
+       </file>
+
+       <file name="script.js">
+         angular.module('ngView', [], function($routeProvider, $locationProvider) {
+           $routeProvider.when('/Book/:bookId', {
+             template: 'book.html',
+             controller: BookCntl
+           });
+           $routeProvider.when('/Book/:bookId/ch/:chapterId', {
+             template: 'chapter.html',
+             controller: ChapterCntl
+           });
+
+           // configure html5 to get links working on jsfiddle
+           $locationProvider.html5Mode(true);
+         });
+
+         function MainCntl($scope, $route, $routeParams, $location) {
+           $scope.$route = $route;
+           $scope.$location = $location;
+           $scope.$routeParams = $routeParams;
+         }
+
+         function BookCntl($scope, $routeParams) {
+           $scope.name = "BookCntl";
+           $scope.params = $routeParams;
+         }
+
+         function ChapterCntl($scope, $routeParams) {
+           $scope.name = "ChapterCntl";
+           $scope.params = $routeParams;
+         }
+       </file>
+
+       <file name="scenario.js">
+         it('should load and compile correct template', function() {
+           element('a:contains("Moby: Ch1")').click();
+           var content = element('.doc-example-live [ng-view]').text();
+           expect(content).toMatch(/controller\: ChapterCntl/);
+           expect(content).toMatch(/Book Id\: Moby/);
+           expect(content).toMatch(/Chapter Id\: 1/);
+
+           element('a:contains("Scarlet")').click();
+           content = element('.doc-example-live [ng-view]').text();
+           expect(content).toMatch(/controller\: BookCntl/);
+           expect(content).toMatch(/Book Id\: Scarlet/);
+         });
+       </file>
+     </example>
      */
 
     /**
@@ -238,7 +245,7 @@ function $RouteProvider(){
            * @methodOf angular.module.ng.$route
            *
            * @description
-           * Causes `$route` service to reload the current route even if
+           * Causes `$route` service to reload theR current route even if
            * {@link angular.module.ng.$location $location} hasn't changed.
            *
            * As a result of that, {@link angular.module.ng.$compileProvider.directive.ngView ngView}
-- 
cgit v1.2.3