Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<h3><em>UPDATE:</em> <a href="https://github.com/angular-ui/ui-router">Check out AngularUI's new project to address this problem</a></h3> <hr> <p>For subsections it's as easy as leveraging strings in ng-include:</p> <pre><code>&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; </code></pre> <p>Or you can create an object in case you have links to sub pages all over the place:</p> <pre><code>$scope.pages = { page1: 'section1/subpage1.htm', ... }; </code></pre> <pre><code>&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; </code></pre> <p>Or you can even use <code>$routeParams</code></p> <pre><code>$routeProvider.when('/home', ...); $routeProvider.when('/home/:tab', ...); $scope.params = $routeParams; </code></pre> <pre><code>&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; </code></pre> <p>You can also put an ng-controller at the top-most level of each partial</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload