Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

refactor: move component helper to the $compileProvider #13692

Closed
wants to merge 1 commit into from
Closed

refactor: move component helper to the $compileProvider #13692

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 3 additions & 146 deletions src/loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,155 +288,12 @@ function setupModuleLoader(window) {
* @module ng
* @param {string} name Name of the component in camel-case (i.e. myComp which will match as my-comp)
* @param {Object} options Component definition object (a simplified
* {@link ng.$compile#directive-definition-object directive definition object}),
* has the following properties (all optional):
*
* - `controller` – `{(string|function()=}` – Controller constructor function that should be
* associated with newly created scope or the name of a {@link ng.$compile#-controller-
* registered controller} if passed as a string. Empty function by default.
* - `controllerAs` – `{string=}` – An identifier name for a reference to the controller.
* If present, the controller will be published to scope under the `controllerAs` name.
* If not present, this will default to be the same as the component name.
* - `template` – `{string=|function()=}` – html template as a string or a function that
* returns an html template as a string which should be used as the contents of this component.
* Empty string by default.
*
* If `template` is a function, then it is {@link guide/di injectable}, and receives
* the following locals:
*
* - `$element` - Current element
* - `$attrs` - Current attributes object for the element
*
* - `templateUrl` – `{string=|function()=}` – path or function that returns a path to an html
* template that should be used as the contents of this component.
*
* If `templateUrl` is a function, then it is {@link guide/di injectable}, and receives
* the following locals:
*
* - `$element` - Current element
* - `$attrs` - Current attributes object for the element
* - `bindings` – `{object=}` – Define DOM attribute binding to component properties.
* Component properties are always bound to the component controller and not to the scope.
* - `transclude` – `{boolean=}` – Whether {@link $compile#transclusion transclusion} is enabled.
* Disabled by default.
* - `isolate` – `{boolean=}` – Whether the new scope is isolated. Isolated by default.
* - `restrict` - `{string=}` - String of subset of {@link ng.$compile#-restrict- EACM} which
* restricts the component to specific directive declaration style. If omitted, this defaults to 'E'.
* - `$canActivate` – `{function()=}` – TBD.
* - `$routeConfig` – `{object=}` – TBD.
* {@link ng.$compile#directive-definition-object directive definition object})
*
* @description
* Register a component definition with the compiler. This is short for registering a specific
* subset of directives which represents actual UI components in your application. Component
* definitions are very simple and do not require the complexity behind defining directives.
* Component definitions usually consist only of the template and the controller backing it.
* In order to make the definition easier, components enforce best practices like controllerAs
* and default behaviors like scope isolation, restrict to elements.
*
* <br />
* Here are a few examples of how you would usually define components:
*
* ```js
* var myMod = angular.module(...);
* myMod.component('myComp', {
* template: '<div>My name is {{myComp.name}}</div>',
* controller: function() {
* this.name = 'shahar';
* }
* });
*
* myMod.component('myComp', {
* template: '<div>My name is {{myComp.name}}</div>',
* bindings: {name: '@'}
* });
*
* myMod.component('myComp', {
* templateUrl: 'views/my-comp.html',
* controller: 'MyCtrl as ctrl',
* bindings: {name: '@'}
* });
*
* ```
*
* <br />
* Components are also useful as route templates (e.g. when using
* {@link ngRoute ngRoute}):
*
* ```js
* var myMod = angular.module('myMod', ['ngRoute']);
*
* myMod.component('home', {
* template: '<h1>Home</h1><p>Hello, {{ home.user.name }} !</p>',
* controller: function() {
* this.user = {name: 'world'};
* }
* });
*
* myMod.config(function($routeProvider) {
* $routeProvider.when('/', {
* template: '<home></home>'
* });
* });
* ```
*
* <br />
* When using {@link ngRoute.$routeProvider $routeProvider}, you can often avoid some
* boilerplate, by assigning the resolved dependencies directly on the route scope:
*
* ```js
* var myMod = angular.module('myMod', ['ngRoute']);
*
* myMod.component('home', {
* template: '<h1>Home</h1><p>Hello, {{ home.user.name }} !</p>',
* bindings: {user: '='}
* });
*
* myMod.config(function($routeProvider) {
* $routeProvider.when('/', {
* template: '<home user="$resolve.user"></home>',
* resolve: {user: function($http) { return $http.get('...'); }}
* });
* });
* ```
*
* <br />
* See also {@link ng.$compileProvider#directive $compileProvider.directive()}.
* See {@link ng.$compileProvider#component $compileProvider.component()}.
*/
component: function(name, options) {
function factory($injector) {
function makeInjectable(fn) {
if (isFunction(fn) || Array.isArray(fn)) {
return function(tElement, tAttrs) {
return $injector.invoke(fn, this, {$element: tElement, $attrs: tAttrs});
};
} else {
return fn;
}
}

var template = (!options.template && !options.templateUrl ? '' : options.template);
return {
controller: options.controller || function() {},
controllerAs: identifierForController(options.controller) || options.controllerAs || name,
template: makeInjectable(template),
templateUrl: makeInjectable(options.templateUrl),
transclude: options.transclude === undefined ? false : options.transclude,
scope: options.isolate === false ? true : {},
bindToController: options.bindings || {},
restrict: options.restrict || 'E'
};
}

if (options.$canActivate) {
factory.$canActivate = options.$canActivate;
}
if (options.$routeConfig) {
factory.$routeConfig = options.$routeConfig;
}
factory.$inject = ['$injector'];

return moduleInstance.directive(name, factory);
},
component: invokeLaterAndSetModuleName('$compileProvider', 'component'),

/**
* @ngdoc method
Expand Down
160 changes: 158 additions & 2 deletions src/ng/compile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -867,8 +867,8 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
* @param {string|Object} name Name of the directive in camel-case (i.e. <code>ngBind</code> which
* will match as <code>ng-bind</code>), or an object map of directives where the keys are the
* names and the values are the factories.
* @param {Function|Array} directiveFactory An injectable directive factory function. See
* {@link guide/directive} for more info.
* @param {Function|Array} directiveFactory An injectable directive factory function. See the
* {@link guide/directive directive guide} and the {@link $compile compile API} for more info.
* @returns {ng.$compileProvider} Self for chaining.
*/
this.directive = function registerDirective(name, directiveFactory) {
Expand Down Expand Up @@ -915,6 +915,162 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
return this;
};

/**
* @ngdoc method
* @name $compileProvider#component
* @module ng
* @param {string} name Name of the component in camel-case (i.e. myComp which will match as my-comp)
* @param {Object} options Component definition object (a simplified
* {@link ng.$compile#directive-definition-object directive definition object}),
* has the following properties (all optional):
*
* - `controller` – `{(string|function()=}` – Controller constructor function that should be
* associated with newly created scope or the name of a {@link ng.$compile#-controller-
* registered controller} if passed as a string. Empty function by default.
* - `controllerAs` – `{string=}` – An identifier name for a reference to the controller.
* If present, the controller will be published to scope under the `controllerAs` name.
* If not present, this will default to be the same as the component name.
* - `template` – `{string=|function()=}` – html template as a string or a function that
* returns an html template as a string which should be used as the contents of this component.
* Empty string by default.
*
* If `template` is a function, then it is {@link auto.$injector#invoke injected} with
* the following locals:
*
* - `$element` - Current element
* - `$attrs` - Current attributes object for the element
*
* - `templateUrl` – `{string=|function()=}` – path or function that returns a path to an html
* template that should be used as the contents of this component.
*
* If `templateUrl` is a function, then it is {@link auto.$injector#invoke injected} with
* the following locals:
*
* - `$element` - Current element
* - `$attrs` - Current attributes object for the element
* - `bindings` – `{object=}` – Define DOM attribute binding to component properties.
* Component properties are always bound to the component controller and not to the scope.
* - `transclude` – `{boolean=}` – Whether {@link $compile#transclusion transclusion} is enabled.
* Enabled by default.
* - `isolate` – `{boolean=}` – Whether the new scope is isolated. Isolated by default.
* - `restrict` - `{string=}` - String of subset of {@link ng.$compile#-restrict- EACM} which
* restricts the component to specific directive declaration style. If omitted, this defaults to 'E'.
* - `$canActivate` – `{function()=}` – TBD.
* - `$routeConfig` – `{object=}` – TBD.
*
* @returns {ng.$compileProvider} Self for chaining.
* @description
* Register a component definition with the compiler. This is short for registering a specific
* type of directive which represents a self-contained UI component in your application. Component
* definitions are very simple and do not require the complexity behind defining directives.
* Component definitions usually consist only of the template and the controller backing it.
* In order to make the definition easier, components enforce best practices like controllerAs
* and default behaviors like scope isolation and restriction to elements.
*
* Here are a few examples of how you would usually define components:
*
* ```js
* var myMod = angular.module(...);
* myMod.component('myComp', {
* template: '<div>My name is {{myComp.name}}</div>',
* controller: function() {
* this.name = 'shahar';
* }
* });
*
* myMod.component('myComp', {
* template: '<div>My name is {{myComp.name}}</div>',
* bindings: {name: '@'}
* });
*
* myMod.component('myComp', {
* templateUrl: 'views/my-comp.html',
* controller: 'MyCtrl as ctrl',
* bindings: {name: '@'}
* });
*
* ```
*
* <br />
* Components are also useful as route templates (e.g. when using
* {@link ngRoute ngRoute}):
*
* ```js
* var myMod = angular.module('myMod', ['ngRoute']);
*
* myMod.component('home', {
* template: '<h1>Home</h1><p>Hello, {{ home.user.name }} !</p>',
* controller: function() {
* this.user = {name: 'world'};
* }
* });
*
* myMod.config(function($routeProvider) {
* $routeProvider.when('/', {
* template: '<home></home>'
* });
* });
* ```
*
* <br />
* When using {@link ngRoute.$routeProvider $routeProvider}, you can often avoid some
* boilerplate, by assigning the resolved dependencies directly on the route scope:
*
* ```js
* var myMod = angular.module('myMod', ['ngRoute']);
*
* myMod.component('home', {
* template: '<h1>Home</h1><p>Hello, {{ home.user.name }} !</p>',
* bindings: {user: '='}
* });
*
* myMod.config(function($routeProvider) {
* $routeProvider.when('/', {
* template: '<home user="$resolve.user"></home>',
* resolve: {user: function($http) { return $http.get('...'); }}
* });
* });
* ```
*
* <br />
* See also {@link ng.$compileProvider#directive $compileProvider.directive()}.
*/
this.component = function registerComponent(name, options) {
function factory($injector) {
function makeInjectable(fn) {
if (isFunction(fn) || Array.isArray(fn)) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Better to use isArray() now that we're here.

return function(tElement, tAttrs) {
return $injector.invoke(fn, this, {$element: tElement, $attrs: tAttrs});
};
} else {
return fn;
}
}

var template = (!options.template && !options.templateUrl ? '' : options.template);
return {
controller: options.controller || function() {},
controllerAs: identifierForController(options.controller) || options.controllerAs || name,
template: makeInjectable(template),
templateUrl: makeInjectable(options.templateUrl),
transclude: options.transclude === undefined ? false : options.transclude,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor, but options.transclude or options.transclude || false would work as well (now that false is the default).

scope: options.isolate === false ? true : {},
bindToController: options.bindings || {},
restrict: options.restrict || 'E'
};
}

if (options.$canActivate) {
factory.$canActivate = options.$canActivate;
}
if (options.$routeConfig) {
factory.$routeConfig = options.$routeConfig;
}
factory.$inject = ['$injector'];

return this.directive(name, factory);
};


/**
* @ngdoc method
Expand Down
Loading