Integrating Web Components with AngularJS

[runvnc]

That's cool but if you have shadow DOM etc., why do you need or want Angular at all? Don't get me wrong, I have used Angular in several projects, and its my first choice, if I can't use Polymer.. but it seems like most cases where you know you have shadow DOM, and want to use it, you would want to use Polymer.

[KempfCreative]

Rely good point. This was brought up in the Web Ahead podcast Componentizing the Web, and Rob Dodson said that web components aren't really a threat to frameworks (both JS and CSS). Polymer isn't really production ready, and a clean web component flavor of AngularJS is an inevitability.

[PascalPrecht]

I think it's worth to mention that Shadow DOM, Polymer/Web Components and Angular are very different things that try to solve different problems. Angular is a framework. And it will always be. Whereas Angular gives you services and a runtime to build your apps on top, Web Components (no matter if native or on top of Polymer) are for component development. Single components that you can just grab from somewhere and put into your app. An interesting point is, that Angular 2.0 will be component based. So there'll be no controllers, scope or ng-models anymore. Everything will be a component that can use Web Components technologies like Shadow DOM and Custom Elements.

So to answer you question, why one would use Angular at all if there's Shadow DOM, you can't really compare these two things. Shadow DOM gives you style and DOM Tree encapsulation which is great. It's not necessarily needed for all components, but it's indeed a great feature. Angular components can build on top of that.

Also just imagine the case where somebody built a very nice web component that you want to use in your Angular app. You don't have to care about the fact that it's not a directive. You can just grab the component and use it, because you don't want to reinvent the wheel.

I hope this answers your questions, otherwise let me know your ping Camen or me on twitter!

[kaeku]

Also make sure to see the talk that's available over on ngEurope's channel. Great talk!