我正在开发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内容?
答案 0 :(得分:2)
答案 1 :(得分:2)
如果您指定默认页面,则应该没有问题。
function config($urlRouterProvider) {
// If user goes to a path that doesn't exist, redirect to '/'
$urlRouterProvider.otherwise('/');
}