REQUEST FOR FEEDBACK: `angular.component()` - auto creating a controller

[shairez]

As discussed with @shahata and @petebacondarwin -

The problem I run into when writing lots of "component like" directives is the unnecessarily repeated configuration over and over again.

Registering controllers

It's redundant to have a separate controller declaration.

Registering controllers by name in a component based architecture is useful only for unit tests, where you'd want to use $controller to create an instance of the component's controller.

But registering it over and over again is redundant and can be done by the .component.

We should have one .comp.js file

If we use .component(), it should auto create a new controller, registered with the same component name (because it too must be unique).

So we should end up with one file where the .component() becomes a true "annotation like" thing, something like:

angular
 .module('myModule')
 .component('productList', {
   controller: ProductListController,
   templateUrl: 'product-list.comp.html'
  })

function ProductListController(){

}

$controller('productList') // <-- should be an instance of ProductListController

I'd love to hear the cons for this approach

What do you think?

[petebacondarwin]

So on an abstract level, what you are saying is that the controller provided to a component registration should be made available (primarily for testing purposes?) via some Angular API?

More concretely your suggestion is that the component() helper should also register the controller via the controller() helper mechanism so that it can be accessed like any other controller via the $controller service?

And further that we should use the name of the component as the name of the controller? For this particular suggestion, I would suggest that we postfix the name with something to help mitigate potential collisions with other controllers. Perhaps postfix Controller or even ComonentController on the component name.

[shahata]

In an app which uses es6 modules you would simply do:

//------ product-list.js ------
angular
 .module('myModule')
 .component('productList', {
   controller: ProductListController,
   templateUrl: 'product-list.comp.html'
  });

export function ProductListController() {}

//------ product-list.spec.js ------
import {ProductListController} from 'product-list';

$controller(ProductListController);

I like it that we can give a similar mechanism to people on es5.
+1 for Controller postfix.

[gkalpak]

Tl;dr: Sounds reasonable to me.

Generally, it's a good practice (imo) to register a directive controller by name (i.e. not as a constructor function directly), for testing purposes and decoupling. But since the .component() helper is just a...helper and one fo its purposes is to reduce boilerplate, it sounds reasonable to support/promote a good practice (registering a controller separately) without extra boilerplate overhead.

So, it's a 👍 from me on the idea.

Implementation-wise, I would:

• Use PascalCase (instead of the camelCased component's name).
• Suffix with Controller. (I actually prefer Ctrl, but Controller it a more generally accepted best practice, I think.)
• I would provide a way to opt-out (just in case). E.g. having registerController: false on the CDO, would skip that step.

[lgalfaso]

This sounds reasonable, but would it be possible to know the specific use case that this solves? BTW, I agree with the comment from @petebacondarwin that the controller name should have some suffix, even when I think that Controller is not a good option. Keep in mind that controllers are not registered as services, so there is no need to add a suffix to avoid name collisions

[shahata]

I'm just wondering if this is not too magical though. We could just recommend people to also register their controller with module.controller if they need to unit test it and then it is very clear to the developer what is actually happening.

Example:

//------ product-list.js ------
angular
 .module('myModule')
 .controller('ProductListController', ProductListController) // <-- register also as controller
 .component('productList', {
   controller: ProductListController,
   templateUrl: 'product-list.comp.html'
  });

function ProductListController() {}

//------ product-list.spec.js ------
$controller('ProductListController');

[shahata]

@lgalfaso the use case is that people sometimes want to write unit tests for their controller without actually going through compiling the component.

[petebacondarwin]

@lgalfaso - there could be name collisions with other controllers that have been registered explicitly via the controller() helper.