Complex nesting of partials and templates

Question

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   The application is single-page  so it loads an index html that contains a div element in the DOM with the ng-view attribute   For circle 1  You see that there is a Primary navigation that loads the appropriate templates into the ng-view   I m doing this by passing  routeParams to the main app module   Here is an example of what s in my app   angular module  myApp            config    routeProvider   function  routeProvider             routeProvider                                   when   job  jobId zones  zoneId     controller  JobDetailController  templateUrl   assets job list app templates zone edit html                  when   job  jobId initial inspection     controller  JobDetailController  templateUrl   assets job list app templates initial inspection html                  when   job  jobId zones  zoneId rooms  roomId     controller  JobDetailController  templateUrl   assets job list app templates room edit html                        In circle 2  the template that is loaded into the ng-view 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

User · Answer

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

http://docs.angularjs.org/api/ng/directive/ngInclude
http://plnkr.co/edit/ngdoc:example-example39@snapshot?p=preview

My index page I use ng-view. Then on my sub pages which I need to have nested frames. I use ng-include. The demo shows a dropdown. I replaced mine with a link ng-click. In the function I would put $scope.template = $scope.templates[0]; or $scope.template = $scope.templates[1];

$scope.clickToSomePage= function(){
  $scope.template = $scope.templates[0];
};

User · Answer

UPDATE  Check out AngularUI s new project to address this problem    For subsections it s as easy as leveraging strings in ng-include    lt ul id  subNav  gt     lt li gt  lt a ng-click  subPage  section1 subpage1 htm   gt Sub Page 1 lt  a gt  lt  li gt     lt li gt  lt a ng-click  subPage  section1 subpage2 htm   gt Sub Page 2 lt  a gt  lt  li gt     lt li gt  lt a ng-click  subPage  section1 subpage3 htm   gt Sub Page 3 lt  a gt  lt  li gt   lt  ul gt   lt ng-include src  subPage  gt  lt  ng-include gt    Or you can create an object in case you have links to sub pages all over the place    scope pages     page1   section1 subpage1 htm               lt ul id  subNav  gt     lt li gt  lt a ng-click  subPage  page1   gt Sub Page 1 lt  a gt  lt  li gt     lt li gt  lt a ng-click  subPage  page2   gt Sub Page 2 lt  a gt  lt  li gt     lt li gt  lt a ng-click  subPage  page3   gt Sub Page 3 lt  a gt  lt  li gt   lt  ul gt   lt ng-include src  pages subPage   gt  lt  ng-include gt    Or you can even use  routeParams   routeProvider when   home          routeProvider when   home  tab          scope params    routeParams       lt ul id  subNav  gt     lt li gt  lt a href    home tab1  gt Sub Page 1 lt  a gt  lt  li gt     lt li gt  lt a href    home tab2  gt Sub Page 2 lt  a gt  lt  li gt     lt li gt  lt a href    home tab3  gt Sub Page 3 lt  a gt  lt  li gt   lt  ul gt   lt ng-include src     home     tab     html    gt  lt  ng-include gt    You can also put an ng-controller at the top-most level of each partial

User · Answer

Angular ui-router supports nested views  I haven t used it yet but looks very promising   http   angular-ui github io ui-router

User · Answer

You may checkout this library for the same purpose also   http   angular-route-segment com  It looks like what you are looking for  and it is much simpler to use than ui-router  From the demo site   JS    routeSegmentProvider   when   section1             s1 home    when   section1  id         s1 itemInfo overview    when   section2             s2     segment  s1         templateUrl   templates section1 html       controller  MainCtrl    within        segment  home             templateUrl   templates section1 home html         segment  itemInfo             templateUrl   templates section1 item html           controller  Section1ItemCtrl          dependencies    id          within            segment  overview                 templateUrl   templates section1 item overview html       Top-level HTML    lt ul gt       lt li ng-class   active   routeSegment startsWith  s1     gt           lt a href   section1  gt Section 1 lt  a gt       lt  li gt       lt li ng-class   active   routeSegment startsWith  s2     gt           lt a href   section2  gt Section 2 lt  a gt       lt  li gt   lt  ul gt   lt div id  contents  app-view-segment  0  gt  lt  div gt    Nested HTML    lt h4 gt Section 1 lt  h4 gt  Section 1 contents   lt div app-view-segment  1  gt  lt  div gt

User · Answer

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   lt  -- primary nav -- gt   lt a href    page 1  gt Page 1 lt  a gt   lt a href    page 2  gt Page 2 lt  a gt   lt a href    page 3  gt Page 3 lt  a gt    lt  -- display the view -- gt   lt div ng-view gt   lt  div gt    Directive for the sub navigation  app directive  mySubNav   function        return           restrict   E           scope               current    current                     templateUrl   mySubNav html           controller  function  scope                           template for the sub navigation   lt a href    page 1 sub 1  gt Sub Item 1 lt  a gt   lt a href    page 1 sub 2  gt Sub Item 2 lt  a gt   lt a href    page 1 sub 3  gt Sub Item 3 lt  a gt    template for a main page  from primary nav    lt my-sub-nav current  sub  gt  lt  my-sub-nav gt    lt ng-switch on  sub  gt     lt div ng-switch-when  1  gt         lt my-sub-area1 gt  lt  my-sub-area gt     lt  div gt     lt div ng-switch-when  2  gt         lt my-sub-area2 gt  lt  my-sub-area gt     lt  div gt     lt div ng-switch-when  3  gt         lt my-sub-area3 gt  lt  my-sub-area gt     lt  div gt   lt  ng-switch gt    Controller for a main page   from the primary nav   app controller  page1Ctrl   function  scope   routeParams          scope sub    routeParams sub        Directive for a Sub Area  app directive  mySubArea1   function        return           restrict   E           templateUrl   mySubArea1 html           controller  function  scope                  controller for your sub area

User · Answer

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   Here is an example application that uses multiple levels of views nesting  app config function   stateProvider   urlRouterProvider  httpProvider       navigate to view1 view by default  urlRouterProvider otherwise   view1      stateProvider      state  view1             url    view1           templateUrl   partials view1 html           controller   view1 MainController              state  view1 nestedViews             url    view1           views                 childView1     templateUrl   partials view1 childView1 html    controller   childView1Ctrl                 childView2     templateUrl   partials view1 childView2 html   controller   childView2Ctrl                  childView3     templateUrl   partials view1 childView3 html   controller   childView3Ctrl                           state  view2             url    view2                state  view3             url    view3                state  view4             url    view4                 As it can be seen there are 4 main views  view1 view2 view3 view4  and view1 has 3 child views

[javascript] Complex nesting of partials and templates

Examples related to javascript

Examples related to angularjs