Listing directives in @View is verbose (especially for common / easy cases)

[pkozlowski-opensource]

As of today one needs to enumerate all the directives used by a given @View. This is very verbose and repetitive process, especially for simpler cases / components where one uses only standard / built-in directives.

Assuming that I'm building a simple components that only consumes built-in directives I need to write:

import {Component, Template, bootstrap} from 'angular2/angular2';
import {If} from 'angular2/angular2';

@Component({
....
})
@View({
  inline: '...',
  directives: [If]
})
class Simple {
...
}

In a nutshell it means that for every directive I need to:

• import it
• reference in directives

While I understand the benefits of this approach as well as technical limitations here, it is still very repetitive in practice, especially for very often (application-wide) directives (built-ins, directives used in most of the pages, etc.).

Here are few ideas of how to make it easier on people:

• allow omit directives and assume that all built-in directives are available
• allow omit directives and assume that all directives specified by an app developer are available

This is not urgent / critical piece but would make things significantly easier on people.

[tbosch]

As the directives list can contain nested lists, Angular could provide a
default list of directives that can be referenced, and we still get all the
benefits.
For a concrete project, the project can export its own list of directives
and reference this list everywhere.

With this, the overhead would be one module import + one line in the
Annotation.
On Fri, Apr 10, 2015 at 8:14 AM Pawel Kozlowski notifications@github.com
wrote:

As of today one needs to enumerate all the directives used by a given
@template. This is very verbose and repetitive process, especially for
simpler cases / components where one uses only standard / built-in
directives.

Assuming that I'm building a simple components that only consumes built-in
directives I need to write:

import {Component, Template, bootstrap} from 'angular2/angular2';import {If} from 'angular2/angular2';

@component({
....
})
@template({
inline: '...',
directives: [If]
})class Simple {
...
}

In a nutshell it means that for every directive I need to:

• import it
• reference in directives

While I understand the benefits of this approach as well as technical
limitations here, it is still very repetitive in practice, especially for
very often (application-wide) directives (built-ins, directives used in
most of the pages, etc.).

Here are few ideas of how to make it easier on people:

• allow omit directives and assume that all built-in directives are
  available
• allow omit directives and assume that all directives specified by an
  app developer are available

This is not urgent / critical piece but would make things significantly
easier on people.

—
Reply to this email directly or view it on GitHub
#1293.

[pkozlowski-opensource]

@tbosch yes, this is definitively something we could and should do - that is - provide a file with a list of all directives. Still, it doesn't change the fact that ones needs to import + reference this list.

I know that there are different forces here but this is boilerplate and IMO we need to find a way of removing it for simpler cases.

[jkurz]

I like the idea of exporting a list from a project, but maybe it would need to allow for multiple exports. Groups of directives that could be included not all. All too if you wanted.

Also could we make it optional for directives to be inherited from the parent? So we could just put a Custom List at the Root of the app and they could be available anywhere in the tree. Maybe a special directives attr on the Template, which is read from all children.

[jkurz]

On another thought, maybe we could change how we export classes, killing two birds with one stone.

so you could do something like import {directives.view.If} from 'angular2/angular2/export';

then Angular would not have to have an extra list just for groups of exports and anyone could reference all directives, or all services, or just a subset of whatever they wanted, or just individual classes.

[timjacobi]

What is the performance impact of referencing a directive? If it's negligible I vote for having built-in directives available everywhere.

[yjbanov]

NOTE: @Template has been renamed to @View

One way to get rid of boilerplate is to extend the View annotation that preloads all standard directives. E.g.:

class CommonView extends View {
  constructor({templateUrl, template, directives}) {
    super({
      templateUrl: templateUrl,
      template: template,
      directives: [If, For, Switch, directives]
    });
  }
}

Then you use it instead of View in your components:

@Component(...)
@CommonView({
  template: '<div *if="isVisible">...</div>'
})

That said, to not want standard directives is an exception. Most ng2 apps will need the standard directives. Perhaps we could have a RawView that does not preload anything and View would bring in standard directives automatically.

[pkozlowski-opensource]

Thnx @yjbanov - updated @Template -> @View

That said, to not want standard directives is an exception. Most ng2 apps will need the standard directives.

I like the sound of it :-)

Perhaps we could have a RawView that does not preload anything and View would bring in standard directives automatically.

This is definitively a possibility!

[un33k]

I believe having the ability to pre load commonly used directive might be preferred over just the core directives. Imagine if a project introduces a "Foo" directive that is heavily used, then it would be nice to load it up once and use it many times. (#1586)

[pkozlowski-opensource]

@un33k totally agree. What I'm trying to do as the very first step is to deal with built-in directives. But the very next step should be some kind of "registry" where users could register commonly used directives. There are few items to sort out to make it possible (how to deal with duplicates / collisions, tooling support etc.) but yeh, this is the plan!