A Different Angle on Angular

If you've been keeping up to date on the RhoMoible blogs, then you've seen the about all the benefits of using Ionic in your RhoMobile application. A big part of what makes Ionic so extraordinary is that it is built on top of AngularJS.

While many developers know about the power of AngularJS and its data-binding abilities, few might know about Angular's impressive finer points: directives and services. Directives are one of Angular’s most overlooked, yet most powerful features.

What is a Directive?

At its most basic level, a directive is a marker on a DOM element (an attribute, element name, comment, or CSS class) that tells the Angular compiler in your HTML to attach a specified behavior to the marked DOM element. This allows you to take a lot of repetitive code out of your HTML files. You can name your directives based on their purpose, such as “displayImages” or “showWeeklyWeather.” This gives the added bonus of making your code clearer and easier to read.

On top of this, Angular lets you have custom directives and create your own reusable functionality. This is where Angular directives really shine.

Below is a custom Directive that changes the background color of “Hello World” to match the color in the input box.

HTML Code: