javascript

  • My question involves how to go about dealing with complex nesting of templates (also called partials) in an AngularJS application.
  • Here is an example of what’s in my app:

    In circle 2, the template that is loaded into the has an additional sub-navigation.

  • I know that I can include additional templates within the 1st template, but these templates are all going to be pretty complex.
  • I would like to keep all the templates separate in order to make the application easier to update and not have a dependency on the parent template having to be loaded in order to access its children.
  • There is the potential that the sub-navigation templates will have a 2nd sub-navigation that will need to load its own templates as well into the area in circle 4

    How does one go about structuring an AngularJS app to deal with such complex nesting of templates while keeping them all separate from one another?

My question involves how to go about dealing with complex nesting of templates (also called partials) in an AngularJS application.

@JavascriptQnA: Complex nesting of partials and templates #javascript #angularjs

My question involves how to go about dealing with complex nesting of templates (also called partials) in an AngularJS application.

The best way to describe my situation is with an image I created:

As you can see this has the potential to be a fairly complex application with lots of nested models.

attribute.

to the main app module. Here is an example of what’s in my app:

has an additional sub-navigation. This sub-nav then needs to load templates into the area below it – but since ng-view is already being used, I’m not sure how to go about doing this.

I know that I can include additional templates within the 1st template, but these templates are all going to be pretty complex. I would like to keep all the templates separate in order to make the application easier to update and not have a dependency on the parent template having to be loaded in order to access its children.

In circle 3, you can see things get even more complex. There is the potential that the sub-navigation templates will have a 2nd sub-navigation that will need to load its own templates as well into the area in circle 4

How does one go about structuring an AngularJS app to deal with such complex nesting of templates while keeping them all separate from one another?

Well, since you can currently only have one ngView directive… I use nested directive controls. This allows you to set up templating and inherit (or isolate) scopes among them. Outside of that I use ng-switch or even just ng-show to choose which controls I’m displaying based on what’s coming in from $routeParams.

EDIT Here’s some example pseudo-code to give you an idea of what I’m talking about. With a nested sub navigation.

Here’s the main app page

Directive for the sub navigation

template for the sub navigation

template for a main page (from primary nav)

Controller for a main page. (from the primary nav)

I like ProLoser’s solution better, we do something like that on our app and it has worked fine. The problem with blesh’s solution is the controller code going into the directives. Usually the controller that that you specify in a directive is one which works closely with the directive for ex: ngModelCtrl which works closely with the input and other directives. In your case putting the controller code within a directive would be a code smell, it is actually an independent controller. – ChrisOdney Nov 22 ’12 at 11:37

@blesh, nice ! It seems really good explained but as a good JS programmer and beginner in AngularJS I coulnt catch that well… Me and the community would really enjoy a JSFiddle link to a working sample using that approach. Diggin it around would be easy to understand ! 🙂 Thanks – Rogerio Barretto Aug 20 ’13 at 16:37

I think this solution should be a first answer for any questions kind of ‘nested view didn’t work’. Just because it’s much more close to the Angular ideology instead of using ui-router and etc. Thanks. – Sergey Panfilov Nov 7 ’13 at 5:09

So the answer is directives? – Marc M. Nov 7 ’13 at 23:37

For subsections it’s as easy as leveraging strings in ng-include:

Or you can create an object in case you have links to sub pages all over the place:

I like your solution better. i am a newb to Angular and this seems much more understandable from how i see the web until today. who knows, may be blesh uses more of the angular framework to do it, but it seems like you nailed it with fewer lines of code in a more sensible way. thanks! – Gleeb Jan 8 ’13 at 21:07

I’m having the same design issue as the OP. Has anyone tried AngularUI state mechanism ? I’m quite reluctant to using yet another 3rd party library and I’d rather stick with AngularJS ‘way of doing things’. But on the other hand, the routing system seems to be its Achilles’ heel… @PhillipKregg, what did you end up using to solve this scenario ? – Sam Apr 27 ’13 at 15:33

directive anywhere within your sub-template(s) to use a different controller for each partial. – colllin Jul 24 ’13 at 17:12

@DerekAdair the project is fairly stable (despite version number) and in use in production in a few places. It prevents unnecessary controller reloading, and is a much better alternative to my suggested solution. – ProLoser Sep 7 ’13 at 20:40

You may checkout this library for the same purpose also:

It looks like what you are looking for, and it is much simpler to use than ui-router. From the demo site:

JS:

Artem, your’s is the best solution I’ve found to date! I like the fact that you extend angular route rather than replace it as angular ui does. – LastTribunal Jul 5 ’14 at 0:55

I too was struggling with nested views in Angular.

Once I got a hold of ui-router I knew I was never going back to angular default routing functionality.

As it can be seen there are 4 main views (view1,view2,view3,view4) and view1 has 3 child views.

? I don’t see it used anywhere. – Aaron Jun 15 ’15 at 14:53

You may use ng-include to avoid using nested ng-views.

Angular ui-router supports nested views. I haven’t used it yet but looks very promising.

javascript

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.