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?

It can't be angular and angularjs - please update your tags. — Dale K, Oct 28 '18 at 22:17

score 0 · Answer 1 · answered Oct 29 '18 at 00:13

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>

Thanks for your help! Unfortunately, I needed something which did not have a main unnamed ui-view -- I needed it to have several named views at the top level, and more named views descending, etc. What I ended up doing resembled this: https://stackoverflow.com/questions/53035561/angular-ui-router-with-named-views-nested-navbar-not-rendering/53037227#53037227 http://plnkr.co/edit/sw0ZleFvwZSdfKiZU19X?p=preview — syds, Oct 30 '18 at 17:43

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

1 Answers1