Question

这是我的index.html：

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

这是我的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';
                }
            });
        })

如果我登录＆amp;注释掉的根，一切正常。但我需要输入页眉和页脚（文件是正确的），当我尝试root + root.home时，我得到一个空白屏幕，浏览器控制台上也没有错误。

我试图从在线的一些例子中删除（例如this一个），但没有一个正在运作，所以我不知道我做错了什么。

现在我的header / footer.html只是说header / footer.html，而home上面有一个按钮。

添加完整的app.js以防万一。每个html（页脚/标题/主页）都有

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

编辑：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
            }
        })

Answer 1

我相信你的问题是你的路线正在寻找一个名为容器而不是类的视图。

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

因为它找不到名为的视图，所以它不会在视图中插入任何内容。

或者您可以将视图路线更改为：

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

这会告诉它在找到的第一个未命名视图中插入HTML。

您可以找到nested views work with UI-Router here

的细分

假设您的home.html看起来像这样：

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

你的路线应该是

 views: {
                'header@home': {
                    templateUrl: 'home/header.html',
                    controller: 'HeaderCtrl'
                },
                'footer@home': {
                    templateUrl: 'home/footer.html'
                }
            },
            data: {
                requiresLogin: true
            }

如何使用angularjs和ui-router正确显示页眉/页脚？

1 个答案: