From 869d421ed0db6181af96144f271ecf83f53e40ad Mon Sep 17 00:00:00 2001 From: Caitlin Potter Date: Thu, 18 Jun 2015 21:58:11 -0400 Subject: [PATCH] WIP angular.component implementation [ci skip] Needs tests and experimentation, it would be nice to make this work well with TypeScript decorators for ease of use. The whole "controller instantiated after templateUrl is loaded" thing seems not-ideal, it would be cool if a templateUrl function could be a method of the component controller. --- src/loader.js | 10 +++++++++ src/ng/compile.js | 54 +++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 62 insertions(+), 2 deletions(-) diff --git a/src/loader.js b/src/loader.js index a6c14f54ae9d..1049b6e5072b 100644 --- a/src/loader.js +++ b/src/loader.js @@ -269,6 +269,16 @@ function setupModuleLoader(window) { */ controller: invokeLaterAndSetModuleName('$controllerProvider', 'register'), + /** + * @ngdoc method + * @name angular.Module#component + * @module ng + * @param {string} name Component name, used as a directive name + * @param {object=} bindings + * @param {string|function} controller used for component + */ + component: invokeLaterAndSetModuleName('$compileProvider', 'component'), + /** * @ngdoc method * @name angular.Module#directive diff --git a/src/ng/compile.js b/src/ng/compile.js index 85728ea01315..a833def513a0 100644 --- a/src/ng/compile.js +++ b/src/ng/compile.js @@ -812,6 +812,52 @@ function $CompileProvider($provide, $$sanitizeUriProvider) { } } + /** + * @ngdoc method + * @name $compileProvider#component + * @kind function + * + * @description + * Register a new component with the compiler. + * + * A component is a shorthand for a directive with a controller, template, and a + * new scope. + * + * @returns {ng.$compileProvider} Self for chaining. + */ + this.component = registerComponent; + function registerComponent(name, bindings, controller) { + if (isString(name)) { + assertValidDirectiveName(name); + if (arguments.length < 3) { + controller = bindings; + bindings = controller.bindings || null; + } + return registerDirective(name, valueFn({ + controller: controller, + controllerAs: controller.controllerAs || '$' + name, + scope: controller.isolate ? {} : true, + bindToController: bindings, + template: controller.template || false, + templateUrl: controller.templateUrl || false + }, true)); + } else { + forEach(name, function(value, name) { + var controller = null; + var bindings = null; + if (isArray(value) || isFunction(value)) { + controller = value; + bindings = value.bindings || null; + } else if (isObject(value)) { + controller = value.controller || null; + bindings = value.bindings || null; + } + return registerComponent(name, bindings, controller); + }); + } + return this; + } + /** * @ngdoc method * @name $compileProvider#directive @@ -827,7 +873,10 @@ function $CompileProvider($provide, $$sanitizeUriProvider) { * {@link guide/directive} for more info. * @returns {ng.$compileProvider} Self for chaining. */ - this.directive = function registerDirective(name, directiveFactory) { + this.directive = function callRegisterDirective(name, directiveFactory) { + return registerDirective(name, directiveFactory, false); + }; + function registerDirective(name, directiveFactory, isComponent) { assertNotHasOwnProperty(name, 'directive'); if (isString(name)) { assertValidDirectiveName(name); @@ -850,6 +899,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) { directive.name = directive.name || name; directive.require = directive.require || (directive.controller && directive.name); directive.restrict = directive.restrict || 'EA'; + directive.component = !!isComponent; var bindings = directive.$$bindings = parseDirectiveBindings(directive, directive.name); if (isObject(bindings.isolateScope)) { @@ -869,7 +919,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) { forEach(name, reverseParams(registerDirective)); } return this; - }; + } /**