Angular - ui-router 状态无法识别答案

【问题标题】：Angular - ui-router states not recognizedAngular - ui-router 状态无法识别
【发布时间】：2017-09-05 16:08:58
【问题描述】：

我正在开发 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 content？ p>

【问题讨论】：

标签： javascript html angularjs angular-ui-router

【解决方案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/#/ 访问

或者查看here如何设置默认网址

【讨论】：

【解决方案2】：

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

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

【讨论】：