Angular - ui-router状态未被识别

Question

我正在开发Spring + Angular JS Web应用程序。 项目有以下结构：

app.state.js

(function() {
'use strict';

angular
    .module('ftnApp')
    .config(stateConfig);

stateConfig.$inject = ['$stateProvider'];

function stateConfig($stateProvider) {
    $stateProvider.state('app', {
        abstract: true,
        views: {
            'navbar@': {
                templateUrl: 'app/layouts/navbar/navbar.html',
                controller: 'NavbarController',
                controllerAs: 'vm'
            }
        }
    });
}})();

app.module.js

(function() {
'use strict';

angular
    .module('ftnApp', [
        'ngStorage',
        'ngResource',
        'ngCookies',
        'ngAria',
        'ngCacheBuster',
        'ngFileUpload',
        'ui.bootstrap',
        'ui.bootstrap.datetimepicker',
        'ui.router',
        'infinite-scroll',
        'angular-loading-bar'
    ]);})();

home.state.js

 (function() { 'use strict'; angular .module('ftnApp') .config(stateConfig); stateConfig.$inject = ['$stateProvider']; function stateConfig($stateProvider) { $stateProvider.state('home', { parent: 'app', url: '/', data: { authorities: [] }, views: { 'content@': { templateUrl: 'app/home/home.html', controller: 'HomeController', controllerAs: 'vm' } } }); } })(); 

的index.html

 <!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>FTN</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <!-- build:css content/css/vendor.css --> <!-- bower:css --> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css"> <!-- endinject --> <!-- endbuild --> <!-- build:css content/css/main.css --> <link rel="stylesheet" href="content/css/main.css"> <!-- endbuild --> </head> <body ng-app="ftnApp" ng-strict-di> <page-ribbon></page-ribbon> <div ui-view="navbar" ng-cloak></div> <div class="container"> <div class="well" ui-view="content"> <!-- Angular views --> </div> <div class="footer" ng-cloak> <p data-translate="footer">This is your footer</p> </div> </div> <!-- build:js app/vendor.js --> <!-- bower:js --> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/json3/lib/json3.js"></script> <script src="bower_components/messageformat/messageformat.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-aria/angular-aria.js"></script> <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> <script src="bower_components/angular-cache-buster/angular-cache-buster.js"></script> <script src="bower_components/angular-cookies/angular-cookies.js"></script> <script src="bower_components/ngstorage/ngStorage.js"></script> <script src="bower_components/angular-loading-bar/build/loading-bar.js"></script> <script src="bower_components/angular-resource/angular-resource.js"></script> <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script> <script src="bower_components/bootstrap-ui-datetime-picker/dist/datetime-picker.js"></script> <script src="bower_components/ng-file-upload/ng-file-upload.js"></script> <script src="bower_components/ngInfiniteScroll/build/ng-infinite-scroll.js"></script> <!-- endinject --> <!-- endbuild --> <!-- build:js app/app.js --> <!-- inject:js --> <script src="app/app.module.js"></script> <script src="app/app.state.js"></script> <script src="app/services/auth/register.service.js"></script> <script src="app/services/auth/principal.service.js"></script> <script src="app/services/auth/auth.session.service.js"></script> <script src="app/services/auth/auth.service.js"></script> <script src="app/services/auth/account.service.js"></script> <script src="app/layouts/navbar/navbar.controller.js"></script> <script src="app/home/home.state.js"></script> <script src="app/home/home.controller.js"></script> <script src="app/components/login/login.service.js"></script> <script src="app/components/login/login.controller.js"></script> <!-- endinject --> <!-- endbuild --> </body> </html> 

问题是状态无法识别。当我转到http：// localhost：8080时，没有任何反应（'这是你的页脚'只显示）。 据我所知，它应该将navbar.html加载到ui-view navbar和home.html到ui-view内容 ？

Answer 1

问题出在您的网址上：

function stateConfig($stateProvider) {
        $stateProvider.state('home', {
            parent: 'app',
            url: '/', //Change to ''
            data: {
                authorities: []
            },
            views: {
                'content@': {
                    templateUrl: 'app/home/home.html',
                    controller: 'HomeController',
                    controllerAs: 'vm'
                }
            }
        });

如果URL ='/'那么您应该通过http：// localhost：8080 /＃/访问

或者在此处查看如何创建默认URL

Answer 2

如果您指定默认页面，那么应该没有问题。

function config($urlRouterProvider) {
    // If user goes to a path that doesn't exist, redirect to '/'
    $urlRouterProvider.otherwise('/');
}