我給了這個誠實的鏡頭，並花了數小時試圖通過教程，例子和視頻解決這個問題。我終於在這個毛巾上扔了毛，並且需要一些額外的眼睛。我不能爲我的生活找出爲什麼我的歡迎屏幕沒有顯示在我的索引上！它在頂部顯示「離子空白開始」，在控制檯中顯示「welcome.html」是通過xhr加載的，但從未顯示。下面是我的文件：麻煩空白離子項目（新手）

的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"> 

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

    <script src="cordova.js"></script> 

    <script src="js/app.js"></script> 
    <script src="js/controllers.js"></script> 
    </head> 
    <body ng-app="starter"> 

    <ion-pane> 
     <ion-header-bar class="bar-stable"> 
     <h1 class="title">Ionic Blank Starter</h1> 
     </ion-header-bar> 
     <ion-content> 
     </ion-content> 
    </ion-pane> 
    </body> 
</html>

模板/ welcome.html

<div ng-controller="WelcomeCtrl"> 
    The welcome page 
</div> 
<h1>welcome welcome</h1>

的js/app.js

angular.module('starter', ['ionic', 'starter.controllers']) 

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

.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
    .state('welcome', { 
    url: '/welcome', 
    abstract:true, 
    templateUrl:'templates/welcome.html', 
    controller:'WelcomeCtrl' 
    }) 
    .state('sign-up', { 
    url: '/sign-up', 
    views: { 
     tempalteUrl: 'templates/sign-up.html', 
     controller: 'SignUpCtrl' 
    } 
    }); 

    $urlRouterProvider.otherwise('/welcome'); 
})

JS/controllers.js

angular.module('starter.controllers', []) 

.controller('WelcomeCtrl', function($scope) {})

來源

2015-03-31 Jacksonkr

您是否在控制檯中看到任何錯誤？ – Sam 2015-03-31 18:52:20

不，沒有錯誤。唯一在控制檯顯示的是：'XHR完成加載：GET「http：// localhost：8100/templates/welcome.html」。' – Jacksonkr 2015-03-31 18:56:20

我認爲你需要一個元素而不是）離子含量。您也不需要模板中的ng-controller屬性...控制器使用狀態路由進行設置。 – 2015-03-31 19:00:00

添加ion-nav-view標籤像這樣在您的index.html -

<ion-content> 
    <ion-nav-view></ion-nav-view> 
</ion-content>

這個標籤是必要的，當你使用狀態的。否則，離子將顯示一個空白屏幕，因爲它無法找到渲染模板的位置。

我還沒有測試過這個與你的應用程序，所以你可以試試看，讓我知道。

來源

2015-03-31 19:01:12 Sam

不幸的是沒有任何變化:( – Jacksonkr 2015-03-31 19:55:33

你可以創建一個plnkr，所以我們可以嘗試嗎？ – Sam 2015-03-31 19:56:47

反正你應該使用我說的，因爲它是必要的。問題可能比我猜測的更多。 – Sam 2015-03-31 19:57:23

您應該遵循Sam +的建議，刪除州政府提供商中的abstract:true,行。

抽象除了需要顯示子視圖之外，通常還用於應用程序中的標籤導航。

你也宣告了WelcomeCtrl在HTML模板

<div ng-controller="WelcomeCtrl">

這是不需要的，你有它已經在你的狀態提供配置聲明。

來源

2015-03-31 21:03:28 tobika

麻煩空白離子項目（新手）

的index.html

模板/ welcome.html

的js/app.js

JS/controllers.js

回答

相關問題