javascript - Angularjs路由模板不显示

Question

我有以下 app.js 文件:

'use strict';

var app = angular.module('app', [
    'auth0',
    'angular-storage',
    'angular-jwt',
    'ui.router',
    'Environment',
    'Api',
    'Profile'

]);


app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('main', {
            url: '/main',
            templateUrl: 'js/modules/App/views/frontpage.html'
        })
        .state('login', {
            url: '/login',
            templateUrl: 'js/modules/User/views/login.html',
            controller: 'LoginCtrl'
        });

    $urlRouterProvider
        .otherwise('/main');
}]);


app.config(['authProvider', '$httpProvider', '$locationProvider', 'jwtInterceptorProvider',
    function myAppConfig(authProvider, $httpProvider, $locationProvider, jwtInterceptorProvider) {
        authProvider.init({
            domain: 'marcrasmussen.eu.auth0.com',
            clientID: 'hphpe4JiceMW8FSA02CN7yOYl5fUaULe',
            loginUrl: '/login'
        });

        authProvider.on('loginSuccess', ['$location', 'profilePromise', 'idToken', 'store',
            function ($location, profilePromise, idToken, store) {

                console.log("Login Success");
                profilePromise.then(function (profile) {
                    store.set('profile', profile);
                    store.set('token', idToken);
                });

                $location.path('/');
            }]);

//Called when login fails
        authProvider.on('loginFailure', function () {
            alert("Error");
        });

        //Angular HTTP Interceptor function
        jwtInterceptorProvider.tokenGetter = ['store', function (store) {
            return store.get('token');
        }];
//Push interceptor function to $httpProvider's interceptors
        $httpProvider.interceptors.push('jwtInterceptor');

    }]);

app.run(['auth', function (auth) {
    // This hooks all auth events to check everything as soon as the app starts
    auth.hookEvents();
}]);

我有以下 profile.js 文件:

angular.module('Profile', [])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('profile', {
            abstract: true,
            url: '/profile'
        })
        .state('profile.index', {
            url: '/index',
            templateUrl: 'js/modules/Profile/views/viewProfile.html'
        })
}]);

在我的 index.html 中，文件列出如下:

<script src="js/modules/Profile/lib/profile.js"></script>
<script src="js/modules/App/lib/app.js"></script>
<script src="js/modules/App/directives/login/login.js"></script>

最后，当然我有我的视口(viewport):

<div class="main" ui-view>

</div>

正如您所见，我的应用程序在路由 /main 上启动，这工作得很好，并且 frontpage.html 正在使用所有 html 进行渲染> 在该文件中。

但是，当我转到 profile.index 或 /profile/index 时，控制台中没有显示错误，并且模板文件 js/modules 中没有 html显示/Profile/views/viewProfile.html。

谁能告诉我为什么会这样？我做错了什么？

Answer 1

我认为问题可能是你的抽象状态。您没有为此状态定义 template 或 templateUrl。另请注意，抽象状态的模板必须包含 ui-view 指令才能填充其子级。

https://github.com/angular-ui/ui-router/wiki/nested-states-%26-nested-views#abstract-state-usage-examples

您可能需要执行以下操作:

    .state('profile', {
        abstract: true,
        url: '/profile',
        template: '<ui-view />
    })