source: cats/SCHEMAcat/trunk/urn.org.isocat.schemacat.site/site/lib/AngularJS-1.2.5/angular-route.js @ 4192

Last change on this file since 4192 was 4192, checked in by andmor, 10 years ago

Updated to AngularJS 1.2.5

File size: 31.2 KB
Line 
1/**
2 * @license AngularJS v1.2.5
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 */
25var 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 */
43function $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
606ngRouteModule.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 */
642function $RouteParamsProvider() {
643  this.$get = function() { return {}; };
644}
645
646ngRouteModule.directive('ngView', ngViewFactory);
647ngRouteModule.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 */
814ngViewFactory.$inject = ['$route', '$anchorScroll', '$animate'];
815function 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 (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.
882ngViewFillContentFactory.$inject = ['$compile', '$controller', '$route'];
883function 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);
Note: See TracBrowser for help on using the repository browser.