角度/離子應用程序顯示空白頁面，並在控制檯中沒有錯誤

我想讓我的簡單應用程序工作。我想單獨控制器文件，但我總是得到空白頁，並在瀏覽器控制檯中沒有錯誤。應用項目藥結構：角度/離子應用程序顯示空白頁面，並在控制檯中沒有錯誤

www 
- app 
|-controllers 
|--controllers.js 
|--mainController.js 
|--newListController.js 
|-services 
|--listService.js 
|-app.js 
|-index.html 
-templates 
|--main.html 
|--new-list.html

我WWW/index.html的：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.css" rel="stylesheet"> 
    --> 

    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 

    <!-- your app's js --> 
    <script src="app/app.js"></script> 
    <script src="app/controllers/controllers.js"></script> 
    <script src="app/controllers/newListController.js"></script> 
    <script src="app/services/listService.js"></script> 
    </head> 
    <body ng-app="testapp"> 
    <!-- 
     The nav bar that will be updated as we navigate between views. 
    --> 
    <ion-nav-bar class="bar-dark"> 
     <ion-nav-back-button> 
     </ion-nav-back-button> 
    </ion-nav-bar> 

    <ion-nav-view></ion-nav-view> 
    </body> 
</html>

WWW /應用/ app.js：

angular.module('testapp', ['ionic', 'testapp.controllers', 'testapp.services']) 

    .run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
     if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
     cordova.plugins.Keyboard.disableScroll(true); 

     } 
     if (window.StatusBar) { 
     // org.apache.cordova.statusbar required 
     StatusBar.styleDefault(); 
     } 
    }); 
    }) 

    .config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 

    // setup an abstract state for the tabs directive 
     .state('tab', { 
     url: '/tab', 
     abstract: true, 
     templateUrl: 'templates/main.html' 
     }) 

     // Each tab has its own nav history stack: 

     .state('tab.new_list', { 
     url: '/new_list', 
     views: { 
      'tab-dash': { 
      templateUrl: 'templates/new-list.html', 
      controller: 'NewListCtrl' 
      } 
     } 
     }); 

    // if none of the above states are matched, use this as the fallback 
    $urlRouterProvider.otherwise('/new_list'); 

    });

WWW /應用/ controllers.js：

angular.module('testapp.controllers', []);

WWW /應用/ newListController.js：

angular.module('testapp.controllers') 
    .controller('NewListCtrl', function($scope) { 
    alert('aa'); // **its not being executed!!!** 

    });

WWW /模板/ main.html中：

<!-- 
Create tabs with an icon and label, using the tabs-positive style. 
Each tab's child <ion-nav-view> directive will have its own 
navigation history that also transitions its views in and out. 
--> 
<ion-tabs class="tabs-icon-top tabs-color-active-positive"> 

    <!-- Dashboard Tab --> 
    <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash"> 
    <ion-nav-view name="tab-dash"></ion-nav-view> 
    </ion-tab> 

    <!-- Chats Tab --> 
    <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats"> 
    <ion-nav-view name="tab-chats"></ion-nav-view> 
    </ion-tab> 

    <!-- Account Tab --> 
    <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account"> 
    <ion-nav-view name="tab-account"></ion-nav-view> 
    </ion-tab> 


</ion-tabs>

WWW /模板/新list.html ：

<ion-view view-title="Dashboard"> 
    <ion-content class="padding"> 
    <h2>Welcome to Ionic</h2> 
    <p> 
    This is the Ionic starter for tabs-based apps. For other starters and ready-made templates, check out the <a href="http://market.ionic.io/starters" target="_blank">Ionic Market</a>. 
    </p> 
    <p> 
     To edit the content of each tab, edit the corresponding template file in <code>www/templates/</code>. This template is <code>www/templates/tab-dash.html</code> 
    </p> 
    <p> 
    If you need help with your app, join the Ionic Community on the <a href="http://forum.ionicframework.com" target="_blank">Ionic Forum</a>. Make sure to <a href="http://twitter.com/ionicframework" target="_blank">follow us</a> on Twitter to get important updates and announcements for Ionic developers. 
    </p> 
    <p> 
     For help sending push notifications, join the <a href="https://apps.ionic.io/signup" target="_blank">Ionic Platform</a> and check out <a href="http://docs.ionic.io/docs/push-overview" target="_blank">Ionic Push</a>. We also have other services available. 
    </p> 
    </ion-content> 
</ion-view>

任何想法我應該修復那裏？控制檯不顯示任何內容。

來源

2016-01-30 dease

問題是，ui路由器試圖將您的應用重定向到/new_list。但是沒有那個網址的狀態。

要解決您的問題，請將您的app.js中的行$urlRouterProvider.otherwise('/new_list');更改爲$urlRouterProvider.otherwise('/tab/new_list');。

看那ui-router docs：

當使用URL以嵌套的狀態一起路由的默認行爲是孩子各國自己的網址添加到其父狀態的每個的URL。

來源

2016-01-30 22:09:26 pbo

爲什麼 '標籤'？我tgink它應該是'tab/new_list'...無論如何，它並沒有幫助 – dease

對不起，你是對的...這是一個錯字...我試圖重現你的例子，我改變了上面的行後顯示正確的視圖。請看看我製作的[plunker]（https://plnkr.co/edit/fp12gFfu9Axi007VKLzI）。 – pbo

角度/離子應用程序顯示空白頁面，並在控制檯中沒有錯誤

回答

相關問題