Angular UI-Router

Question

I am using angular pre-defined shell to build a basic working poc for my new project. Basic template is loaded by using ng-include in the index.html. But other views are linked to menu components using ui-router. Everything in the code side is perfect still I am having problem in loading the views when clicking on the menu items after running the shell.

I added the href tags to check if that works, but still no use.Could someone help me with this.

<li ng-class="{active: $state.includes('app')}">
    <a href="">
        <i class="fa fa-desktop"></i> 
        <span class="nav-label">{{ 'APPVIEWS' | translate }}</span>                          
        <span class="pull-right label label-primary">SPECIAL</span>
    </a>
    <ul class="nav nav-second-level" ng-class="{in: $state.includes('app')}">
        <li ui-sref-active="active">
            <a ui-sref="app.contacts">Contacts</a>
        </li>   
    </ul>
</li>

My states in config file are defined as :

function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider, IdleProvider, KeepaliveProvider) {
    IdleProvider.idle(5); 
    IdleProvider.timeout(120);

    $urlRouterProvider.otherwise("/dashboards/dashboard_1");

    $ocLazyLoadProvider.config({
        debug: false
    });

    $stateProvider
        .state('app', {
        abstract: true,
        url: "/app",
        templateUrl: "views/common/content.html",
    })
    .state('app.contacts', {
        url: "/contacts",
        templateUrl: "views/contacts.html",
        data: { pageTitle: 'Contacts' }
    })
}

Teliren Teliren · Accepted Answer · 2015-07-16T14:08:40

If the "app" route is going to be abstract you can take the url off of it

the app.contacts could have a parent of the app route

$stateProvider
    .state('app', {
    "abstract": true,
    templateUrl: "views/common/content.html",
})

So when i set up my "app" route as abstract and wanted all my other views to be nested inside of that route i defined a named view that they would go into

so my "app" template would be like

// html stuff here for app
<div ui-view="content"></div>
// more html stuff here

then my app.contacts route would look like

.state('app.contacts', {
    parent: "app"
    url: "/contacts",
    views: {
        "content": {
            templateUrl: "views/contacts.html"
        }
    },
    data: { pageTitle: 'Contacts' }
})

Angular UI-Router

1 Answers