Search code examples
javascriptangularjsurl-routingangular-route-segment

Angular nested route not loading properly

Issue #1

I'm trying to customize the angular-route-provider example for myself. I'm trying to implement individually separated tabs for each element in Section 1.

My section #/section1/hs(hs.html) still implements the #/section1/hs/X instead of #/section1/hs/ov for the tab.

You can see the app.js code here.

I've tried using prefs example & other methods but it doesn't work.

Issue #2

Also when I use another angular app path in templateUrl, the page doesn't seems to load properly(only texts are displayed). Is it because one can't call another Angular app in the templateUrl. I'm not sure of this as I'm not an expert in AngularJS.

Below is my code for this example.Any help would be appreciated.

section1.html:

<li ng-repeat="i in items" 
ng-class="{active:('s1.itemInfo' |  routeSegmentStartsWith) && 
('id' | routeSegmentParams) == i}">

<a ng-href="#{{'s1.itemInfo' | routeSegmentUrl: {id: i} }}">{{i}}</a>

</li>

<li ng-class="{active:('s1.hs' | routeSegmentStartsWith)}">
<a ng-href="#{{'s1.hs' | routeSegmentUrl }}">HTML/CSS</a>
</li>

<li ng-class="{active:('s1.prefs' | routeSegmentStartsWith)}">
<a ng-href="#{{'s1.prefs' | routeSegmentUrl }}">Preferences</a>
</li>

hs.html: 

<ul class="nav nav-tabs">
<li ng-class="{active: $routeSegment.contains('ov')}">
<a href="#/section1/hs/ov">Overview</a>
</li>   
</ul>

<div app-view-segment="2" class="anim" No tab selected.> </div>
Solution

  • If you physically type in /section1/hs/ov will it navigate you to the correct page? Your misunderstanding is that by navigating to s1.hs that the tabs should be coming from templates/secion1/hs.html but it is overwritten by .when('/section1/:id', 's1.itemInfo').

    So, until you navigate to a directory higher that exists, in this case section1/hs/ov, the template will not be loaded. /section1/anything/tab1 will result in still loading tab1.html, as the id is not really used for anything other than setting the header name.

    To use a templateUrl to go to a different angular application, one that is not injected as a dependency in your app module declaration, you will need to do a page reload. If you set the templateUrl to /templates/newapp.html and in your html ng-href={{'newapp' | routeSegmentUrl }}"m making sure to omit the #, it should work.