angularjs $ stateProvider狀態摘要和彈簧啓動

我開始研究spring引導和angularjs，我發現路由方法非常有趣，但我注意到一個會適合我的情況，但我不能成功。

我想就這一點上的錯誤提供一些幫助或解釋。

當我開始我的路由配置時，我創建一個抽象狀態來調用包含data-ui-view的佈局，它將顯示我的應用程序的其餘部分。這種佈局有菜單，頁眉，頁腳...

但由於某種原因，它不會叫我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被調用兩次，一個接收另一個，如果我comme nt線路屏幕再次返回空。謝謝

來源

2017-06-02 user11890

我看不出這有什麼都做的服務器端件。 – chrylis

打了我很難，我發現是什麼問題。閱讀角的文章，我奉命將UI數據的UI視圖屬性應該總是充滿：

<div data-ui-view="data-ui-view">

如果我這樣做，我的索引。

的解決辦法是去除屬性值：

<div data-ui-view="">

謝謝

來源

2017-06-02 20:52:31 user11890

angularjs $ stateProvider狀態摘要和彈簧啓動

回答

相關問題