CODEWITHSUNDEEP
javascripthtmlcssangularjsangular-ui-router
user1883614
user1883614

Reputation: 945

UI-Router and Angularjs: main content isn't being displayed

index.html:

<body>
    <div ui-view="header"></div>
    <div ui-view></div>
    <div ui-view="footer"></div>
    <div id="footer" class="container" />
</body>

app.js:

.state('root', {
    url: '',
    abstract: true,
    views: {
        'header': {
            templateUrl: 'views/header.html',
            controller: 'HeaderCtrl'
        },
        'footer': {
            templateUrl: 'views/footer.html'
        }
    },
    data: {
        requiresLogin: true
    }
}).state('root.home', {
    url: '/',
    views: {
        '@': {
            templateUrl: 'views/home.html',
            controller: 'HomeCtrl'
        }
    },
    data: {
        requiresLogin: true
    }
})

So I have a header and footer that are properly being called and shown on the screen but for some reason, my home.html isn't being shown. For now, the home.html just includes a h1 heading of "Home" in it. It seems like space is being created for the content but it's just not showing it.

Upvotes: 0

Views: 33

Answers (1)

sam
sam

Reputation: 1985

Please try this

.state('root', {
    url: '',
    abstract: true,
    views: {
        'header': {
            templateUrl: 'views/header.html',
            controller: 'HeaderCtrl'
        },
        'main': {
            template: '<div>This is default main content placeholder</div>'
         },
        'footer': {
            templateUrl: 'views/footer.html'
        }
    },
    data: {
        requiresLogin: true
    }
}).state('root.home', {
    url: '/',
    views: {
        'main@': {
            templateUrl: 'views/home.html',
            controller: 'HomeCtrl'
        }
    },
    data: {
        requiresLogin: true
    }
})

and in index.html:

<body>
    <div ui-view="header"></div>
    <div ui-view="main"></div>
    <div ui-view="footer"></div>
    <div id="footer" class="container" />
</body>

Upvotes: 1

Related Questions