0

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?

fodma1
  • 3,485
  • 1
  • 29
  • 49
  • I make some "template" html files with a lot of access to $scope variables and use them with ng-include with no problem. what the problem you encounter when you say "it's getting hacky if I want to access variables" ? – AlainIb Jan 08 '16 at 10:46
  • I mean I was looking at this answer and it didn't had a clear answer: http://stackoverflow.com/questions/25678560/angular-passing-scope-to-ng-include – fodma1 Jan 08 '16 at 10:49
  • All answers here are equally good -- One thing you really should avoid is to access parent `$scope` properties. Try to separate modules/directives/controllers based on their functionality with the least dependencies. If some controller/directive needs some information to function, pass it with dependency injection or via directive arguments. – null Jan 08 '16 at 11:20

3 Answers3

1

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.

Community
  • 1
  • 1
Joe Lloyd
  • 19,471
  • 7
  • 53
  • 81
  • Thank you for the advice, I took a look at your code, but the thing is I'm working on a large codebase compared to yours, and some bad design decisions had been already made, I'm just trying to make it a little bit less complex. I'm actually trying to separate the template for a page, which has nav pills and it's quite complex. – fodma1 Jan 08 '16 at 10:54
  • yeah the code I use here is just a template I use with basic functionality small and simple but I think that the structure should be compatible with most angular apps. imo if your codebase is unmanageable you should think about a full refactor to keep it clean, it will genuinely save you much headache in the future. Good luck – Joe Lloyd Jan 08 '16 at 10:57
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.

Claies
  • 22,124
  • 4
  • 53
  • 77
0

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!

Anand G
  • 3,130
  • 1
  • 22
  • 28