首页 > 编程语言> > javascript-角度-无法识别ui路由器状态

javascript-角度-无法识别ui路由器状态

2019-10-25 18:34:36 作者：互联网

我正在开发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内容中吗？

解决方法:

问题出在您的网址上：

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如何设定预设网址

标签：angularjs,angular-ui-router,html,javascript
来源： https://codeday.me/bug/20191025/1930793.html