Key points about AngularJS Directive and custom element using Polymer.
Creating custom element is achievable by creating a custom Directive in AngularJS. We can say it's one of the best feature of the framework. As Google's Polymer project is in hype for it's material design and web component based architecture, it also supports functionalities to create a custom component.
To create a directive in AngularJS:
To create a custom web component in Google Polymer:
Once you get a understanding both of these ways to develop a component we may conclude these are main key points to achieve each blocks of custom component:
| Functionality | In AngularJS | In Polymer |
|---|---|---|
| Template of a custom element | It supports writing template as well as loading template from a URL | It supports writing template |
| Styling template and it's contents | In template itself you can add styles and classes | In template you can have "<style>" tags to describe different inline styling |
| Wrapping other HTML by custom component | It provides ng-transclude as well as trancluseFunction to achieve this functionality | Here it provides insertion point, which tells the browser where to render children |
| Writing JavaScript logic | It can be written inside controller, compile and lining functions. | It can be written inside "<script>" tag. |
