I am having a dispute with my co-workers regarding this issue and I would like to know what other angular developers think about using custom directives in angular js. I personally prefer to use custom directives instead of having a single controller with multiple ng-includes and here are the reasons why.
- Creates separation of concern, as each of the components are divided into their logical chunks whereas in using multiple ng-includes with a single parent controller, all the logic resides in single file.
- Easy to maintain, as logic for each components resides within the directive, it is easier to navigate the code.
- Makes unit testing easy. Once you unit test the logic for a directive you do not have to re-test the same logic in other areas where your directive is used. So in long run saves development time.
- Reusable components.
The main selling point for me on using the custom directives is because of reusuablilty, separation of concern and Don't repeat yourself concept. Also development wise, the time taken to build an app with custom directive is roughly same as the time taken to build an app with multiple ng-includes and a single controller. So if we can get a reusable component, codes with better readability which are easier to maintain and test in the same amount of time, then why not go with custom directives?