1 | /** |
---|
2 | * @license AngularJS v1.2.7 |
---|
3 | * (c) 2010-2014 Google, Inc. http://angularjs.org |
---|
4 | * License: MIT |
---|
5 | */ |
---|
6 | (function(window, angular, undefined) {'use strict'; |
---|
7 | |
---|
8 | /** |
---|
9 | * @ngdoc overview |
---|
10 | * @name ngRoute |
---|
11 | * @description |
---|
12 | * |
---|
13 | * # ngRoute |
---|
14 | * |
---|
15 | * The `ngRoute` module provides routing and deeplinking services and directives for angular apps. |
---|
16 | * |
---|
17 | * ## Example |
---|
18 | * See {@link ngRoute.$route#example $route} for an example of configuring and using `ngRoute`. |
---|
19 | * |
---|
20 | * {@installModule route} |
---|
21 | * |
---|
22 | * <div doc-module-components="ngRoute"></div> |
---|
23 | */ |
---|
24 | /* global -ngRouteModule */ |
---|
25 | var ngRouteModule = angular.module('ngRoute', ['ng']). |
---|
26 | provider('$route', $RouteProvider); |
---|
27 | |
---|
28 | /** |
---|
29 | * @ngdoc object |
---|
30 | * @name ngRoute.$routeProvider |
---|
31 | * @function |
---|
32 | * |
---|
33 | * @description |
---|
34 | * |
---|
35 | * Used for configuring routes. |
---|
36 | * |
---|
37 | * ## Example |
---|
38 | * See {@link ngRoute.$route#example $route} for an example of configuring and using `ngRoute`. |
---|
39 | * |
---|
40 | * ## Dependencies |
---|
41 | * Requires the {@link ngRoute `ngRoute`} module to be installed. |
---|
42 | */ |
---|
43 | function $RouteProvider(){ |
---|
44 | function inherit(parent, extra) { |
---|
45 | return angular.extend(new (angular.extend(function() {}, {prototype:parent}))(), extra); |
---|
46 | } |
---|
47 | |
---|
48 | var routes = {}; |
---|
49 | |
---|
50 | /** |
---|
51 | * @ngdoc method |
---|
52 | * @name ngRoute.$routeProvider#when |
---|
53 | * @methodOf ngRoute.$routeProvider |
---|
54 | * |
---|
55 | * @param {string} path Route path (matched against `$location.path`). If `$location.path` |
---|
56 | * contains redundant trailing slash or is missing one, the route will still match and the |
---|
57 | * `$location.path` will be updated to add or drop the trailing slash to exactly match the |
---|
58 | * route definition. |
---|
59 | * |
---|
60 | * * `path` can contain named groups starting with a colon: e.g. `:name`. All characters up |
---|
61 | * to the next slash are matched and stored in `$routeParams` under the given `name` |
---|
62 | * when the route matches. |
---|
63 | * * `path` can contain named groups starting with a colon and ending with a star: |
---|
64 | * e.g.`:name*`. All characters are eagerly stored in `$routeParams` under the given `name` |
---|
65 | * when the route matches. |
---|
66 | * * `path` can contain optional named groups with a question mark: e.g.`:name?`. |
---|
67 | * |
---|
68 | * For example, routes like `/color/:color/largecode/:largecode*\/edit` will match |
---|
69 | * `/color/brown/largecode/code/with/slashs/edit` and extract: |
---|
70 | * |
---|
71 | * * `color: brown` |
---|
72 | * * `largecode: code/with/slashs`. |
---|
73 | * |
---|
74 | * |
---|
75 | * @param {Object} route Mapping information to be assigned to `$route.current` on route |
---|
76 | * match. |
---|
77 | * |
---|
78 | * Object properties: |
---|
79 | * |
---|
80 | * - `controller` â `{(string|function()=}` â Controller fn that should be associated with |
---|
81 | * newly created scope or the name of a {@link angular.Module#controller registered |
---|
82 | * controller} if passed as a string. |
---|
83 | * - `controllerAs` â `{string=}` â A controller alias name. If present the controller will be |
---|
84 | * published to scope under the `controllerAs` name. |
---|
85 | * - `template` â `{string=|function()=}` â html template as a string or a function that |
---|
86 | * returns an html template as a string which should be used by {@link |
---|
87 | * ngRoute.directive:ngView ngView} or {@link ng.directive:ngInclude ngInclude} directives. |
---|
88 | * This property takes precedence over `templateUrl`. |
---|
89 | * |
---|
90 | * If `template` is a function, it will be called with the following parameters: |
---|
91 | * |
---|
92 | * - `{Array.<Object>}` - route parameters extracted from the current |
---|
93 | * `$location.path()` by applying the current route |
---|
94 | * |
---|
95 | * - `templateUrl` â `{string=|function()=}` â path or function that returns a path to an html |
---|
96 | * template that should be used by {@link ngRoute.directive:ngView ngView}. |
---|
97 | * |
---|
98 | * If `templateUrl` is a function, it will be called with the following parameters: |
---|
99 | * |
---|
100 | * - `{Array.<Object>}` - route parameters extracted from the current |
---|
101 | * `$location.path()` by applying the current route |
---|
102 | * |
---|
103 | * - `resolve` - `{Object.<string, function>=}` - An optional map of dependencies which should |
---|
104 | * be injected into the controller. If any of these dependencies are promises, the router |
---|
105 | * will wait for them all to be resolved or one to be rejected before the controller is |
---|
106 | * instantiated. |
---|
107 | * If all the promises are resolved successfully, the values of the resolved promises are |
---|
108 | * injected and {@link ngRoute.$route#$routeChangeSuccess $routeChangeSuccess} event is |
---|
109 | * fired. If any of the promises are rejected the |
---|
110 | * {@link ngRoute.$route#$routeChangeError $routeChangeError} event is fired. The map object |
---|
111 | * is: |
---|
112 | * |
---|
113 | * - `key` â `{string}`: a name of a dependency to be injected into the controller. |
---|
114 | * - `factory` - `{string|function}`: If `string` then it is an alias for a service. |
---|
115 | * Otherwise if function, then it is {@link api/AUTO.$injector#invoke injected} |
---|
116 | * and the return value is treated as the dependency. If the result is a promise, it is |
---|
117 | * resolved before its value is injected into the controller. Be aware that |
---|
118 | * `ngRoute.$routeParams` will still refer to the previous route within these resolve |
---|
119 | * functions. Use `$route.current.params` to access the new route parameters, instead. |
---|
120 | * |
---|
121 | * - `redirectTo` â {(string|function())=} â value to update |
---|
122 | * {@link ng.$location $location} path with and trigger route redirection. |
---|
123 | * |
---|
124 | * If `redirectTo` is a function, it will be called with the following parameters: |
---|
125 | * |
---|
126 | * - `{Object.<string>}` - route parameters extracted from the current |
---|
127 | * `$location.path()` by applying the current route templateUrl. |
---|
128 | * - `{string}` - current `$location.path()` |
---|
129 | * - `{Object}` - current `$location.search()` |
---|
130 | * |
---|
131 | * The custom `redirectTo` function is expected to return a string which will be used |
---|
132 | * to update `$location.path()` and `$location.search()`. |
---|
133 | * |
---|
134 | * - `[reloadOnSearch=true]` - {boolean=} - reload route when only `$location.search()` |
---|
135 | * or `$location.hash()` changes. |
---|
136 | * |
---|
137 | * If the option is set to `false` and url in the browser changes, then |
---|
138 | * `$routeUpdate` event is broadcasted on the root scope. |
---|
139 | * |
---|
140 | * - `[caseInsensitiveMatch=false]` - {boolean=} - match routes without being case sensitive |
---|
141 | * |
---|
142 | * If the option is set to `true`, then the particular route can be matched without being |
---|
143 | * case sensitive |
---|
144 | * |
---|
145 | * @returns {Object} self |
---|
146 | * |
---|
147 | * @description |
---|
148 | * Adds a new route definition to the `$route` service. |
---|
149 | */ |
---|
150 | this.when = function(path, route) { |
---|
151 | routes[path] = angular.extend( |
---|
152 | {reloadOnSearch: true}, |
---|
153 | route, |
---|
154 | path && pathRegExp(path, route) |
---|
155 | ); |
---|
156 | |
---|
157 | // create redirection for trailing slashes |
---|
158 | if (path) { |
---|
159 | var redirectPath = (path[path.length-1] == '/') |
---|
160 | ? path.substr(0, path.length-1) |
---|
161 | : path +'/'; |
---|
162 | |
---|
163 | routes[redirectPath] = angular.extend( |
---|
164 | {redirectTo: path}, |
---|
165 | pathRegExp(redirectPath, route) |
---|
166 | ); |
---|
167 | } |
---|
168 | |
---|
169 | return this; |
---|
170 | }; |
---|
171 | |
---|
172 | /** |
---|
173 | * @param path {string} path |
---|
174 | * @param opts {Object} options |
---|
175 | * @return {?Object} |
---|
176 | * |
---|
177 | * @description |
---|
178 | * Normalizes the given path, returning a regular expression |
---|
179 | * and the original path. |
---|
180 | * |
---|
181 | * Inspired by pathRexp in visionmedia/express/lib/utils.js. |
---|
182 | */ |
---|
183 | function pathRegExp(path, opts) { |
---|
184 | var insensitive = opts.caseInsensitiveMatch, |
---|
185 | ret = { |
---|
186 | originalPath: path, |
---|
187 | regexp: path |
---|
188 | }, |
---|
189 | keys = ret.keys = []; |
---|
190 | |
---|
191 | path = path |
---|
192 | .replace(/([().])/g, '\\$1') |
---|
193 | .replace(/(\/)?:(\w+)([\?|\*])?/g, function(_, slash, key, option){ |
---|
194 | var optional = option === '?' ? option : null; |
---|
195 | var star = option === '*' ? option : null; |
---|
196 | keys.push({ name: key, optional: !!optional }); |
---|
197 | slash = slash || ''; |
---|
198 | return '' |
---|
199 | + (optional ? '' : slash) |
---|
200 | + '(?:' |
---|
201 | + (optional ? slash : '') |
---|
202 | + (star && '(.+?)' || '([^/]+)') |
---|
203 | + (optional || '') |
---|
204 | + ')' |
---|
205 | + (optional || ''); |
---|
206 | }) |
---|
207 | .replace(/([\/$\*])/g, '\\$1'); |
---|
208 | |
---|
209 | ret.regexp = new RegExp('^' + path + '$', insensitive ? 'i' : ''); |
---|
210 | return ret; |
---|
211 | } |
---|
212 | |
---|
213 | /** |
---|
214 | * @ngdoc method |
---|
215 | * @name ngRoute.$routeProvider#otherwise |
---|
216 | * @methodOf ngRoute.$routeProvider |
---|
217 | * |
---|
218 | * @description |
---|
219 | * Sets route definition that will be used on route change when no other route definition |
---|
220 | * is matched. |
---|
221 | * |
---|
222 | * @param {Object} params Mapping information to be assigned to `$route.current`. |
---|
223 | * @returns {Object} self |
---|
224 | */ |
---|
225 | this.otherwise = function(params) { |
---|
226 | this.when(null, params); |
---|
227 | return this; |
---|
228 | }; |
---|
229 | |
---|
230 | |
---|
231 | this.$get = ['$rootScope', |
---|
232 | '$location', |
---|
233 | '$routeParams', |
---|
234 | '$q', |
---|
235 | '$injector', |
---|
236 | '$http', |
---|
237 | '$templateCache', |
---|
238 | '$sce', |
---|
239 | function($rootScope, $location, $routeParams, $q, $injector, $http, $templateCache, $sce) { |
---|
240 | |
---|
241 | /** |
---|
242 | * @ngdoc object |
---|
243 | * @name ngRoute.$route |
---|
244 | * @requires $location |
---|
245 | * @requires $routeParams |
---|
246 | * |
---|
247 | * @property {Object} current Reference to the current route definition. |
---|
248 | * The route definition contains: |
---|
249 | * |
---|
250 | * - `controller`: The controller constructor as define in route definition. |
---|
251 | * - `locals`: A map of locals which is used by {@link ng.$controller $controller} service for |
---|
252 | * controller instantiation. The `locals` contain |
---|
253 | * the resolved values of the `resolve` map. Additionally the `locals` also contain: |
---|
254 | * |
---|
255 | * - `$scope` - The current route scope. |
---|
256 | * - `$template` - The current route template HTML. |
---|
257 | * |
---|
258 | * @property {Array.<Object>} routes Array of all configured routes. |
---|
259 | * |
---|
260 | * @description |
---|
261 | * `$route` is used for deep-linking URLs to controllers and views (HTML partials). |
---|
262 | * It watches `$location.url()` and tries to map the path to an existing route definition. |
---|
263 | * |
---|
264 | * Requires the {@link ngRoute `ngRoute`} module to be installed. |
---|
265 | * |
---|
266 | * You can define routes through {@link ngRoute.$routeProvider $routeProvider}'s API. |
---|
267 | * |
---|
268 | * The `$route` service is typically used in conjunction with the |
---|
269 | * {@link ngRoute.directive:ngView `ngView`} directive and the |
---|
270 | * {@link ngRoute.$routeParams `$routeParams`} service. |
---|
271 | * |
---|
272 | * @example |
---|
273 | This example shows how changing the URL hash causes the `$route` to match a route against the |
---|
274 | URL, and the `ngView` pulls in the partial. |
---|
275 | |
---|
276 | Note that this example is using {@link ng.directive:script inlined templates} |
---|
277 | to get it working on jsfiddle as well. |
---|
278 | |
---|
279 | <example module="ngViewExample" deps="angular-route.js"> |
---|
280 | <file name="index.html"> |
---|
281 | <div ng-controller="MainCntl"> |
---|
282 | Choose: |
---|
283 | <a href="Book/Moby">Moby</a> | |
---|
284 | <a href="Book/Moby/ch/1">Moby: Ch1</a> | |
---|
285 | <a href="Book/Gatsby">Gatsby</a> | |
---|
286 | <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> | |
---|
287 | <a href="Book/Scarlet">Scarlet Letter</a><br/> |
---|
288 | |
---|
289 | <div ng-view></div> |
---|
290 | <hr /> |
---|
291 | |
---|
292 | <pre>$location.path() = {{$location.path()}}</pre> |
---|
293 | <pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre> |
---|
294 | <pre>$route.current.params = {{$route.current.params}}</pre> |
---|
295 | <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre> |
---|
296 | <pre>$routeParams = {{$routeParams}}</pre> |
---|
297 | </div> |
---|
298 | </file> |
---|
299 | |
---|
300 | <file name="book.html"> |
---|
301 | controller: {{name}}<br /> |
---|
302 | Book Id: {{params.bookId}}<br /> |
---|
303 | </file> |
---|
304 | |
---|
305 | <file name="chapter.html"> |
---|
306 | controller: {{name}}<br /> |
---|
307 | Book Id: {{params.bookId}}<br /> |
---|
308 | Chapter Id: {{params.chapterId}} |
---|
309 | </file> |
---|
310 | |
---|
311 | <file name="script.js"> |
---|
312 | angular.module('ngViewExample', ['ngRoute']) |
---|
313 | |
---|
314 | .config(function($routeProvider, $locationProvider) { |
---|
315 | $routeProvider.when('/Book/:bookId', { |
---|
316 | templateUrl: 'book.html', |
---|
317 | controller: BookCntl, |
---|
318 | resolve: { |
---|
319 | // I will cause a 1 second delay |
---|
320 | delay: function($q, $timeout) { |
---|
321 | var delay = $q.defer(); |
---|
322 | $timeout(delay.resolve, 1000); |
---|
323 | return delay.promise; |
---|
324 | } |
---|
325 | } |
---|
326 | }); |
---|
327 | $routeProvider.when('/Book/:bookId/ch/:chapterId', { |
---|
328 | templateUrl: 'chapter.html', |
---|
329 | controller: ChapterCntl |
---|
330 | }); |
---|
331 | |
---|
332 | // configure html5 to get links working on jsfiddle |
---|
333 | $locationProvider.html5Mode(true); |
---|
334 | }); |
---|
335 | |
---|
336 | function MainCntl($scope, $route, $routeParams, $location) { |
---|
337 | $scope.$route = $route; |
---|
338 | $scope.$location = $location; |
---|
339 | $scope.$routeParams = $routeParams; |
---|
340 | } |
---|
341 | |
---|
342 | function BookCntl($scope, $routeParams) { |
---|
343 | $scope.name = "BookCntl"; |
---|
344 | $scope.params = $routeParams; |
---|
345 | } |
---|
346 | |
---|
347 | function ChapterCntl($scope, $routeParams) { |
---|
348 | $scope.name = "ChapterCntl"; |
---|
349 | $scope.params = $routeParams; |
---|
350 | } |
---|
351 | </file> |
---|
352 | |
---|
353 | <file name="scenario.js"> |
---|
354 | it('should load and compile correct template', function() { |
---|
355 | element('a:contains("Moby: Ch1")').click(); |
---|
356 | var content = element('.doc-example-live [ng-view]').text(); |
---|
357 | expect(content).toMatch(/controller\: ChapterCntl/); |
---|
358 | expect(content).toMatch(/Book Id\: Moby/); |
---|
359 | expect(content).toMatch(/Chapter Id\: 1/); |
---|
360 | |
---|
361 | element('a:contains("Scarlet")').click(); |
---|
362 | sleep(2); // promises are not part of scenario waiting |
---|
363 | content = element('.doc-example-live [ng-view]').text(); |
---|
364 | expect(content).toMatch(/controller\: BookCntl/); |
---|
365 | expect(content).toMatch(/Book Id\: Scarlet/); |
---|
366 | }); |
---|
367 | </file> |
---|
368 | </example> |
---|
369 | */ |
---|
370 | |
---|
371 | /** |
---|
372 | * @ngdoc event |
---|
373 | * @name ngRoute.$route#$routeChangeStart |
---|
374 | * @eventOf ngRoute.$route |
---|
375 | * @eventType broadcast on root scope |
---|
376 | * @description |
---|
377 | * Broadcasted before a route change. At this point the route services starts |
---|
378 | * resolving all of the dependencies needed for the route change to occurs. |
---|
379 | * Typically this involves fetching the view template as well as any dependencies |
---|
380 | * defined in `resolve` route property. Once all of the dependencies are resolved |
---|
381 | * `$routeChangeSuccess` is fired. |
---|
382 | * |
---|
383 | * @param {Object} angularEvent Synthetic event object. |
---|
384 | * @param {Route} next Future route information. |
---|
385 | * @param {Route} current Current route information. |
---|
386 | */ |
---|
387 | |
---|
388 | /** |
---|
389 | * @ngdoc event |
---|
390 | * @name ngRoute.$route#$routeChangeSuccess |
---|
391 | * @eventOf ngRoute.$route |
---|
392 | * @eventType broadcast on root scope |
---|
393 | * @description |
---|
394 | * Broadcasted after a route dependencies are resolved. |
---|
395 | * {@link ngRoute.directive:ngView ngView} listens for the directive |
---|
396 | * to instantiate the controller and render the view. |
---|
397 | * |
---|
398 | * @param {Object} angularEvent Synthetic event object. |
---|
399 | * @param {Route} current Current route information. |
---|
400 | * @param {Route|Undefined} previous Previous route information, or undefined if current is |
---|
401 | * first route entered. |
---|
402 | */ |
---|
403 | |
---|
404 | /** |
---|
405 | * @ngdoc event |
---|
406 | * @name ngRoute.$route#$routeChangeError |
---|
407 | * @eventOf ngRoute.$route |
---|
408 | * @eventType broadcast on root scope |
---|
409 | * @description |
---|
410 | * Broadcasted if any of the resolve promises are rejected. |
---|
411 | * |
---|
412 | * @param {Object} angularEvent Synthetic event object |
---|
413 | * @param {Route} current Current route information. |
---|
414 | * @param {Route} previous Previous route information. |
---|
415 | * @param {Route} rejection Rejection of the promise. Usually the error of the failed promise. |
---|
416 | */ |
---|
417 | |
---|
418 | /** |
---|
419 | * @ngdoc event |
---|
420 | * @name ngRoute.$route#$routeUpdate |
---|
421 | * @eventOf ngRoute.$route |
---|
422 | * @eventType broadcast on root scope |
---|
423 | * @description |
---|
424 | * |
---|
425 | * The `reloadOnSearch` property has been set to false, and we are reusing the same |
---|
426 | * instance of the Controller. |
---|
427 | */ |
---|
428 | |
---|
429 | var forceReload = false, |
---|
430 | $route = { |
---|
431 | routes: routes, |
---|
432 | |
---|
433 | /** |
---|
434 | * @ngdoc method |
---|
435 | * @name ngRoute.$route#reload |
---|
436 | * @methodOf ngRoute.$route |
---|
437 | * |
---|
438 | * @description |
---|
439 | * Causes `$route` service to reload the current route even if |
---|
440 | * {@link ng.$location $location} hasn't changed. |
---|
441 | * |
---|
442 | * As a result of that, {@link ngRoute.directive:ngView ngView} |
---|
443 | * creates new scope, reinstantiates the controller. |
---|
444 | */ |
---|
445 | reload: function() { |
---|
446 | forceReload = true; |
---|
447 | $rootScope.$evalAsync(updateRoute); |
---|
448 | } |
---|
449 | }; |
---|
450 | |
---|
451 | $rootScope.$on('$locationChangeSuccess', updateRoute); |
---|
452 | |
---|
453 | return $route; |
---|
454 | |
---|
455 | ///////////////////////////////////////////////////// |
---|
456 | |
---|
457 | /** |
---|
458 | * @param on {string} current url |
---|
459 | * @param route {Object} route regexp to match the url against |
---|
460 | * @return {?Object} |
---|
461 | * |
---|
462 | * @description |
---|
463 | * Check if the route matches the current url. |
---|
464 | * |
---|
465 | * Inspired by match in |
---|
466 | * visionmedia/express/lib/router/router.js. |
---|
467 | */ |
---|
468 | function switchRouteMatcher(on, route) { |
---|
469 | var keys = route.keys, |
---|
470 | params = {}; |
---|
471 | |
---|
472 | if (!route.regexp) return null; |
---|
473 | |
---|
474 | var m = route.regexp.exec(on); |
---|
475 | if (!m) return null; |
---|
476 | |
---|
477 | for (var i = 1, len = m.length; i < len; ++i) { |
---|
478 | var key = keys[i - 1]; |
---|
479 | |
---|
480 | var val = 'string' == typeof m[i] |
---|
481 | ? decodeURIComponent(m[i]) |
---|
482 | : m[i]; |
---|
483 | |
---|
484 | if (key && val) { |
---|
485 | params[key.name] = val; |
---|
486 | } |
---|
487 | } |
---|
488 | return params; |
---|
489 | } |
---|
490 | |
---|
491 | function updateRoute() { |
---|
492 | var next = parseRoute(), |
---|
493 | last = $route.current; |
---|
494 | |
---|
495 | if (next && last && next.$$route === last.$$route |
---|
496 | && angular.equals(next.pathParams, last.pathParams) |
---|
497 | && !next.reloadOnSearch && !forceReload) { |
---|
498 | last.params = next.params; |
---|
499 | angular.copy(last.params, $routeParams); |
---|
500 | $rootScope.$broadcast('$routeUpdate', last); |
---|
501 | } else if (next || last) { |
---|
502 | forceReload = false; |
---|
503 | $rootScope.$broadcast('$routeChangeStart', next, last); |
---|
504 | $route.current = next; |
---|
505 | if (next) { |
---|
506 | if (next.redirectTo) { |
---|
507 | if (angular.isString(next.redirectTo)) { |
---|
508 | $location.path(interpolate(next.redirectTo, next.params)).search(next.params) |
---|
509 | .replace(); |
---|
510 | } else { |
---|
511 | $location.url(next.redirectTo(next.pathParams, $location.path(), $location.search())) |
---|
512 | .replace(); |
---|
513 | } |
---|
514 | } |
---|
515 | } |
---|
516 | |
---|
517 | $q.when(next). |
---|
518 | then(function() { |
---|
519 | if (next) { |
---|
520 | var locals = angular.extend({}, next.resolve), |
---|
521 | template, templateUrl; |
---|
522 | |
---|
523 | angular.forEach(locals, function(value, key) { |
---|
524 | locals[key] = angular.isString(value) ? |
---|
525 | $injector.get(value) : $injector.invoke(value); |
---|
526 | }); |
---|
527 | |
---|
528 | if (angular.isDefined(template = next.template)) { |
---|
529 | if (angular.isFunction(template)) { |
---|
530 | template = template(next.params); |
---|
531 | } |
---|
532 | } else if (angular.isDefined(templateUrl = next.templateUrl)) { |
---|
533 | if (angular.isFunction(templateUrl)) { |
---|
534 | templateUrl = templateUrl(next.params); |
---|
535 | } |
---|
536 | templateUrl = $sce.getTrustedResourceUrl(templateUrl); |
---|
537 | if (angular.isDefined(templateUrl)) { |
---|
538 | next.loadedTemplateUrl = templateUrl; |
---|
539 | template = $http.get(templateUrl, {cache: $templateCache}). |
---|
540 | then(function(response) { return response.data; }); |
---|
541 | } |
---|
542 | } |
---|
543 | if (angular.isDefined(template)) { |
---|
544 | locals['$template'] = template; |
---|
545 | } |
---|
546 | return $q.all(locals); |
---|
547 | } |
---|
548 | }). |
---|
549 | // after route change |
---|
550 | then(function(locals) { |
---|
551 | if (next == $route.current) { |
---|
552 | if (next) { |
---|
553 | next.locals = locals; |
---|
554 | angular.copy(next.params, $routeParams); |
---|
555 | } |
---|
556 | $rootScope.$broadcast('$routeChangeSuccess', next, last); |
---|
557 | } |
---|
558 | }, function(error) { |
---|
559 | if (next == $route.current) { |
---|
560 | $rootScope.$broadcast('$routeChangeError', next, last, error); |
---|
561 | } |
---|
562 | }); |
---|
563 | } |
---|
564 | } |
---|
565 | |
---|
566 | |
---|
567 | /** |
---|
568 | * @returns the current active route, by matching it against the URL |
---|
569 | */ |
---|
570 | function parseRoute() { |
---|
571 | // Match a route |
---|
572 | var params, match; |
---|
573 | angular.forEach(routes, function(route, path) { |
---|
574 | if (!match && (params = switchRouteMatcher($location.path(), route))) { |
---|
575 | match = inherit(route, { |
---|
576 | params: angular.extend({}, $location.search(), params), |
---|
577 | pathParams: params}); |
---|
578 | match.$$route = route; |
---|
579 | } |
---|
580 | }); |
---|
581 | // No route matched; fallback to "otherwise" route |
---|
582 | return match || routes[null] && inherit(routes[null], {params: {}, pathParams:{}}); |
---|
583 | } |
---|
584 | |
---|
585 | /** |
---|
586 | * @returns interpolation of the redirect path with the parameters |
---|
587 | */ |
---|
588 | function interpolate(string, params) { |
---|
589 | var result = []; |
---|
590 | angular.forEach((string||'').split(':'), function(segment, i) { |
---|
591 | if (i === 0) { |
---|
592 | result.push(segment); |
---|
593 | } else { |
---|
594 | var segmentMatch = segment.match(/(\w+)(.*)/); |
---|
595 | var key = segmentMatch[1]; |
---|
596 | result.push(params[key]); |
---|
597 | result.push(segmentMatch[2] || ''); |
---|
598 | delete params[key]; |
---|
599 | } |
---|
600 | }); |
---|
601 | return result.join(''); |
---|
602 | } |
---|
603 | }]; |
---|
604 | } |
---|
605 | |
---|
606 | ngRouteModule.provider('$routeParams', $RouteParamsProvider); |
---|
607 | |
---|
608 | |
---|
609 | /** |
---|
610 | * @ngdoc object |
---|
611 | * @name ngRoute.$routeParams |
---|
612 | * @requires $route |
---|
613 | * |
---|
614 | * @description |
---|
615 | * The `$routeParams` service allows you to retrieve the current set of route parameters. |
---|
616 | * |
---|
617 | * Requires the {@link ngRoute `ngRoute`} module to be installed. |
---|
618 | * |
---|
619 | * The route parameters are a combination of {@link ng.$location `$location`}'s |
---|
620 | * {@link ng.$location#methods_search `search()`} and {@link ng.$location#methods_path `path()`}. |
---|
621 | * The `path` parameters are extracted when the {@link ngRoute.$route `$route`} path is matched. |
---|
622 | * |
---|
623 | * In case of parameter name collision, `path` params take precedence over `search` params. |
---|
624 | * |
---|
625 | * The service guarantees that the identity of the `$routeParams` object will remain unchanged |
---|
626 | * (but its properties will likely change) even when a route change occurs. |
---|
627 | * |
---|
628 | * Note that the `$routeParams` are only updated *after* a route change completes successfully. |
---|
629 | * This means that you cannot rely on `$routeParams` being correct in route resolve functions. |
---|
630 | * Instead you can use `$route.current.params` to access the new route's parameters. |
---|
631 | * |
---|
632 | * @example |
---|
633 | * <pre> |
---|
634 | * // Given: |
---|
635 | * // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby |
---|
636 | * // Route: /Chapter/:chapterId/Section/:sectionId |
---|
637 | * // |
---|
638 | * // Then |
---|
639 | * $routeParams ==> {chapterId:1, sectionId:2, search:'moby'} |
---|
640 | * </pre> |
---|
641 | */ |
---|
642 | function $RouteParamsProvider() { |
---|
643 | this.$get = function() { return {}; }; |
---|
644 | } |
---|
645 | |
---|
646 | ngRouteModule.directive('ngView', ngViewFactory); |
---|
647 | ngRouteModule.directive('ngView', ngViewFillContentFactory); |
---|
648 | |
---|
649 | |
---|
650 | /** |
---|
651 | * @ngdoc directive |
---|
652 | * @name ngRoute.directive:ngView |
---|
653 | * @restrict ECA |
---|
654 | * |
---|
655 | * @description |
---|
656 | * # Overview |
---|
657 | * `ngView` is a directive that complements the {@link ngRoute.$route $route} service by |
---|
658 | * including the rendered template of the current route into the main layout (`index.html`) file. |
---|
659 | * Every time the current route changes, the included view changes with it according to the |
---|
660 | * configuration of the `$route` service. |
---|
661 | * |
---|
662 | * Requires the {@link ngRoute `ngRoute`} module to be installed. |
---|
663 | * |
---|
664 | * @animations |
---|
665 | * enter - animation is used to bring new content into the browser. |
---|
666 | * leave - animation is used to animate existing content away. |
---|
667 | * |
---|
668 | * The enter and leave animation occur concurrently. |
---|
669 | * |
---|
670 | * @scope |
---|
671 | * @priority 400 |
---|
672 | * @example |
---|
673 | <example module="ngViewExample" deps="angular-route.js" animations="true"> |
---|
674 | <file name="index.html"> |
---|
675 | <div ng-controller="MainCntl as main"> |
---|
676 | Choose: |
---|
677 | <a href="Book/Moby">Moby</a> | |
---|
678 | <a href="Book/Moby/ch/1">Moby: Ch1</a> | |
---|
679 | <a href="Book/Gatsby">Gatsby</a> | |
---|
680 | <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> | |
---|
681 | <a href="Book/Scarlet">Scarlet Letter</a><br/> |
---|
682 | |
---|
683 | <div class="view-animate-container"> |
---|
684 | <div ng-view class="view-animate"></div> |
---|
685 | </div> |
---|
686 | <hr /> |
---|
687 | |
---|
688 | <pre>$location.path() = {{main.$location.path()}}</pre> |
---|
689 | <pre>$route.current.templateUrl = {{main.$route.current.templateUrl}}</pre> |
---|
690 | <pre>$route.current.params = {{main.$route.current.params}}</pre> |
---|
691 | <pre>$route.current.scope.name = {{main.$route.current.scope.name}}</pre> |
---|
692 | <pre>$routeParams = {{main.$routeParams}}</pre> |
---|
693 | </div> |
---|
694 | </file> |
---|
695 | |
---|
696 | <file name="book.html"> |
---|
697 | <div> |
---|
698 | controller: {{book.name}}<br /> |
---|
699 | Book Id: {{book.params.bookId}}<br /> |
---|
700 | </div> |
---|
701 | </file> |
---|
702 | |
---|
703 | <file name="chapter.html"> |
---|
704 | <div> |
---|
705 | controller: {{chapter.name}}<br /> |
---|
706 | Book Id: {{chapter.params.bookId}}<br /> |
---|
707 | Chapter Id: {{chapter.params.chapterId}} |
---|
708 | </div> |
---|
709 | </file> |
---|
710 | |
---|
711 | <file name="animations.css"> |
---|
712 | .view-animate-container { |
---|
713 | position:relative; |
---|
714 | height:100px!important; |
---|
715 | position:relative; |
---|
716 | background:white; |
---|
717 | border:1px solid black; |
---|
718 | height:40px; |
---|
719 | overflow:hidden; |
---|
720 | } |
---|
721 | |
---|
722 | .view-animate { |
---|
723 | padding:10px; |
---|
724 | } |
---|
725 | |
---|
726 | .view-animate.ng-enter, .view-animate.ng-leave { |
---|
727 | -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; |
---|
728 | transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; |
---|
729 | |
---|
730 | display:block; |
---|
731 | width:100%; |
---|
732 | border-left:1px solid black; |
---|
733 | |
---|
734 | position:absolute; |
---|
735 | top:0; |
---|
736 | left:0; |
---|
737 | right:0; |
---|
738 | bottom:0; |
---|
739 | padding:10px; |
---|
740 | } |
---|
741 | |
---|
742 | .view-animate.ng-enter { |
---|
743 | left:100%; |
---|
744 | } |
---|
745 | .view-animate.ng-enter.ng-enter-active { |
---|
746 | left:0; |
---|
747 | } |
---|
748 | .view-animate.ng-leave.ng-leave-active { |
---|
749 | left:-100%; |
---|
750 | } |
---|
751 | </file> |
---|
752 | |
---|
753 | <file name="script.js"> |
---|
754 | angular.module('ngViewExample', ['ngRoute', 'ngAnimate'], |
---|
755 | function($routeProvider, $locationProvider) { |
---|
756 | $routeProvider.when('/Book/:bookId', { |
---|
757 | templateUrl: 'book.html', |
---|
758 | controller: BookCntl, |
---|
759 | controllerAs: 'book' |
---|
760 | }); |
---|
761 | $routeProvider.when('/Book/:bookId/ch/:chapterId', { |
---|
762 | templateUrl: 'chapter.html', |
---|
763 | controller: ChapterCntl, |
---|
764 | controllerAs: 'chapter' |
---|
765 | }); |
---|
766 | |
---|
767 | // configure html5 to get links working on jsfiddle |
---|
768 | $locationProvider.html5Mode(true); |
---|
769 | }); |
---|
770 | |
---|
771 | function MainCntl($route, $routeParams, $location) { |
---|
772 | this.$route = $route; |
---|
773 | this.$location = $location; |
---|
774 | this.$routeParams = $routeParams; |
---|
775 | } |
---|
776 | |
---|
777 | function BookCntl($routeParams) { |
---|
778 | this.name = "BookCntl"; |
---|
779 | this.params = $routeParams; |
---|
780 | } |
---|
781 | |
---|
782 | function ChapterCntl($routeParams) { |
---|
783 | this.name = "ChapterCntl"; |
---|
784 | this.params = $routeParams; |
---|
785 | } |
---|
786 | </file> |
---|
787 | |
---|
788 | <file name="scenario.js"> |
---|
789 | it('should load and compile correct template', function() { |
---|
790 | element('a:contains("Moby: Ch1")').click(); |
---|
791 | var content = element('.doc-example-live [ng-view]').text(); |
---|
792 | expect(content).toMatch(/controller\: ChapterCntl/); |
---|
793 | expect(content).toMatch(/Book Id\: Moby/); |
---|
794 | expect(content).toMatch(/Chapter Id\: 1/); |
---|
795 | |
---|
796 | element('a:contains("Scarlet")').click(); |
---|
797 | content = element('.doc-example-live [ng-view]').text(); |
---|
798 | expect(content).toMatch(/controller\: BookCntl/); |
---|
799 | expect(content).toMatch(/Book Id\: Scarlet/); |
---|
800 | }); |
---|
801 | </file> |
---|
802 | </example> |
---|
803 | */ |
---|
804 | |
---|
805 | |
---|
806 | /** |
---|
807 | * @ngdoc event |
---|
808 | * @name ngRoute.directive:ngView#$viewContentLoaded |
---|
809 | * @eventOf ngRoute.directive:ngView |
---|
810 | * @eventType emit on the current ngView scope |
---|
811 | * @description |
---|
812 | * Emitted every time the ngView content is reloaded. |
---|
813 | */ |
---|
814 | ngViewFactory.$inject = ['$route', '$anchorScroll', '$animate']; |
---|
815 | function ngViewFactory( $route, $anchorScroll, $animate) { |
---|
816 | return { |
---|
817 | restrict: 'ECA', |
---|
818 | terminal: true, |
---|
819 | priority: 400, |
---|
820 | transclude: 'element', |
---|
821 | link: function(scope, $element, attr, ctrl, $transclude) { |
---|
822 | var currentScope, |
---|
823 | currentElement, |
---|
824 | autoScrollExp = attr.autoscroll, |
---|
825 | onloadExp = attr.onload || ''; |
---|
826 | |
---|
827 | scope.$on('$routeChangeSuccess', update); |
---|
828 | update(); |
---|
829 | |
---|
830 | function cleanupLastView() { |
---|
831 | if (currentScope) { |
---|
832 | currentScope.$destroy(); |
---|
833 | currentScope = null; |
---|
834 | } |
---|
835 | if(currentElement) { |
---|
836 | $animate.leave(currentElement); |
---|
837 | currentElement = null; |
---|
838 | } |
---|
839 | } |
---|
840 | |
---|
841 | function update() { |
---|
842 | var locals = $route.current && $route.current.locals, |
---|
843 | template = locals && locals.$template; |
---|
844 | |
---|
845 | if (angular.isDefined(template)) { |
---|
846 | var newScope = scope.$new(); |
---|
847 | var current = $route.current; |
---|
848 | |
---|
849 | // Note: This will also link all children of ng-view that were contained in the original |
---|
850 | // html. If that content contains controllers, ... they could pollute/change the scope. |
---|
851 | // However, using ng-view on an element with additional content does not make sense... |
---|
852 | // Note: We can't remove them in the cloneAttchFn of $transclude as that |
---|
853 | // function is called before linking the content, which would apply child |
---|
854 | // directives to non existing elements. |
---|
855 | var clone = $transclude(newScope, function(clone) { |
---|
856 | $animate.enter(clone, null, currentElement || $element, function onNgViewEnter () { |
---|
857 | if (angular.isDefined(autoScrollExp) |
---|
858 | && (!autoScrollExp || scope.$eval(autoScrollExp))) { |
---|
859 | $anchorScroll(); |
---|
860 | } |
---|
861 | }); |
---|
862 | cleanupLastView(); |
---|
863 | }); |
---|
864 | |
---|
865 | currentElement = clone; |
---|
866 | currentScope = current.scope = newScope; |
---|
867 | currentScope.$emit('$viewContentLoaded'); |
---|
868 | currentScope.$eval(onloadExp); |
---|
869 | } else { |
---|
870 | cleanupLastView(); |
---|
871 | } |
---|
872 | } |
---|
873 | } |
---|
874 | }; |
---|
875 | } |
---|
876 | |
---|
877 | // This directive is called during the $transclude call of the first `ngView` directive. |
---|
878 | // It will replace and compile the content of the element with the loaded template. |
---|
879 | // We need this directive so that the element content is already filled when |
---|
880 | // the link function of another directive on the same element as ngView |
---|
881 | // is called. |
---|
882 | ngViewFillContentFactory.$inject = ['$compile', '$controller', '$route']; |
---|
883 | function ngViewFillContentFactory($compile, $controller, $route) { |
---|
884 | return { |
---|
885 | restrict: 'ECA', |
---|
886 | priority: -400, |
---|
887 | link: function(scope, $element) { |
---|
888 | var current = $route.current, |
---|
889 | locals = current.locals; |
---|
890 | |
---|
891 | $element.html(locals.$template); |
---|
892 | |
---|
893 | var link = $compile($element.contents()); |
---|
894 | |
---|
895 | if (current.controller) { |
---|
896 | locals.$scope = scope; |
---|
897 | var controller = $controller(current.controller, locals); |
---|
898 | if (current.controllerAs) { |
---|
899 | scope[current.controllerAs] = controller; |
---|
900 | } |
---|
901 | $element.data('$ngControllerController', controller); |
---|
902 | $element.children().data('$ngControllerController', controller); |
---|
903 | } |
---|
904 | |
---|
905 | link(scope); |
---|
906 | } |
---|
907 | }; |
---|
908 | } |
---|
909 | |
---|
910 | |
---|
911 | })(window, window.angular); |
---|