How can I have a default sub view show up when I am using Angular ui-router?

angular-ui-router, angularjs

Solution

You can put whatever you want inside a `ui-view`, and that'll be the default content.

Once you load a different view, it'll replace the default content:

<div data-ng-controller="TestPageController">
    <div class="grid_3">
        Menu stuff here
    </div>
    <div class="grid_9">
        <div data-ui-view="page-content">
            <div ng-include="/Content/app/test/partials/home.html"></div>
        </div>
    </div>
</div>

Problem

I have the following states defined: ``` var test = { name: 'test', url: '/test', views: { 'page': { templateUrl: '/Content/app/test/partials/page.html', }, } } var testContent = { name: 'test.content', parent: 'test', url: '/:content', views: { 'page-content': { templateUrl: function (stateParams) { var isNumber = !isNaN(parseFloat(stateParams.content)); return isNumber ? '/Content/app/test/partials/detail.html' : '/Content/app/test/partials/home.html' } } } } ``` In my HTML I have: ``` <article class="container_12" > <div data-ui-view="page"></div> </article> ``` In my page.html I have: ``` <div data-ng-controller="TestPageController"> <div class="grid_3"> Menu stuff here </div> <div class="grid_9"> <div data-ui-view="page-content"></div> </div> </div> ``` What I would like to know is if there is a way for my application to have the home.html display inside the page-content when I just select the url: /test

Original source