的index.html

Question

我已经给了这个诚实的镜头，花了好几个小时试图通过教程，示例和视频来解决这个问题。我终于在这个上面扔了毛巾，需要一些额外的眼睛。我不能为我的生活弄清楚为什么我的欢迎屏幕没有显示在我的索引上！它显示了＆＃34;离子空白开始＆＃34;在顶部和控制台中，您会看到＆＃34; welcome.html＆＃34;通过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) {})

Answer 1

在index.html中添加ion-nav-view这样的标记 -

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

使用状态时，此标记是必需的。否则，离子显示空白屏幕，因为它无法找到呈现模板的位置。

我没有通过您的应用程序对此进行测试，因此您可以尝试一下并告诉我。

Answer 2

您应该遵循Sam的建议+删除州提供商中的abstract:true,行。

Abstract除了要显示之外还需要子视图，通常这用于应用程序中的标签导航。

您还在html模板中声明了WelcomeCtrl

<div ng-controller="WelcomeCtrl">

因为您已在状态提供程序配置中声明它，所以不需要这样做。

空白离子项目的麻烦（新手）

的index.html

模板/ welcome.html

JS / app.js

JS / controllers.js

2 个答案: