Loading template on page load through state - AngularJS

Question

In my application, I want the nested view list-patents.htm to load when the index page loads.

My main nav is on my index.htm, with two nav items transactions and patents.

If you were to click on patents, a further two sub-menu items would load: list patents and add patents. Here you can then navigate to list-patents.htm which I want to act as the landing view.

I have tried two methods:

$urlRouterProvider.otherwise(""); which I couldn't get to work.
This method (which is in my script) loaded the nested view, but failed to load its parent nest view, the nav menu.

.state("index", { url: "", templateUrl: "templates/list-patents.htm", })

I want to keep the navigation in its own view, as I don't see the point of creating duplicate code.

Any ideas how on page load, it loads the patent-nav.htm and it's nested view list-patents.htm? Any help would be greatly appreciated

app.js

var app = angular.module('myApp', ['ngRoute', 'angularMoment', 'ui.router']);


app.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function($stateProvider, $locationProvider, $urlRouterProvider ) {

    $stateProvider
    .state("index",
    {
        url: "",
        templateUrl: "templates/list-patents.htm",
    })
    .state("patents", {
        url: "/patents",
        templateUrl: "templates/patent-nav.htm",
        controller: "patentCtrl"
    })
    .state("patents.list", {
        url: "/list-patents",
        templateUrl: "templates/list-patents.htm",
        controller: "patentCtrl"
    })
    .state("patents.add", {
        url: "/add-patents",
        templateUrl: "templates/add-patent.htm",
        controller: "patentCtrl"
    })

Views

index

<main class="container">
    <nav>
        <ul>
            <a ui-sref="patents">Patents</a>
            <a ui-sref="transactions">Transactions</a>
        </ul>
    </nav>  
    <section ui-view>

    </section>
</main>

patent-nav

<nav>
    <ul>
        <li><a ui-sref="patents.list">List patents</a></li>
        <li><a ui-sref="patents.add">Add patent</a></li>
    </ul>
</nav>

<div ui-view></div>

list-patents

<div>
//just a load of content
</div>

Ram_T · Accepted Answer · 2017-05-31 11:52:16Z

1

Do this

$urlRouterProvider
                  .when('', '/parents/list-patents')
                  .when('/', '/parents/list-patents')
                  .otherwise('/parents/list-patents');

answered May 31, 2017 at 11:52

Ram_T

8,50411 gold badges42 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patrick McDermott Over a year ago

Thank you for your time! Worked

Collectives™ on Stack Overflow

Loading template on page load through state - AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related