ngUpgraders / ng-forward

The default solution for those that want to write Angular 2.x style code in Angular 1.x
411 stars 36 forks source link

Angular 2 style templates #4

Closed MikeRyanDev closed 9 years ago

MikeRyanDev commented 9 years ago

Now that we have working events we can simulate Angular 2 style events using this syntax:

<my-component on-event="doSomething($event)"></my-component>

and thanks to some work by @timkindberg and @Mitranim, we now support three types of property binding: text value, one way, and two way:

// Bind text:
<my-component color="red"></my-component>
// Bind one way:
<my-component bind-color="color"></my-component>
// Bind two way:
<my-component bind-on-color="color"></my-component>

With these building blocks in place I was taking a look through the source for Angular's $compile service and noticed that it doesn't strip non-alphanumeric characters from scope bindings or directive names. To demonstrate I've created a new branch called proposal/template-syntax that changes both the event and properties builders so that the above examples could be rewritten like this:

// Events
<my-component (event)="doSomething($event)"></my-component>
// Bind text:
<my-component color="red"></my-component>
// Bind one way:
<my-component [color]="color"></my-component>
// Bind two way:
<my-component [(color)]="color"></my-component>

While the previous syntax would have worked just fine when ported over to Angular 2 (brackets and parens are just syntactic sugar for bind-${prop} and on-${event}, respectively) it is pretty verbose and would be cumbersome to write out for components with a large property/event API.

The only issue is that it would require a good bit of overhead to support both on-*/(*), bind-*/[*], and bind-on-*/[(*)]. It would be best to to choose one syntax to support for v1 of ng-forward.

pbastowski commented 9 years ago

Nice work guys.

I would definitely prefer the ng2 syntax using the (), [] and [()], in addition to no brackets for text bindings.

@MikeRyan52 how much overhead? Is it runtime overhead or just coding effort or something else?

egor-smirnov commented 9 years ago

The same, I would prefer new Angular2 syntax. Didn't know that it's possible to do things like this in Angular1. @MikeRyan52 Nice research about that!

timkindberg commented 9 years ago

I love it!

Perhaps we could have a setting that either sets up the 'word-' variants or the 'character surrounding' variants. If that still is too much overhead I vote for the special character ones.