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>

最后当然我有我的观点端口：

<div class="main" ui-view>

</div>

正如您可以告诉我的应用程序从路由/main开始，这非常正常，frontpage.html正在使用该文件中的所有html呈现。

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

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

Answer 1

我认为问题可能是你的抽象状态。您没有为此状态定义templateUrl或ui-view。另请注意，抽象状态的模板必须包含.state('profile', { abstract: true, url: '/profile', template: '<ui-view /> })指令才能填充其子项。

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

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

Db.Value.AfterTable.find

Angularjs路由模板未显示

1 个答案: