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

2019-10-25 18:34:36 阅读：181 来源： 互联网

标签：angularjs angular-ui-router html javascript

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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