From 4d01e9f008c6cc34b9ce772ec527af78b6d4eacc Mon Sep 17 00:00:00 2001 From: Hannah Howard Date: Sun, 8 Mar 2015 18:06:30 -0700 Subject: [PATCH 1/5] add ability to customize template by setting property on controller constructor --- dist/router.es5.js | 118 ++++++++++++++++++++++--------- dist/router.js | 54 ++++++++++---- test/router-viewport.es5.spec.js | 36 +++++++++- 3 files changed, 157 insertions(+), 51 deletions(-) diff --git a/dist/router.es5.js b/dist/router.es5.js index e3dd9ae..eb8781d 100644 --- a/dist/router.es5.js +++ b/dist/router.es5.js @@ -8,7 +8,8 @@ angular.module('ngNewRouter', ['ngNewRouter.generated']). provider('$componentLoader', $componentLoaderProvider). directive('ngViewport', ngViewportDirective). directive('ngViewport', ngViewportFillContentDirective). - directive('ngLink', ngLinkDirective); + directive('ngLink', ngLinkDirective). + directive('a', anchorLinkDirective); @@ -86,10 +87,8 @@ function ngViewportDirective($animate, $compile, $controller, $templateRequest, } } - function getComponentFromInstruction(instruction) { - var component = instruction[0].handler.component; - var componentName = typeof component === 'string' ? component : component[viewportName]; - return $componentLoader(componentName); + function getComponentName(instruction) { + return instruction[0].handler.components[viewportName]; } router.registerViewport({ canDeactivate: function (instruction) { @@ -100,9 +99,8 @@ function ngViewportDirective($animate, $compile, $controller, $templateRequest, return JSON.stringify(instruction) === previousInstruction; }, instantiate: function (instruction) { - var controllerName = getComponentFromInstruction(instruction).controllerName; - var component = instruction[0].handler.component; - var componentName = typeof component === 'string' ? component : component[viewportName]; + var componentName = getComponentName(instruction); + var controllerName = $componentLoader(componentName).controllerName; // build up locals for controller newScope = scope.$new(); @@ -127,14 +125,25 @@ function ngViewportDirective($animate, $compile, $controller, $templateRequest, return !ctrl || !ctrl.canActivate || ctrl.canActivate(instruction); }, load: function (instruction) { - var componentTemplateUrl = getComponentFromInstruction(instruction).template; - return $templateRequest(componentTemplateUrl).then(function(templateHtml) { + var componentTemplateUrl, $template; + if (ctrl.constructor.$template) { + $template = ctrl.constructor.$template + if ($template.inline) { + myCtrl.$$template = $template.inline; + return; + } else { + componentTemplateUrl = $template.url; + } + } else { + componentTemplateUrl = $componentLoader(getComponentName(instruction)).template; + } + $templateRequest(componentTemplateUrl).then(function(templateHtml) { myCtrl.$$template = templateHtml; }); + return }, activate: function (instruction) { - var component = instruction[0].handler.component; - var componentName = typeof component === 'string' ? component : component[viewportName]; + var componentName = getComponentName(instruction); var clone = $transclude(newScope, function(clone) { $animate.enter(clone, null, currentElement || $element); @@ -206,15 +215,6 @@ var LINK_MICROSYNTAX_RE = /^(.+?)(?:\((.*)\))?$/; function ngLinkDirective($router, $location, $parse) { var rootRouter = $router; - angular.element(document.body).on('click', function (ev) { - var target = ev.target; - if (target.attributes['ng-link']) { - ev.preventDefault(); - var url = target.attributes.href.value; - rootRouter.navigate(url); - } - }); - return { require: '?^^ngViewport', restrict: 'A', @@ -257,6 +257,32 @@ function ngLinkDirective($router, $location, $parse) { ngLinkDirective.$inject = ["$router", "$location", "$parse"]; +function anchorLinkDirective($router) { + return { + restrict: 'E', + link: function(scope, element) { + // If the linked element is not an anchor tag anymore, do nothing + if (element[0].nodeName.toLowerCase() !== 'a') return; + + // SVGAElement does not use the href attribute, but rather the 'xlinkHref' attribute. + var hrefAttrName = toString.call(element.prop('href')) === '[object SVGAnimatedString]' ? + 'xlink:href' : 'href'; + + element.on('click', function(event) { + var href = element.attr(hrefAttrName); + if (!href) { + event.preventDefault(); + } + if ($router.recognize(href)) { + $router.navigate(href); + event.preventDefault(); + } + }); + } + } +} +anchorLinkDirective.$inject = ["$router"]; + /** * @name $componentLoaderProvider * @description @@ -940,19 +966,38 @@ function getDescriptors(object) { return this.renavigate(); }, configOne: function(mapping) { + var $__0 = this; if (mapping.redirectTo) { this.rewrites[mapping.path] = mapping.redirectTo; return; } - var component = mapping.component; - if (typeof component === 'string') { - mapping.handler = {component: component}; - } else if (typeof component === 'function') { - mapping.handler = component(); - } else if (!mapping.handler) { - mapping.handler = {component: component}; + if (mapping.component) { + if (mapping.components) { + throw new Error('A route config should have either a "component" or "components" property, but not both.'); + } + mapping.components = mapping.component; + delete mapping.component; + } + if (typeof mapping.components === 'string') { + mapping.components = {default: mapping.components}; + } + var aliases; + if (mapping.as) { + aliases = [mapping.as]; + } else { + aliases = mapObj(mapping.components, (function(componentName, viewportName) { + return viewportName + ':' + componentName; + })); + if (mapping.components.default) { + aliases.push(mapping.components.default); + } } - this.recognizer.add([mapping], {as: component}); + aliases.forEach((function(alias) { + return $__0.recognizer.add([{ + path: mapping.path, + handler: mapping + }], {as: alias}); + })); var withChild = copy(mapping); withChild.path += CHILD_ROUTE_SUFFIX; this.recognizer.add([{ @@ -962,16 +1007,13 @@ function getDescriptors(object) { }, navigate: function(url) { var $__0 = this; - if (url[0] === '.') { - url = url.substr(1); - } var self = this; if (this.navigating) { return $q.when(); } url = this.getCanonicalUrl(url); this.lastNavigationAttempt = url; - var context = this.recognizer.recognize(url); + var context = this.recognize(url); var segment = url; if (notMatched(context)) { return $q.when(); @@ -991,7 +1033,6 @@ function getDescriptors(object) { this.context = context[0]; this.fullContext = context; this.navigating = true; - context.component = this.context.handler.component; return this.canNavigate(context).then((function(status) { return (status && $__0.activatePorts(context)); })).then(finishNavigating, cancelNavigating); @@ -1011,7 +1052,14 @@ function getDescriptors(object) { self.navigating = false; } }, + recognize: function(url) { + url = this.getCanonicalUrl(url); + return this.recognizer.recognize(url); + }, getCanonicalUrl: function(url) { + if (url[0] === '.') { + url = url.substr(1); + } forEach(this.rewrites, function(toUrl, fromUrl) { if (fromUrl === '/') { if (url === '/') { @@ -1132,4 +1180,4 @@ function getDescriptors(object) { return value ? $q.when(value) : $q.reject(); } -return new Router();}]); \ No newline at end of file +return new Router();}]); diff --git a/dist/router.js b/dist/router.js index 5df7396..62d6350 100644 --- a/dist/router.js +++ b/dist/router.js @@ -43,19 +43,38 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { return this.renavigate(); }, configOne: function(mapping) { + var $__4 = this; if (mapping.redirectTo) { this.rewrites[mapping.path] = mapping.redirectTo; return; } - var component = mapping.component; - if (typeof component === 'string') { - mapping.handler = {component: component}; - } else if (typeof component === 'function') { - mapping.handler = component(); - } else if (!mapping.handler) { - mapping.handler = {component: component}; + if (mapping.component) { + if (mapping.components) { + throw new Error('A route config should have either a "component" or "components" property, but not both.'); + } + mapping.components = mapping.component; + delete mapping.component; + } + if (typeof mapping.components === 'string') { + mapping.components = {default: mapping.components}; + } + var aliases; + if (mapping.as) { + aliases = [mapping.as]; + } else { + aliases = mapObj(mapping.components, (function(componentName, viewportName) { + return viewportName + ':' + componentName; + })); + if (mapping.components.default) { + aliases.push(mapping.components.default); + } } - this.recognizer.add([mapping], {as: component}); + aliases.forEach((function(alias) { + return $__4.recognizer.add([{ + path: mapping.path, + handler: mapping + }], {as: alias}); + })); var withChild = copy(mapping); withChild.path += CHILD_ROUTE_SUFFIX; this.recognizer.add([{ @@ -65,16 +84,13 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { }, navigate: function(url) { var $__4 = this; - if (url[0] === '.') { - url = url.substr(1); - } var self = this; if (this.navigating) { return Promise.resolve(); } url = this.getCanonicalUrl(url); this.lastNavigationAttempt = url; - var context = this.recognizer.recognize(url); + var context = this.recognize(url); var segment = url; if (notMatched(context)) { return Promise.resolve(); @@ -94,7 +110,6 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { this.context = context[0]; this.fullContext = context; this.navigating = true; - context.component = this.context.handler.component; return this.canNavigate(context).then((function(status) { return (status && $__4.activatePorts(context)); })).then(finishNavigating, cancelNavigating); @@ -114,7 +129,14 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { self.navigating = false; } }, + recognize: function(url) { + url = this.getCanonicalUrl(url); + return this.recognizer.recognize(url); + }, getCanonicalUrl: function(url) { + if (url[0] === '.') { + url = url.substr(1); + } forEach(this.rewrites, function(toUrl, fromUrl) { if (fromUrl === '/') { if (url === '/') { @@ -206,7 +228,9 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { return Promise.all(allViewportQueries).then(booleanReduction).then(boolToPromise); } }, {}); - Router.prototype.generate.parameters = [[$traceurRuntime.type.string], []]; + Object.defineProperty(Router.prototype.generate, "parameters", {get: function() { + return [[$traceurRuntime.type.string], []]; + }}); function copy(obj) { return JSON.parse(JSON.stringify(obj)); } @@ -240,3 +264,5 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { __esModule: true }; }); + +//# sourceMappingURL=router.ats diff --git a/test/router-viewport.es5.spec.js b/test/router-viewport.es5.spec.js index a2bbbeb..a718296 100644 --- a/test/router-viewport.es5.spec.js +++ b/test/router-viewport.es5.spec.js @@ -26,10 +26,10 @@ describe('ngViewport', function () { }); put('one', '
{{number}}
'); - $controllerProvider.register('OneController', boringController('number', 'one')); + $controllerProvider.register('OneController', boringController('number', 'one', 'one')); put('two', '
{{number}}
'); - $controllerProvider.register('TwoController', boringController('number', 'two')); + $controllerProvider.register('TwoController', boringController('number', 'two', 'two')); }); @@ -273,6 +273,38 @@ describe('ngViewport', function () { expect(elt.text()).toBe('hi'); })); + it('should load a seperate template when a controller has a $template property', inject(function ($router) { + $templateCache.put('NonStandardDirectory/aNonStandardName.html', [200, 'hi', {}]); + $controllerProvider.register('TemplateController', TemplateController); + function TemplateController() {} + TemplateController.$template = { + url: 'NonStandardDirectory/aNonStandardName.html' + } + $router.config([ + { path: '/t', component: 'template' } + ]); + compile('
'); + + $router.navigate('/t'); + $rootScope.$digest(); + expect(elt.text()).toBe('hi'); + })); + + it('should load a seperate template when a controller has a $template property', inject(function ($router) { + $controllerProvider.register('InlineTemplateController', InlineTemplateController); + function InlineTemplateController() {} + InlineTemplateController.$template = { + inline: 'hi' + } + $router.config([ + { path: '/t', component: 'inlineTemplate' } + ]); + compile('
'); + + $router.navigate('/t'); + $rootScope.$digest(); + expect(elt.text()).toBe('hi'); + })); it('should change location path', inject(function ($router, $location) { From ad5c32be795ea7985c2737717d6431b4f6ead51e Mon Sep 17 00:00:00 2001 From: Hannah Howard Date: Mon, 9 Mar 2015 16:35:56 -0700 Subject: [PATCH 2/5] put back in old dist dir --- dist/router.es5.js | 118 ++++++++++++++------------------------------- dist/router.js | 54 ++++++--------------- 2 files changed, 49 insertions(+), 123 deletions(-) diff --git a/dist/router.es5.js b/dist/router.es5.js index eb8781d..e3dd9ae 100644 --- a/dist/router.es5.js +++ b/dist/router.es5.js @@ -8,8 +8,7 @@ angular.module('ngNewRouter', ['ngNewRouter.generated']). provider('$componentLoader', $componentLoaderProvider). directive('ngViewport', ngViewportDirective). directive('ngViewport', ngViewportFillContentDirective). - directive('ngLink', ngLinkDirective). - directive('a', anchorLinkDirective); + directive('ngLink', ngLinkDirective); @@ -87,8 +86,10 @@ function ngViewportDirective($animate, $compile, $controller, $templateRequest, } } - function getComponentName(instruction) { - return instruction[0].handler.components[viewportName]; + function getComponentFromInstruction(instruction) { + var component = instruction[0].handler.component; + var componentName = typeof component === 'string' ? component : component[viewportName]; + return $componentLoader(componentName); } router.registerViewport({ canDeactivate: function (instruction) { @@ -99,8 +100,9 @@ function ngViewportDirective($animate, $compile, $controller, $templateRequest, return JSON.stringify(instruction) === previousInstruction; }, instantiate: function (instruction) { - var componentName = getComponentName(instruction); - var controllerName = $componentLoader(componentName).controllerName; + var controllerName = getComponentFromInstruction(instruction).controllerName; + var component = instruction[0].handler.component; + var componentName = typeof component === 'string' ? component : component[viewportName]; // build up locals for controller newScope = scope.$new(); @@ -125,25 +127,14 @@ function ngViewportDirective($animate, $compile, $controller, $templateRequest, return !ctrl || !ctrl.canActivate || ctrl.canActivate(instruction); }, load: function (instruction) { - var componentTemplateUrl, $template; - if (ctrl.constructor.$template) { - $template = ctrl.constructor.$template - if ($template.inline) { - myCtrl.$$template = $template.inline; - return; - } else { - componentTemplateUrl = $template.url; - } - } else { - componentTemplateUrl = $componentLoader(getComponentName(instruction)).template; - } - $templateRequest(componentTemplateUrl).then(function(templateHtml) { + var componentTemplateUrl = getComponentFromInstruction(instruction).template; + return $templateRequest(componentTemplateUrl).then(function(templateHtml) { myCtrl.$$template = templateHtml; }); - return }, activate: function (instruction) { - var componentName = getComponentName(instruction); + var component = instruction[0].handler.component; + var componentName = typeof component === 'string' ? component : component[viewportName]; var clone = $transclude(newScope, function(clone) { $animate.enter(clone, null, currentElement || $element); @@ -215,6 +206,15 @@ var LINK_MICROSYNTAX_RE = /^(.+?)(?:\((.*)\))?$/; function ngLinkDirective($router, $location, $parse) { var rootRouter = $router; + angular.element(document.body).on('click', function (ev) { + var target = ev.target; + if (target.attributes['ng-link']) { + ev.preventDefault(); + var url = target.attributes.href.value; + rootRouter.navigate(url); + } + }); + return { require: '?^^ngViewport', restrict: 'A', @@ -257,32 +257,6 @@ function ngLinkDirective($router, $location, $parse) { ngLinkDirective.$inject = ["$router", "$location", "$parse"]; -function anchorLinkDirective($router) { - return { - restrict: 'E', - link: function(scope, element) { - // If the linked element is not an anchor tag anymore, do nothing - if (element[0].nodeName.toLowerCase() !== 'a') return; - - // SVGAElement does not use the href attribute, but rather the 'xlinkHref' attribute. - var hrefAttrName = toString.call(element.prop('href')) === '[object SVGAnimatedString]' ? - 'xlink:href' : 'href'; - - element.on('click', function(event) { - var href = element.attr(hrefAttrName); - if (!href) { - event.preventDefault(); - } - if ($router.recognize(href)) { - $router.navigate(href); - event.preventDefault(); - } - }); - } - } -} -anchorLinkDirective.$inject = ["$router"]; - /** * @name $componentLoaderProvider * @description @@ -966,38 +940,19 @@ function getDescriptors(object) { return this.renavigate(); }, configOne: function(mapping) { - var $__0 = this; if (mapping.redirectTo) { this.rewrites[mapping.path] = mapping.redirectTo; return; } - if (mapping.component) { - if (mapping.components) { - throw new Error('A route config should have either a "component" or "components" property, but not both.'); - } - mapping.components = mapping.component; - delete mapping.component; - } - if (typeof mapping.components === 'string') { - mapping.components = {default: mapping.components}; - } - var aliases; - if (mapping.as) { - aliases = [mapping.as]; - } else { - aliases = mapObj(mapping.components, (function(componentName, viewportName) { - return viewportName + ':' + componentName; - })); - if (mapping.components.default) { - aliases.push(mapping.components.default); - } + var component = mapping.component; + if (typeof component === 'string') { + mapping.handler = {component: component}; + } else if (typeof component === 'function') { + mapping.handler = component(); + } else if (!mapping.handler) { + mapping.handler = {component: component}; } - aliases.forEach((function(alias) { - return $__0.recognizer.add([{ - path: mapping.path, - handler: mapping - }], {as: alias}); - })); + this.recognizer.add([mapping], {as: component}); var withChild = copy(mapping); withChild.path += CHILD_ROUTE_SUFFIX; this.recognizer.add([{ @@ -1007,13 +962,16 @@ function getDescriptors(object) { }, navigate: function(url) { var $__0 = this; + if (url[0] === '.') { + url = url.substr(1); + } var self = this; if (this.navigating) { return $q.when(); } url = this.getCanonicalUrl(url); this.lastNavigationAttempt = url; - var context = this.recognize(url); + var context = this.recognizer.recognize(url); var segment = url; if (notMatched(context)) { return $q.when(); @@ -1033,6 +991,7 @@ function getDescriptors(object) { this.context = context[0]; this.fullContext = context; this.navigating = true; + context.component = this.context.handler.component; return this.canNavigate(context).then((function(status) { return (status && $__0.activatePorts(context)); })).then(finishNavigating, cancelNavigating); @@ -1052,14 +1011,7 @@ function getDescriptors(object) { self.navigating = false; } }, - recognize: function(url) { - url = this.getCanonicalUrl(url); - return this.recognizer.recognize(url); - }, getCanonicalUrl: function(url) { - if (url[0] === '.') { - url = url.substr(1); - } forEach(this.rewrites, function(toUrl, fromUrl) { if (fromUrl === '/') { if (url === '/') { @@ -1180,4 +1132,4 @@ function getDescriptors(object) { return value ? $q.when(value) : $q.reject(); } -return new Router();}]); +return new Router();}]); \ No newline at end of file diff --git a/dist/router.js b/dist/router.js index 62d6350..5df7396 100644 --- a/dist/router.js +++ b/dist/router.js @@ -43,38 +43,19 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { return this.renavigate(); }, configOne: function(mapping) { - var $__4 = this; if (mapping.redirectTo) { this.rewrites[mapping.path] = mapping.redirectTo; return; } - if (mapping.component) { - if (mapping.components) { - throw new Error('A route config should have either a "component" or "components" property, but not both.'); - } - mapping.components = mapping.component; - delete mapping.component; - } - if (typeof mapping.components === 'string') { - mapping.components = {default: mapping.components}; - } - var aliases; - if (mapping.as) { - aliases = [mapping.as]; - } else { - aliases = mapObj(mapping.components, (function(componentName, viewportName) { - return viewportName + ':' + componentName; - })); - if (mapping.components.default) { - aliases.push(mapping.components.default); - } + var component = mapping.component; + if (typeof component === 'string') { + mapping.handler = {component: component}; + } else if (typeof component === 'function') { + mapping.handler = component(); + } else if (!mapping.handler) { + mapping.handler = {component: component}; } - aliases.forEach((function(alias) { - return $__4.recognizer.add([{ - path: mapping.path, - handler: mapping - }], {as: alias}); - })); + this.recognizer.add([mapping], {as: component}); var withChild = copy(mapping); withChild.path += CHILD_ROUTE_SUFFIX; this.recognizer.add([{ @@ -84,13 +65,16 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { }, navigate: function(url) { var $__4 = this; + if (url[0] === '.') { + url = url.substr(1); + } var self = this; if (this.navigating) { return Promise.resolve(); } url = this.getCanonicalUrl(url); this.lastNavigationAttempt = url; - var context = this.recognize(url); + var context = this.recognizer.recognize(url); var segment = url; if (notMatched(context)) { return Promise.resolve(); @@ -110,6 +94,7 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { this.context = context[0]; this.fullContext = context; this.navigating = true; + context.component = this.context.handler.component; return this.canNavigate(context).then((function(status) { return (status && $__4.activatePorts(context)); })).then(finishNavigating, cancelNavigating); @@ -129,14 +114,7 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { self.navigating = false; } }, - recognize: function(url) { - url = this.getCanonicalUrl(url); - return this.recognizer.recognize(url); - }, getCanonicalUrl: function(url) { - if (url[0] === '.') { - url = url.substr(1); - } forEach(this.rewrites, function(toUrl, fromUrl) { if (fromUrl === '/') { if (url === '/') { @@ -228,9 +206,7 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { return Promise.all(allViewportQueries).then(booleanReduction).then(boolToPromise); } }, {}); - Object.defineProperty(Router.prototype.generate, "parameters", {get: function() { - return [[$traceurRuntime.type.string], []]; - }}); + Router.prototype.generate.parameters = [[$traceurRuntime.type.string], []]; function copy(obj) { return JSON.parse(JSON.stringify(obj)); } @@ -264,5 +240,3 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { __esModule: true }; }); - -//# sourceMappingURL=router.ats From bea8c19f9550347662dbeddfbbb351bfd1c96a07 Mon Sep 17 00:00:00 2001 From: Hannah Howard Date: Mon, 9 Mar 2015 16:39:03 -0700 Subject: [PATCH 3/5] Fix src commit --- dist/router.es5.js | 118 +++++++++++++++++++++++++----------- dist/router.js | 54 ++++++++++++----- src/router-directive.es5.js | 16 ++++- 3 files changed, 137 insertions(+), 51 deletions(-) diff --git a/dist/router.es5.js b/dist/router.es5.js index e3dd9ae..eb8781d 100644 --- a/dist/router.es5.js +++ b/dist/router.es5.js @@ -8,7 +8,8 @@ angular.module('ngNewRouter', ['ngNewRouter.generated']). provider('$componentLoader', $componentLoaderProvider). directive('ngViewport', ngViewportDirective). directive('ngViewport', ngViewportFillContentDirective). - directive('ngLink', ngLinkDirective); + directive('ngLink', ngLinkDirective). + directive('a', anchorLinkDirective); @@ -86,10 +87,8 @@ function ngViewportDirective($animate, $compile, $controller, $templateRequest, } } - function getComponentFromInstruction(instruction) { - var component = instruction[0].handler.component; - var componentName = typeof component === 'string' ? component : component[viewportName]; - return $componentLoader(componentName); + function getComponentName(instruction) { + return instruction[0].handler.components[viewportName]; } router.registerViewport({ canDeactivate: function (instruction) { @@ -100,9 +99,8 @@ function ngViewportDirective($animate, $compile, $controller, $templateRequest, return JSON.stringify(instruction) === previousInstruction; }, instantiate: function (instruction) { - var controllerName = getComponentFromInstruction(instruction).controllerName; - var component = instruction[0].handler.component; - var componentName = typeof component === 'string' ? component : component[viewportName]; + var componentName = getComponentName(instruction); + var controllerName = $componentLoader(componentName).controllerName; // build up locals for controller newScope = scope.$new(); @@ -127,14 +125,25 @@ function ngViewportDirective($animate, $compile, $controller, $templateRequest, return !ctrl || !ctrl.canActivate || ctrl.canActivate(instruction); }, load: function (instruction) { - var componentTemplateUrl = getComponentFromInstruction(instruction).template; - return $templateRequest(componentTemplateUrl).then(function(templateHtml) { + var componentTemplateUrl, $template; + if (ctrl.constructor.$template) { + $template = ctrl.constructor.$template + if ($template.inline) { + myCtrl.$$template = $template.inline; + return; + } else { + componentTemplateUrl = $template.url; + } + } else { + componentTemplateUrl = $componentLoader(getComponentName(instruction)).template; + } + $templateRequest(componentTemplateUrl).then(function(templateHtml) { myCtrl.$$template = templateHtml; }); + return }, activate: function (instruction) { - var component = instruction[0].handler.component; - var componentName = typeof component === 'string' ? component : component[viewportName]; + var componentName = getComponentName(instruction); var clone = $transclude(newScope, function(clone) { $animate.enter(clone, null, currentElement || $element); @@ -206,15 +215,6 @@ var LINK_MICROSYNTAX_RE = /^(.+?)(?:\((.*)\))?$/; function ngLinkDirective($router, $location, $parse) { var rootRouter = $router; - angular.element(document.body).on('click', function (ev) { - var target = ev.target; - if (target.attributes['ng-link']) { - ev.preventDefault(); - var url = target.attributes.href.value; - rootRouter.navigate(url); - } - }); - return { require: '?^^ngViewport', restrict: 'A', @@ -257,6 +257,32 @@ function ngLinkDirective($router, $location, $parse) { ngLinkDirective.$inject = ["$router", "$location", "$parse"]; +function anchorLinkDirective($router) { + return { + restrict: 'E', + link: function(scope, element) { + // If the linked element is not an anchor tag anymore, do nothing + if (element[0].nodeName.toLowerCase() !== 'a') return; + + // SVGAElement does not use the href attribute, but rather the 'xlinkHref' attribute. + var hrefAttrName = toString.call(element.prop('href')) === '[object SVGAnimatedString]' ? + 'xlink:href' : 'href'; + + element.on('click', function(event) { + var href = element.attr(hrefAttrName); + if (!href) { + event.preventDefault(); + } + if ($router.recognize(href)) { + $router.navigate(href); + event.preventDefault(); + } + }); + } + } +} +anchorLinkDirective.$inject = ["$router"]; + /** * @name $componentLoaderProvider * @description @@ -940,19 +966,38 @@ function getDescriptors(object) { return this.renavigate(); }, configOne: function(mapping) { + var $__0 = this; if (mapping.redirectTo) { this.rewrites[mapping.path] = mapping.redirectTo; return; } - var component = mapping.component; - if (typeof component === 'string') { - mapping.handler = {component: component}; - } else if (typeof component === 'function') { - mapping.handler = component(); - } else if (!mapping.handler) { - mapping.handler = {component: component}; + if (mapping.component) { + if (mapping.components) { + throw new Error('A route config should have either a "component" or "components" property, but not both.'); + } + mapping.components = mapping.component; + delete mapping.component; + } + if (typeof mapping.components === 'string') { + mapping.components = {default: mapping.components}; + } + var aliases; + if (mapping.as) { + aliases = [mapping.as]; + } else { + aliases = mapObj(mapping.components, (function(componentName, viewportName) { + return viewportName + ':' + componentName; + })); + if (mapping.components.default) { + aliases.push(mapping.components.default); + } } - this.recognizer.add([mapping], {as: component}); + aliases.forEach((function(alias) { + return $__0.recognizer.add([{ + path: mapping.path, + handler: mapping + }], {as: alias}); + })); var withChild = copy(mapping); withChild.path += CHILD_ROUTE_SUFFIX; this.recognizer.add([{ @@ -962,16 +1007,13 @@ function getDescriptors(object) { }, navigate: function(url) { var $__0 = this; - if (url[0] === '.') { - url = url.substr(1); - } var self = this; if (this.navigating) { return $q.when(); } url = this.getCanonicalUrl(url); this.lastNavigationAttempt = url; - var context = this.recognizer.recognize(url); + var context = this.recognize(url); var segment = url; if (notMatched(context)) { return $q.when(); @@ -991,7 +1033,6 @@ function getDescriptors(object) { this.context = context[0]; this.fullContext = context; this.navigating = true; - context.component = this.context.handler.component; return this.canNavigate(context).then((function(status) { return (status && $__0.activatePorts(context)); })).then(finishNavigating, cancelNavigating); @@ -1011,7 +1052,14 @@ function getDescriptors(object) { self.navigating = false; } }, + recognize: function(url) { + url = this.getCanonicalUrl(url); + return this.recognizer.recognize(url); + }, getCanonicalUrl: function(url) { + if (url[0] === '.') { + url = url.substr(1); + } forEach(this.rewrites, function(toUrl, fromUrl) { if (fromUrl === '/') { if (url === '/') { @@ -1132,4 +1180,4 @@ function getDescriptors(object) { return value ? $q.when(value) : $q.reject(); } -return new Router();}]); \ No newline at end of file +return new Router();}]); diff --git a/dist/router.js b/dist/router.js index 5df7396..62d6350 100644 --- a/dist/router.js +++ b/dist/router.js @@ -43,19 +43,38 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { return this.renavigate(); }, configOne: function(mapping) { + var $__4 = this; if (mapping.redirectTo) { this.rewrites[mapping.path] = mapping.redirectTo; return; } - var component = mapping.component; - if (typeof component === 'string') { - mapping.handler = {component: component}; - } else if (typeof component === 'function') { - mapping.handler = component(); - } else if (!mapping.handler) { - mapping.handler = {component: component}; + if (mapping.component) { + if (mapping.components) { + throw new Error('A route config should have either a "component" or "components" property, but not both.'); + } + mapping.components = mapping.component; + delete mapping.component; + } + if (typeof mapping.components === 'string') { + mapping.components = {default: mapping.components}; + } + var aliases; + if (mapping.as) { + aliases = [mapping.as]; + } else { + aliases = mapObj(mapping.components, (function(componentName, viewportName) { + return viewportName + ':' + componentName; + })); + if (mapping.components.default) { + aliases.push(mapping.components.default); + } } - this.recognizer.add([mapping], {as: component}); + aliases.forEach((function(alias) { + return $__4.recognizer.add([{ + path: mapping.path, + handler: mapping + }], {as: alias}); + })); var withChild = copy(mapping); withChild.path += CHILD_ROUTE_SUFFIX; this.recognizer.add([{ @@ -65,16 +84,13 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { }, navigate: function(url) { var $__4 = this; - if (url[0] === '.') { - url = url.substr(1); - } var self = this; if (this.navigating) { return Promise.resolve(); } url = this.getCanonicalUrl(url); this.lastNavigationAttempt = url; - var context = this.recognizer.recognize(url); + var context = this.recognize(url); var segment = url; if (notMatched(context)) { return Promise.resolve(); @@ -94,7 +110,6 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { this.context = context[0]; this.fullContext = context; this.navigating = true; - context.component = this.context.handler.component; return this.canNavigate(context).then((function(status) { return (status && $__4.activatePorts(context)); })).then(finishNavigating, cancelNavigating); @@ -114,7 +129,14 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { self.navigating = false; } }, + recognize: function(url) { + url = this.getCanonicalUrl(url); + return this.recognizer.recognize(url); + }, getCanonicalUrl: function(url) { + if (url[0] === '.') { + url = url.substr(1); + } forEach(this.rewrites, function(toUrl, fromUrl) { if (fromUrl === '/') { if (url === '/') { @@ -206,7 +228,9 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { return Promise.all(allViewportQueries).then(booleanReduction).then(boolToPromise); } }, {}); - Router.prototype.generate.parameters = [[$traceurRuntime.type.string], []]; + Object.defineProperty(Router.prototype.generate, "parameters", {get: function() { + return [[$traceurRuntime.type.string], []]; + }}); function copy(obj) { return JSON.parse(JSON.stringify(obj)); } @@ -240,3 +264,5 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { __esModule: true }; }); + +//# sourceMappingURL=router.ats diff --git a/src/router-directive.es5.js b/src/router-directive.es5.js index c19f120..7e8da96 100644 --- a/src/router-directive.es5.js +++ b/src/router-directive.es5.js @@ -125,10 +125,22 @@ function ngViewportDirective($animate, $compile, $controller, $templateRequest, return !ctrl || !ctrl.canActivate || ctrl.canActivate(instruction); }, load: function (instruction) { - var componentTemplateUrl = $componentLoader(getComponentName(instruction)).template; - return $templateRequest(componentTemplateUrl).then(function(templateHtml) { + var componentTemplateUrl, $template; + if (ctrl.constructor.$template) { + $template = ctrl.constructor.$template + if ($template.inline) { + myCtrl.$$template = $template.inline; + return; + } else { + componentTemplateUrl = $template.url; + } + } else { + componentTemplateUrl = $componentLoader(getComponentName(instruction)).template; + } + $templateRequest(componentTemplateUrl).then(function(templateHtml) { myCtrl.$$template = templateHtml; }); + return; }, activate: function (instruction) { var componentName = getComponentName(instruction); From 2fb8f505b6cb634caf59fe1fe95f51f4b602442e Mon Sep 17 00:00:00 2001 From: Hannah Howard Date: Mon, 9 Mar 2015 16:39:38 -0700 Subject: [PATCH 4/5] put back in old dist dir --- dist/router.es5.js | 118 ++++++++++++++------------------------------- dist/router.js | 54 ++++++--------------- 2 files changed, 49 insertions(+), 123 deletions(-) diff --git a/dist/router.es5.js b/dist/router.es5.js index eb8781d..e3dd9ae 100644 --- a/dist/router.es5.js +++ b/dist/router.es5.js @@ -8,8 +8,7 @@ angular.module('ngNewRouter', ['ngNewRouter.generated']). provider('$componentLoader', $componentLoaderProvider). directive('ngViewport', ngViewportDirective). directive('ngViewport', ngViewportFillContentDirective). - directive('ngLink', ngLinkDirective). - directive('a', anchorLinkDirective); + directive('ngLink', ngLinkDirective); @@ -87,8 +86,10 @@ function ngViewportDirective($animate, $compile, $controller, $templateRequest, } } - function getComponentName(instruction) { - return instruction[0].handler.components[viewportName]; + function getComponentFromInstruction(instruction) { + var component = instruction[0].handler.component; + var componentName = typeof component === 'string' ? component : component[viewportName]; + return $componentLoader(componentName); } router.registerViewport({ canDeactivate: function (instruction) { @@ -99,8 +100,9 @@ function ngViewportDirective($animate, $compile, $controller, $templateRequest, return JSON.stringify(instruction) === previousInstruction; }, instantiate: function (instruction) { - var componentName = getComponentName(instruction); - var controllerName = $componentLoader(componentName).controllerName; + var controllerName = getComponentFromInstruction(instruction).controllerName; + var component = instruction[0].handler.component; + var componentName = typeof component === 'string' ? component : component[viewportName]; // build up locals for controller newScope = scope.$new(); @@ -125,25 +127,14 @@ function ngViewportDirective($animate, $compile, $controller, $templateRequest, return !ctrl || !ctrl.canActivate || ctrl.canActivate(instruction); }, load: function (instruction) { - var componentTemplateUrl, $template; - if (ctrl.constructor.$template) { - $template = ctrl.constructor.$template - if ($template.inline) { - myCtrl.$$template = $template.inline; - return; - } else { - componentTemplateUrl = $template.url; - } - } else { - componentTemplateUrl = $componentLoader(getComponentName(instruction)).template; - } - $templateRequest(componentTemplateUrl).then(function(templateHtml) { + var componentTemplateUrl = getComponentFromInstruction(instruction).template; + return $templateRequest(componentTemplateUrl).then(function(templateHtml) { myCtrl.$$template = templateHtml; }); - return }, activate: function (instruction) { - var componentName = getComponentName(instruction); + var component = instruction[0].handler.component; + var componentName = typeof component === 'string' ? component : component[viewportName]; var clone = $transclude(newScope, function(clone) { $animate.enter(clone, null, currentElement || $element); @@ -215,6 +206,15 @@ var LINK_MICROSYNTAX_RE = /^(.+?)(?:\((.*)\))?$/; function ngLinkDirective($router, $location, $parse) { var rootRouter = $router; + angular.element(document.body).on('click', function (ev) { + var target = ev.target; + if (target.attributes['ng-link']) { + ev.preventDefault(); + var url = target.attributes.href.value; + rootRouter.navigate(url); + } + }); + return { require: '?^^ngViewport', restrict: 'A', @@ -257,32 +257,6 @@ function ngLinkDirective($router, $location, $parse) { ngLinkDirective.$inject = ["$router", "$location", "$parse"]; -function anchorLinkDirective($router) { - return { - restrict: 'E', - link: function(scope, element) { - // If the linked element is not an anchor tag anymore, do nothing - if (element[0].nodeName.toLowerCase() !== 'a') return; - - // SVGAElement does not use the href attribute, but rather the 'xlinkHref' attribute. - var hrefAttrName = toString.call(element.prop('href')) === '[object SVGAnimatedString]' ? - 'xlink:href' : 'href'; - - element.on('click', function(event) { - var href = element.attr(hrefAttrName); - if (!href) { - event.preventDefault(); - } - if ($router.recognize(href)) { - $router.navigate(href); - event.preventDefault(); - } - }); - } - } -} -anchorLinkDirective.$inject = ["$router"]; - /** * @name $componentLoaderProvider * @description @@ -966,38 +940,19 @@ function getDescriptors(object) { return this.renavigate(); }, configOne: function(mapping) { - var $__0 = this; if (mapping.redirectTo) { this.rewrites[mapping.path] = mapping.redirectTo; return; } - if (mapping.component) { - if (mapping.components) { - throw new Error('A route config should have either a "component" or "components" property, but not both.'); - } - mapping.components = mapping.component; - delete mapping.component; - } - if (typeof mapping.components === 'string') { - mapping.components = {default: mapping.components}; - } - var aliases; - if (mapping.as) { - aliases = [mapping.as]; - } else { - aliases = mapObj(mapping.components, (function(componentName, viewportName) { - return viewportName + ':' + componentName; - })); - if (mapping.components.default) { - aliases.push(mapping.components.default); - } + var component = mapping.component; + if (typeof component === 'string') { + mapping.handler = {component: component}; + } else if (typeof component === 'function') { + mapping.handler = component(); + } else if (!mapping.handler) { + mapping.handler = {component: component}; } - aliases.forEach((function(alias) { - return $__0.recognizer.add([{ - path: mapping.path, - handler: mapping - }], {as: alias}); - })); + this.recognizer.add([mapping], {as: component}); var withChild = copy(mapping); withChild.path += CHILD_ROUTE_SUFFIX; this.recognizer.add([{ @@ -1007,13 +962,16 @@ function getDescriptors(object) { }, navigate: function(url) { var $__0 = this; + if (url[0] === '.') { + url = url.substr(1); + } var self = this; if (this.navigating) { return $q.when(); } url = this.getCanonicalUrl(url); this.lastNavigationAttempt = url; - var context = this.recognize(url); + var context = this.recognizer.recognize(url); var segment = url; if (notMatched(context)) { return $q.when(); @@ -1033,6 +991,7 @@ function getDescriptors(object) { this.context = context[0]; this.fullContext = context; this.navigating = true; + context.component = this.context.handler.component; return this.canNavigate(context).then((function(status) { return (status && $__0.activatePorts(context)); })).then(finishNavigating, cancelNavigating); @@ -1052,14 +1011,7 @@ function getDescriptors(object) { self.navigating = false; } }, - recognize: function(url) { - url = this.getCanonicalUrl(url); - return this.recognizer.recognize(url); - }, getCanonicalUrl: function(url) { - if (url[0] === '.') { - url = url.substr(1); - } forEach(this.rewrites, function(toUrl, fromUrl) { if (fromUrl === '/') { if (url === '/') { @@ -1180,4 +1132,4 @@ function getDescriptors(object) { return value ? $q.when(value) : $q.reject(); } -return new Router();}]); +return new Router();}]); \ No newline at end of file diff --git a/dist/router.js b/dist/router.js index 62d6350..5df7396 100644 --- a/dist/router.js +++ b/dist/router.js @@ -43,38 +43,19 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { return this.renavigate(); }, configOne: function(mapping) { - var $__4 = this; if (mapping.redirectTo) { this.rewrites[mapping.path] = mapping.redirectTo; return; } - if (mapping.component) { - if (mapping.components) { - throw new Error('A route config should have either a "component" or "components" property, but not both.'); - } - mapping.components = mapping.component; - delete mapping.component; - } - if (typeof mapping.components === 'string') { - mapping.components = {default: mapping.components}; - } - var aliases; - if (mapping.as) { - aliases = [mapping.as]; - } else { - aliases = mapObj(mapping.components, (function(componentName, viewportName) { - return viewportName + ':' + componentName; - })); - if (mapping.components.default) { - aliases.push(mapping.components.default); - } + var component = mapping.component; + if (typeof component === 'string') { + mapping.handler = {component: component}; + } else if (typeof component === 'function') { + mapping.handler = component(); + } else if (!mapping.handler) { + mapping.handler = {component: component}; } - aliases.forEach((function(alias) { - return $__4.recognizer.add([{ - path: mapping.path, - handler: mapping - }], {as: alias}); - })); + this.recognizer.add([mapping], {as: component}); var withChild = copy(mapping); withChild.path += CHILD_ROUTE_SUFFIX; this.recognizer.add([{ @@ -84,13 +65,16 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { }, navigate: function(url) { var $__4 = this; + if (url[0] === '.') { + url = url.substr(1); + } var self = this; if (this.navigating) { return Promise.resolve(); } url = this.getCanonicalUrl(url); this.lastNavigationAttempt = url; - var context = this.recognize(url); + var context = this.recognizer.recognize(url); var segment = url; if (notMatched(context)) { return Promise.resolve(); @@ -110,6 +94,7 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { this.context = context[0]; this.fullContext = context; this.navigating = true; + context.component = this.context.handler.component; return this.canNavigate(context).then((function(status) { return (status && $__4.activatePorts(context)); })).then(finishNavigating, cancelNavigating); @@ -129,14 +114,7 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { self.navigating = false; } }, - recognize: function(url) { - url = this.getCanonicalUrl(url); - return this.recognizer.recognize(url); - }, getCanonicalUrl: function(url) { - if (url[0] === '.') { - url = url.substr(1); - } forEach(this.rewrites, function(toUrl, fromUrl) { if (fromUrl === '/') { if (url === '/') { @@ -228,9 +206,7 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { return Promise.all(allViewportQueries).then(booleanReduction).then(boolToPromise); } }, {}); - Object.defineProperty(Router.prototype.generate, "parameters", {get: function() { - return [[$traceurRuntime.type.string], []]; - }}); + Router.prototype.generate.parameters = [[$traceurRuntime.type.string], []]; function copy(obj) { return JSON.parse(JSON.stringify(obj)); } @@ -264,5 +240,3 @@ define(["assert", 'route-recognizer'], function($__0,$__2) { __esModule: true }; }); - -//# sourceMappingURL=router.ats From 512cc5dc3ea69311a6cbf2484c9f6c22c7243850 Mon Sep 17 00:00:00 2001 From: Hannah Howard Date: Mon, 9 Mar 2015 16:41:47 -0700 Subject: [PATCH 5/5] Fix test --- test/router-viewport.es5.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/router-viewport.es5.spec.js b/test/router-viewport.es5.spec.js index a718296..dcc4f06 100644 --- a/test/router-viewport.es5.spec.js +++ b/test/router-viewport.es5.spec.js @@ -26,10 +26,10 @@ describe('ngViewport', function () { }); put('one', '
{{number}}
'); - $controllerProvider.register('OneController', boringController('number', 'one', 'one')); + $controllerProvider.register('OneController', boringController('number', 'one')); put('two', '
{{number}}
'); - $controllerProvider.register('TwoController', boringController('number', 'two', 'two')); + $controllerProvider.register('TwoController', boringController('number', 'two')); });