3 simple steps to prepare your AngularJS app for the future

Web Components are considered the future of web development. Modern web frameworks like AngularJS or Ember.js try to cover the requirements as much as it is possible so that they will be matching the standards when Web Components come to life. However, the framework itself won’t give us any guarantee whether our app will be valid and matching the W3C specification. The following steps are a fast guide to the good practices that should be used in your AngularJS apps now to save you time in the future.

Use dashes and lower case letters in directives

Web Components introduce Custom Elements. This is the part that makes your code more readable and meaningful. Instead of meaningless <div> you can use <blog-post>. In AngularJS you should remember to create properly named directives. Each valid Web Components HTML element name must contain a dash. Elements like <tag> or <sheep_element> are invalid. Your AngularJS directives should use dashes.

Don’t use <element>

HTMLElementElement was used to simply instantiate elements. It has been removed and shouldn’t be used as it will be treated as an unknown element.

Incorporate polymer.js

While waiting for Web Components there is a great possibility to use the most of its features by incorporating polymer.js to your app, some of them give the ability to simplify the code that you would write in AngularJS.

While Angular provides the ability to create custom directives that allow scope sandboxing, Custom Elements provide the ability to replace some of the directives with elements that support not only DOM and JS sandboxing but also CSS encapsulation. A simple yet great example of how to incorporate Custom Elements with Angular is our old friend ellipsis:

HTML code:

JavaScript code:

Polymer.js can be used in many other ways covering a great deal of Web Components.

The above examples are simple and obvious. While this is of course true, people keep forgetting about Web Components. It is also worth mentioning that AngularJS 2.0 is under way and it will be released in more than a year so we can’t really be sure what changes it will introduce. The provided examples show that we can make small changes now and have less work in the future while we wait for more upcoming details on AngularJS.

References:
[1] Custom Elements by Eric Bidelman
[2] W3.org Custom Elements