New TodoMVC implementation in Angular 2 with ES2015

[sonicoder86]

Tests for Angular2 examples fail because of angular/angular#6250. The application itself is working as intended.

[ColinEberhardt]

Thanks for the submissions - and also confirming my Angular 2 issue regarding webdriver!

The implementation looks good, however the structure of the app does differ quite a bit from the current TypeScript implementation:

https://github.com/tastejs/todomvc/tree/master/examples/angular2

This doesn't really help people compare the two.

It looks like you've gone down quite a componentised approach. While the todo item feels like a separate component, I'm not so sure about the header / footer.

I'd be interested in the feedback from others @tastejs/todomvc

[sonicoder86]

Is it a must to have very similar implementations within a framework?
@ColinEberhardt I started from your implementation and tried to improve it by removing direct calls to the service from the template. I think it is a better practice to add wrapper methods on the component for it. When i was finished with it, i realized that there is so much methods on that one todo component, it became a behemoth. This was the point where i decided to split it to header footer and list.

It shows how easily components can be created and can communicate through @Input and @Output. Also the dependency injection with a service can be experienced, because it is injected to multiple components.

The purpose with these refactorings were to show as much as possible from the framework and provide a clean maintainable architecture.

[sindresorhus]

This should be in your own global gitignore, not here.

[fesor]

+1 for this. Currently angular2 implementation of todomvc is looks very ugly and doesn't provide proper illustration of component approach to people who is migrating from angular 1.x branch.

as for footer/header components, it's seems to be ok.

[samccone]

@fesor PRs welcome

[ColinEberhardt]

I'm +1 to this PR - I've had a quick look through the code and it looks nice and clean. I'll look to update the TypeScript implementation so that it makes better use of Angular 2 components, giving a similar structure to this example.

[addyosmani]

I'm +1 to this PR - I've had a quick look through the code and it looks nice and clean. I'll look to update the TypeScript implementation so that it makes better use of Angular 2 components, giving a similar structure to this example.

👍

[sonicoder86]

Is it OK to merge then?

[sonicoder86]

Updated dependencies and tried to remove two way data binding but it didnt solve the issue with input element :(

[sonicoder86]

Till the bug fixed no Angular 2 examples will be merged?

[addyosmani]

Is there interest in updating this PR to work with the latest stable Angular 2?

[sonicoder86]

Yes, upgraded my own repository to latest
What i doubt is that tests will run for it

[sonicoder86]

@addyosmani It is updated to the final version.

Browser tests fail when trying to locate the list elements although they exist: :nth-of-type selectors are failing constantly.

[sonicoder86]

@ColinEberhardt @samccone any idea how to solve the issue with the tests?

Tried to eliminate the waiting constructs and instead query for all elements and then select the nth from the array, but it seems a huge workaround.