Angular UI-Router with named views, nested navbar not rendering

Question

Since updating npm to newest version, I have tried to maintain Angular 1.5.1, UI-Router 0.2.18 but it seems that nothing is rendering.

I need a layout where a top ui-view, nav, remains across several pages (eg, states). The page has a path variable containing the name of the state handed to it, which is the .run function attached.

Code (in .coffee)

angular.module('xxx', ['ui.router'])
.config([
    '$stateProvider',
    '$urlRouterProvider',
    '$locationProvider',
    '$sceProvider',
    ($stateProvider, $urlRouterProvider, $locationProvider, $sceProvider) ->

        $sceProvider.enabled(false)

        $urlRouterProvider.otherwise('/')

        query = {
            name: 'query',
            url: '/query',
            views: {
                'nav@': {
                    templateUrl: 'nav/nav.html'
                },
                'main@query': {
                    templateUrl: 'query/query.html'
                },
                'builder@query': {
                    templateUrl: 'query/query-builder.html'
                },
                'result@query': {
                    templateUrl: 'query/query-result.html'
                }
            }
        }

        $stateProvider.state(query)

        for r in ["a", "b", "c", "d", "e"]
            query2 = {
                name: r,
                url: r,
                views: {
                    'nav': {
                        templateUrl: 'nav/nav.html'
                    }
                }
            }
            $stateProvider.state(query2)
])

.run([
    '$rootScope',
    '$state',
    '$window',
    '$timeout',
    ($rootScope, $state, $window, $timeout) ->
        path = $window.path
        if path
            $state.transitionTo(path)

])

And related template files:

<ng-app="xxx">
<!-- Main base.html-->
    <div ui-view="nav">
<!-- Specific query page -->
    <div ui-view="main">
        <!-- Within query page, nested ui-views -->
        <div ui-view="builder"></div>
        <div ui-view="result"></div>

Any thoughts?

Answer 1

• Here is a documentation using nested views.
• Here is a doc with the difference of route vs ui-route

As loading views nested to components and application, parent components will not load again in the below example the header. So the nav, remains across several pages.

Hope this is helpful.

function statesetup($stateProvider, $urlRouterProvider, $stateParams) {
    console.log('Initiallizing State StartUp...');
    $urlRouterProvider.otherwise('/');
    $stateProvider
        .state('main', {
            url: '/',
            template: 
            `
             <header></header>
              <div ui-view>I am init </div>
            `
        })
        .state('main.a', { url: '/a',template: `<div>hi i am a </div>` })
        .state('main.b', { url: '/b',template: `<div>hi i am b </div>` })

}
function run($rootScope, $location, $state) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        console.log('RootState Changed...');
        var obj = { 
            event: event,
            toState: toState,
            toParams: toParams,
            fromState: fromState,
            fromParams: fromParams
        };
        
        return;
    });
}

angular.module('xxx', ['ui.router'])
    .component('header', { 
      template : `<ul>
        <li ng-click="$ctrl.nav('main.a')">a</li>
        <li ng-click="$ctrl.nav('main.b')">b</li>
       </ul>`,
       controller : function($state) { this.nav = (st) => $state.go(st); }
       })
    .config(['$stateProvider', '$urlRouterProvider', statesetup])
    .run(["$rootScope", "$location", "$state", run])
    ;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>

<div ng-app="xxx">
    <div ui-view></div>
</div>