AngularJs: Custom Directives

One of the benefits of using Angular is that it allows you to create small fragments of Html which can be reused across multiple pages. this promotes code reuse and minimizes duplication.

ng-include 
The ng-include directive in angular can be used to fetch an external html fragment and compile it as part of the page.

Lets say that in the below example the description portion of each course is an snippet that has the potential to be reused across the application.

 we can extract the markup that represents the description portion and insert it into a separate html file.

after we have extracted the reusable portion into it's own html file like below,

We can then use ng-include to tell angular to fetch it and include it in the index page. because ng-include expects an string we therefore use single quotes to wrap the name of the html file.

using this technique we can reuse the description portion across the web app as many times as needed.

Custom Directives
Custom directives allow us to write code that is expressive and makes it easier to understand what the application is trying to do.
one of the easiest types of custom directives that we can implement in angular are the template expanding directives.
template expanding directives can include controller logic and also they allow us to define an attribute with a meaningful name that can be replaced by the template.
in the following code snippet we are declaring a custom directive called course description.

In the above snippet we are restricting the directive to match the elements with the name "course-description". we have to explicitly state the restriction type because by default angular directives match attributes not elements.
the name of the directive is produced when angular translates the camel cased name "courseDescription" of the directive into this format "course-description".
now that we have got our directive we can include it in the index page or any other page in the following manner.

Custom directives can also include controller functions. we are going to add a controller to the course-description directive so that we can implement a read more, read less link.

the user can show the full description by clicking on the read more link or can revert it back to it's shortened version by clicking on read less.

in the above snippet I have added a controller function to the course description directive and given it an alias of ctrl. this alias can be used in the mark up to access the data in this controller.

I have added a boolean value to the controller called showMore and have set it to default value of false. this is used to check whether the whole text should be shown or only an smaller portion.

when the user clicks on the "Read more" link the boolean value is negated and the linkText is changed to indicate the new state.

the mark up above is the course description directive after it has been updated. there are two span elements, one holding the full description text and the other using the limitTo directive only shows the first 30 characters. according to the showMore boolean value in the ctrl controller one of the spans is hidden and the other is made visible.

as you can see from the above screenshot it is very easy to create custom directives that have both functionality through the use of controllers and can be reused across a project.