diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/ngRoute/route.js | 193 |
1 files changed, 97 insertions, 96 deletions
diff --git a/src/ngRoute/route.js b/src/ngRoute/route.js index a1236ec9..80aef034 100644 --- a/src/ngRoute/route.js +++ b/src/ngRoute/route.js @@ -262,102 +262,103 @@ function $RouteProvider(){ * {@link ngRoute.$routeParams `$routeParams`} service. * * @example - This example shows how changing the URL hash causes the `$route` to match a route against the - URL, and the `ngView` pulls in the partial. - - Note that this example is using {@link ng.directive:script inlined templates} - to get it working on jsfiddle as well. - - <example name="$route-service" module="ngRouteExample" deps="angular-route.js" fixBase="true"> - <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.templateUrl = {{$route.current.templateUrl}}</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('ngRouteExample', ['ngRoute']) - - .config(function($routeProvider, $locationProvider) { - $routeProvider.when('/Book/:bookId', { - templateUrl: 'book.html', - controller: BookCntl, - resolve: { - // I will cause a 1 second delay - delay: function($q, $timeout) { - var delay = $q.defer(); - $timeout(delay.resolve, 1000); - return delay.promise; - } - } - }); - $routeProvider.when('/Book/:bookId/ch/:chapterId', { - templateUrl: '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="protractor.js" type="protractor"> - it('should load and compile correct template', function() { - element(by.linkText('Moby: Ch1')).click(); - var content = element(by.css('[ng-view]')).getText(); - expect(content).toMatch(/controller\: ChapterCntl/); - expect(content).toMatch(/Book Id\: Moby/); - expect(content).toMatch(/Chapter Id\: 1/); - - element(by.partialLinkText('Scarlet')).click(); - - content = element(by.css('[ng-view]')).getText(); - expect(content).toMatch(/controller\: BookCntl/); - expect(content).toMatch(/Book Id\: Scarlet/); - }); - </file> - </example> + * This example shows how changing the URL hash causes the `$route` to match a route against the + * URL, and the `ngView` pulls in the partial. + * + * Note that this example is using {@link ng.directive:script inlined templates} + * to get it working on jsfiddle as well. + * + * <example name="$route-service" module="ngRouteExample" + * deps="angular-route.js" fixBase="true"> + * <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.templateUrl = {{$route.current.templateUrl}}</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('ngRouteExample', ['ngRoute']) + * + * .config(function($routeProvider, $locationProvider) { + * $routeProvider.when('/Book/:bookId', { + * templateUrl: 'book.html', + * controller: BookCntl, + * resolve: { + * // I will cause a 1 second delay + * delay: function($q, $timeout) { + * var delay = $q.defer(); + * $timeout(delay.resolve, 1000); + * return delay.promise; + * } + * } + * }); + * $routeProvider.when('/Book/:bookId/ch/:chapterId', { + * templateUrl: '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="protractor.js" type="protractor"> + * it('should load and compile correct template', function() { + * element(by.linkText('Moby: Ch1')).click(); + * var content = element(by.css('[ng-view]')).getText(); + * expect(content).toMatch(/controller\: ChapterCntl/); + * expect(content).toMatch(/Book Id\: Moby/); + * expect(content).toMatch(/Chapter Id\: 1/); + * + * element(by.partialLinkText('Scarlet')).click(); + * + * content = element(by.css('[ng-view]')).getText(); + * expect(content).toMatch(/controller\: BookCntl/); + * expect(content).toMatch(/Book Id\: Scarlet/); + * }); + * </file> + * </example> */ /** |