Join the Stack Overflow Community
Stack Overflow is a community of 6.9 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

This is my index.html:

<body>
    <div ui-view></div>
</body>

This is my app.js:

angular.module('sample', [ 'auth0', 'ngRoute', 'sample.home', 'sample.header', 'sample.login', 'ui.router', 'angular-storage', 'angular-jwt' ]) .config(function myAppConfig($stateProvider, $urlRouterProvider, $routeProvider, authProvider, $httpProvider, $locationProvider, jwtInterceptorProvider) {

        $stateProvider
            .state('login', {
                url: '/login',
                templateUrl: 'login/login.html',
                controller: 'LoginCtrl'
            }).state('root', {
                url: '/',
                abstract: true,
                views: {
                    'header': {
                        templateUrl: 'home/header.html',
                        controller: 'HeaderCtrl'
                    },
                    'footer': {
                        templateUrl: 'home/footer.html'
                    }
                },
                data: {
                    requiresLogin: true
                }
            }).state('root.home', {
                url: '/',
                views: {
                    '@': {
                        templateUrl: 'home/home.html'
                    }
                },
                data: {
                    requiresLogin: true
                }
            })
        $urlRouterProvider.otherwise('/');

        authProvider.init({
            domain: AUTH0_DOMAIN,
            clientID: AUTH0_CLIENT_ID,
            loginUrl: '/login'
        });

        jwtInterceptorProvider.tokenGetter = function(store) {
            return store.get('token');
        }

        $httpProvider.interceptors.push('jwtInterceptor');
    })
    .run(function($rootScope, auth, store, jwtHelper, $location, $state, $stateParams) {
        $rootScope.$on('$locationChangeStart', function() {
            if (!auth.isAuthenticated) {
                var token = store.get('token');
                if (token) {
                    if (!jwtHelper.isTokenExpired(token)) {
                        auth.authenticate(store.get('profile'), token);
                    } else {
                        $location.path('/login');
                    }
                }
            }
        });
    })
    .controller('AppCtrl', function AppCtrl($scope, $location) {
        $scope.$on('$routeChangeSuccess', function(e, nextRoute) {
            if (nextRoute.$$route && angular.isDefined(nextRoute.$$route.pageTitle)) {
                $scope.pageTitle = nextRoute.$$route.pageTitle + ' | Auth0 Sample';
            }
        });
    })

If I do login & the root that's commented out, everything works fine. But I need to put in a header and footer (the files are correct) and when I try the root + root.home, I get a blank screen with no errors on the browser's console either.

I'm trying to go off of a few examples from online (such as this one) but none are working out so I don't know what I'm doing wrong.

Right now my header/footer.html just say header/footer.html while home has a button on it.

Added the full app.js in case that helps. Each html (footer/header/home) just has 

<h1>Home</h1>
<div ui-view></div>

Edit: index.html

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

app.js

.state('root.home', {
            url: '/',
            views: {
                '@': {
                    templateUrl: 'views/home.html',
                    controller: 'HomeCtrl'
                }
            },
            data: {
                requiresLogin: true
            }
        })
share
up vote 1 down vote accepted

I believe your issue here is your route is looking for a view named container not a class. 

<div ui-view="container"></div>

Since it can't find a view named that it does not insert anything in the view.

Or you can just change your view route to be:

views: {
            '@': {
                templateUrl: 'home/home.html'
            }

Which will tell it to insert that HTML in the first unnamed view it finds.

You can find a break down of how nested views work with UI-Router here

Assuming your home.html looks like this:

<div ui-view="header"></div>
<div ui-view="footer"></div>

your route should be something like 

 views: {
                'header@home': {
                    templateUrl: 'home/header.html',
                    controller: 'HeaderCtrl'
                },
                'footer@home': {
                    templateUrl: 'home/footer.html'
                }
            },
            data: {
                requiresLogin: true
            }
share
    
I made the changes you suggested- still getting a blank screen, still can't figure out why. Edit: added my entire app.js in case there's something wrong along the way. – user1883614 Mar 27 '16 at 2:26
    
What is the HTML of your home.html? Does it call out a view named 'Header' and 'Footer'? I don't see where your ui-views for those view are. Are they suppose to go in index.html or in home.html? Right now it is trying to find <div ui-view='header'/> in the parent view. If these views are in the home.html you need the view to be header@home (find the view named header in the view loaded by the home state). It can get confusing so I suggest you look at the samples in the docs that walk through all this. – ToddB Mar 27 '16 at 2:33
    
Per what you added in the question none of your views are named. NOT NAMED = <div ui-view></div> NAMED = <div ui-view="footer"></div>. If they are not named your route view needs to be @ (meaning put the HTML in the first NOT Named view). If your route has a named view (like you had) then your HTML has to have a matching named view. You can also say "@home" which means put this HTML in the first unnamed view in the HTML the home state loaded. – ToddB Mar 27 '16 at 2:41
    
That was actually it! I never included the ui-view='header' so it couldn't find it. Thank you! – user1883614 Mar 27 '16 at 2:51
    
One more question - my header and footer work but my home content isn't showing up at all. I've updated the code on the bottom to show what I have. – user1883614 Mar 27 '16 at 3:06

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.