Component namespacing

[samithaf]

With new component helper which is available in Angular 1.5 we can create an entire application as component tree. However challenge is that since all the components are get register in globally we need to namespace the components to avoid name collisions. Could you please suggest good way namespace the components? Currently I am using dot as the separator as follows.

angular
.module('app.account.details', [])
.component('app.account.details.edit', NameComponent);

[MarcLoupias]

A component is just a directive wrapper with no compile nor link functions. So, just use the same convention you are using for directives.

[mackelito]

They are not the same.. eg. components have isolated scope by default, they use the controllerAs by default, the controller replaces the link function and bindToController is true by default..

Everything you can do with component you can achieve with a directive but the reason component exists is to make the transition to angular 2 easier.

[mackelito]

You can read about more features here: http://www.codelord.net/2015/12/17/angulars-component-what-is-it-good-for/

[mackelito]

So will this be added?

[blowsie]

Any suggestions or hints on this?

@samithaf using dot separators limits you when it comes to css selectors.

[gkalpak]

Using dots shouldn't limit you (e.g. you can escape them in CSS selectors), but is cumbersome and unconventional.

People have been using - for namespacing components for years and I don't see antmy reason to use any other separator.

[samithaf]

@mackelito @blowsie @gkalpak I am using following pattern in a very large scale financial application (100K + LOC ) and so far everything is fine. As you can see I am using dot separators for everything to be consistent. However except for filters. With the styles you can escape the dot.

const loginModule = angular.module('app.core.login', [])
.component('app.core.login', loginComponent)
.service('app.core.login.loginService', loginService);

[blowsie]

@samithaf how do you inject services into your controller? I presume you have to use the ['app.core.login.loginService' , function(loginService) {}] approach?

[samithaf]

@blowsie sample use of login service as follows.

class LoginController {
  constructor($q, loginService) {
    this.loginService = loginService;
  }

  /**
   * @method $onInit
   * This lifecycle hook will be executed when all controllers on an element have been constructed and after their bindings are initialized
   */
  $onInit() {
    this.loginService.invalidateSession();
  }
  
}

LoginController.$inject = ['$q', 'nw.core.login.loginService'];

export default LoginController;

[MarcLoupias]

It's very nice for services but for components it's really weird :

<div><app.core.login></app.core.login></div>

And it's inconsistent with the world around (everyone is using - as @gkalpak said it).

I am sure the @samithaf application is nice with this but there is a difference between a weird naming convention working well on a project and what it should be set in a global style guide.

The core issue here is : the AngularJS injector is flat, so we need to think globally when we name module components. This is a design flaw fixed in Angular. Changing a core convention (- for namespacing) used from the begining by almost everyone is not way to go IMHO.

[samithaf]

Hey @MarcLoupias as you mentioned since angular DI is flat we can't do much. But when defining module names without a namespace can easily introduce side effects. Specially in a large scale project where you have 10+ scrum teams working on. Even the solution that I came up with not align with the convention I can't think of another good way to solve this issue. It would have been nice if Angular team automatically namespace the modules. But I don't think it will going happen for angular 1.X ;)

[MarcLoupias]

But when defining module names without a namespace can easily introduce side effects.

Yes, at injector initialization phase, the injector behavior is to override silently the service already declared in the injector with the last to declare.

Specially in a large scale project where you have 10+ scrum teams working on.

It's something like 50+ developers !

I can't think of another good way to solve this issue.

Split your business in several apps ? AngularJS is not really suited for enormous projects due to this injector namespace design flaw.