From 5599b55b04788c2e327d7551a4a699d75516dd21 Mon Sep 17 00:00:00 2001 From: Igor Minar Date: Wed, 5 Jun 2013 15:30:31 -0700 Subject: refactor($route): pull $route and friends into angular-route.js $route, $routeParams and ngView have been pulled from core angular.js to angular-route.js/ngRoute module. This is was done to in order keep the core focused on most commonly used functionality and allow community routers to be freely used instead of $route service. There is no need to panic, angular-route will keep on being supported by the angular team. Note: I'm intentionally not fixing tutorial links. Tutorial will need bigger changes and those should be done when we update tutorial to 1.2. BREAKING CHANGE: applications that use $route will now need to load angular-route.js file and define dependency on ngRoute module. Before: ``` ... ... var myApp = angular.module('myApp', ['someOtherModule']); ... ``` After: ``` ... ... var myApp = angular.module('myApp', ['ngRoute', 'someOtherModule']); ... ``` Closes #2804 --- src/ng/directive/ngController.js | 2 +- src/ng/directive/ngView.js | 226 --------------------------------------- 2 files changed, 1 insertion(+), 227 deletions(-) delete mode 100644 src/ng/directive/ngView.js (limited to 'src/ng/directive') diff --git a/src/ng/directive/ngController.js b/src/ng/directive/ngController.js index 289ee034..47b233f9 100644 --- a/src/ng/directive/ngController.js +++ b/src/ng/directive/ngController.js @@ -15,7 +15,7 @@ * * Controller — The `ngController` directive specifies a Controller class; the class has * methods that typically express the business logic behind the application. * - * Note that an alternative way to define controllers is via the {@link ng.$route $route} service. + * Note that an alternative way to define controllers is via the {@link ngRoute.$route $route} service. * * @element ANY * @scope diff --git a/src/ng/directive/ngView.js b/src/ng/directive/ngView.js deleted file mode 100644 index 9b5694dd..00000000 --- a/src/ng/directive/ngView.js +++ /dev/null @@ -1,226 +0,0 @@ -'use strict'; - -/** - * @ngdoc directive - * @name ng.directive:ngView - * @restrict ECA - * - * @description - * # Overview - * `ngView` is a directive that complements the {@link ng.$route $route} service by - * including the rendered template of the current route into the main layout (`index.html`) file. - * Every time the current route changes, the included view changes with it according to the - * configuration of the `$route` service. - * - * Additionally, you can also provide animations via the ngAnimate attribute to animate the **enter** - * and **leave** effects. - * - * @animations - * enter - happens just after the ngView contents are changed (when the new view DOM element is inserted into the DOM) - * leave - happens just after the current ngView contents change and just before the former contents are removed from the DOM - * - * @scope - * @example - - -
- Choose: - Moby | - Moby: Ch1 | - Gatsby | - Gatsby: Ch4 | - Scarlet Letter
- -
-
- - 
$location.path() = {{main.$location.path()}}
- 
$route.current.templateUrl = {{main.$route.current.templateUrl}}
- 
$route.current.params = {{main.$route.current.params}}
- 
$route.current.scope.name = {{main.$route.current.scope.name}}
- 
$routeParams = {{main.$routeParams}}
-
- - - -
- controller: {{book.name}}
- Book Id: {{book.params.bookId}}
-
- - - -
- controller: {{chapter.name}}
- Book Id: {{chapter.params.bookId}}
- Chapter Id: {{chapter.params.chapterId}} -
- - - - .example-leave, .example-enter { - -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; - -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; - -ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; - -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; - transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; - } - - .example-animate-container { - position:relative; - height:100px; - } - - .example-animate-container > * { - display:block; - width:100%; - border-left:1px solid black; - - position:absolute; - top:0; - left:0; - right:0; - bottom:0; - padding:10px; - } - - .example-enter { - left:100%; - } - .example-enter.example-enter-active { - left:0; - } - - .example-leave { } - .example-leave.example-leave-active { - left:-100%; - } - - - - angular.module('ngView', [], function($routeProvider, $locationProvider) { - $routeProvider.when('/Book/:bookId', { - templateUrl: 'book.html', - controller: BookCntl, - controllerAs: 'book' - }); - $routeProvider.when('/Book/:bookId/ch/:chapterId', { - templateUrl: 'chapter.html', - controller: ChapterCntl, - controllerAs: 'chapter' - }); - - // configure html5 to get links working on jsfiddle - $locationProvider.html5Mode(true); - }); - - function MainCntl($route, $routeParams, $location) { - this.$route = $route; - this.$location = $location; - this.$routeParams = $routeParams; - } - - function BookCntl($routeParams) { - this.name = "BookCntl"; - this.params = $routeParams; - } - - function ChapterCntl($routeParams) { - this.name = "ChapterCntl"; - this.params = $routeParams; - } - - - - 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/); - }); - - - */ - - -/** - * @ngdoc event - * @name ng.directive:ngView#$viewContentLoaded - * @eventOf ng.directive:ngView - * @eventType emit on the current ngView scope - * @description - * Emitted every time the ngView content is reloaded. - */ -var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$compile', - '$controller', '$animator', - function($http, $templateCache, $route, $anchorScroll, $compile, - $controller, $animator) { - return { - restrict: 'ECA', - terminal: true, - link: function(scope, element, attr) { - var lastScope, - onloadExp = attr.onload || '', - animate = $animator(scope, attr); - - scope.$on('$routeChangeSuccess', update); - update(); - - - function destroyLastScope() { - if (lastScope) { - lastScope.$destroy(); - lastScope = null; - } - } - - function clearContent() { - animate.leave(element.contents(), element); - destroyLastScope(); - } - - function update() { - var locals = $route.current && $route.current.locals, - template = locals && locals.$template; - - if (template) { - clearContent(); - var enterElements = jqLite('
').html(template).contents(); - animate.enter(enterElements, element); - - var link = $compile(enterElements), - current = $route.current, - controller; - - lastScope = current.scope = scope.$new(); - if (current.controller) { - locals.$scope = lastScope; - controller = $controller(current.controller, locals); - if (current.controllerAs) { - lastScope[current.controllerAs] = controller; - } - element.children().data('$ngControllerController', controller); - } - - link(lastScope); - lastScope.$emit('$viewContentLoaded'); - lastScope.$eval(onloadExp); - - // $anchorScroll might listen on event... - $anchorScroll(); - } else { - clearContent(); - } - } - } - }; -}]; -- cgit v1.2.3