Modularize Angular template

Question

My template file is getting large and too complex (~200 (long) lines of code, 9 levels of indentation) and therefore it's becoming error prone too. I'm looking for a simple solution which allows me to access $scope variables and functions without too much headache.

My first idea was to use ngInclude, but as I saw it's getting hacky if I want to access variables.

The other idea would be to use directives, but that also doesn't seem to be a way to go as I don't want to add separate directives for every template.

My last idea is to write a general directive which uses its parents $scope and can access it's functions. Is that considered to be a good practice? What are possible pitfalls/disadvantages of transclusion?

Answer 1

My recommendation for projects which get this complex are twofold. They are two of the bigger points from John Papa's excellent Angular Style Guide.

First, consider changing from using $scope in your code to using the controller as syntax instead. The controller as syntax offers quite a few benefits, chief among them being that it allows you to easily recognize your variable dependency chain. Once you have identified your dependency chain, it is much easier to identify portions of your code which can be modularized.

Once you have an idea of the code that can be modularized, you then can break the modules into directives. When using the controller as syntax, you will find it much easier to create directives where the entire directive is responsible for a single object, and avoid the pitfall of having a directive which accepts too many parameters and takes on more than one responsibility.

In the short term, it may seem like creating many directives is more work than just having a few templates, but in practice, your code becomes much more testable and maintainable.

The best modular directives are able to function independently, i.e. they could be the only component on a page when provided with a single data object. The closer you can come to a directive which can match an object, the less complex your code becomes.

Answer 2

Write your angular as little modules of code

These modules should probably be page specific. Take a look at this simple template I put together to keep all of your angular code readable and functional. here is a link to the github repo.

File structure

In app you have 2 core modules, one that brings it all together "module.js"

And one that controlls your routes "routes.js"

There is also a components section, this contains individual modules for each page separating concerns. we have a file for the module itself and the controller and a separate one for the factories and services.

By structuring your app like this you can build little plugin components and stop them becoming huge unreadable messes.

Additional reading

I follow this guide for angular app structure, the points made in the article are very good and have always kept my code clean.

Answer 3

In my opinion, using directives to modularize Angular template can be a good option than ng-include. But you need to structure your template in such a way that we you will not end up creating too much directives. You can consider below approach for this

1. Divide your template in segments, like header, footer, left-right navigation etc.

2. Create controllers which will hold the scope for related areas in template.

3. Create directive for each section of template and inject your associated controller into it.

4. Create a common directive which will load respective directory on demand. Eg. if you want to keep right navigation hidden for some time, handle such condition here.

5. Reduce code to minimal lines and load them when needed.

This way you can divide load of DOM on various pillars like directives. Hope this helps. Happy Coding!