CODEWITHSUNDEEP
javascripthtmlangularjsangular-ui-router
Patrick McDermott
Patrick McDermott

Reputation: 1220

Loading template on page load through state - AngularJS

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:

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>

Upvotes: 1

Views: 290

Answers (1)

Ram_T
Ram_T

Reputation: 8484

Do this

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

Upvotes: 1

Related Questions