0
私はスプリングブートとangularjsを研究し始めています。ルーティング方法は非常に興味深いと感じましたが、私の状況には理想的なものに気付きましたが、成功できません。
私は、この点で何が間違っているかについての助けや説明をしたいと思います。
ルーティングコンフィグレーションを開始すると、データのUIビューを含むレイアウトを呼び出す抽象状態になり、残りのアプリケーションが表示されます。このレイアウトにはメニュー、ヘッダー、フッターが含まれています。
何らかの理由でlayout.htmlが呼び出されず、画面が空白になります。
ルーティング：
app
.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$on('$stateChangeSuccess', function() {
window.scrollTo(0, 0);
});
FastClick.attach(document.body);
},
])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
// Remove da Url o " ! ", localhost:8080/#!/
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise('/');
// Application routes
$stateProvider
.state('app', {
abstract: true,
templateUrl: 'views/common/layout.html',
})
.state('app.dashboard', {
url: '/',
templateUrl: 'views/dashboard.html',
resolve: {
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
insertBefore: '#load_styles_before',
files: [
'styles/climacons-font.css',
'vendor/rickshaw/rickshaw.min.css'
]
},
{
serie: true,
files: [
'vendor/d3/d3.min.js',
'vendor/rickshaw/rickshaw.min.js',
'vendor/flot/jquery.flot.js',
'vendor/flot/jquery.flot.resize.js',
'vendor/flot/jquery.flot.pie.js',
'vendor/flot/jquery.flot.categories.js',
]
},
{
name: 'angular-flot',
files: [
'vendor/angular-flot/angular-flot.js'
]
}]).then(function() {
return $ocLazyLoad.load('js/controllers/dashboard.js');
});
}]
},
data: {
title: 'Dashboard',
}
})
}]);
Layout.html：
<!-- preloader -->
<preloader class="preloader ng-hide"></preloader>
<!-- /preloader -->
<!-- sidebar panel -->
<div class="sidebar-panel offscreen-left" data-ng-include="'./views/common/sidebar-panel.html'"></div>
<!-- /sidebar panel -->
<!-- content panel -->
<div class="main-panel">
<!-- top header -->
<div class="header navbar" data-ng-include="'./views/common/header.html'"></div>
<!-- /top header -->
<!-- main area -->
<div class="main-content {{$state.current.data.contentClasses}}" data-ui-view="data-ui-view"></div>
<!-- /main area -->
</div>
<!-- /content panel -->
<!-- bottom footer -->
<footer class="content-footer" data-ng-include="'./views/common/footer.html'"></footer>
<!-- /bottom footer -->
<!-- chat -->
<div class="chat-panel" data-ng-class="{'conversation-open': app.layout.isConversationOpen}" data-ng-include="'./views/common/chat-panel.html'"></div>
<!-- /chat -->
<!-- options panel -->
<div class="configuration" data-ng-include="'./views/common/options.html'" data-ng-class="{'active': app.isConfigOpen}"></div>
<!-- /options panel -->
Index.htmlと：
<body data-ng-controller="appController" class="{{ app.layout.sidebarTheme }} {{ app.layout.headerTheme }}">
<!--<div data-ng-include="'./views/common/layout.html'"></div>-->
</body>
<div class="app {{$state.current.data.appClasses}}"
data-ng-class="{'layout-small-menu': app.layout.isSmallSidebar,
'layout-chat-open': app.layout.isChatOpen,
'layout-fixed-header': app.layout.isFixedHeader,
'layout-boxed': app.layout.isBoxed,
'layout-static-sidebar': app.layout.isStaticSidebar,
'layout-right-sidebar': app.layout.isRightSidebar,
'layout-fixed-footer': app.layout.isFixedFooter,
'message-open': app.isMessageOpen}"
data-ui-view="data-ui-view">
</div>
あなたは私のindex.hmlを見れば、コメント行は、そこにありますこの行は私のlayout.htmlへの強制的な呼び出しです。コメントを外す場合はlayout.htmlが2回呼び出され、1つは他のものを受け取りますnt the line画面が再び空に戻ります。 ありがとうございます
ありがとうございます。 – chrylis