离子路由问题，在链接中显示空白页

Question

I started building ionic app but i have a serious problem with routing! 我开始构建离子应用程序，但是路由存在严重问题！ I have added a button but it links to a blank page and not showing the content of that page! 我添加了一个按钮，但它链接到空白页面，但未显示该页面的内容！

I have 3 files: 我有3个文件：

app.js app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });
})

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

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

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

  // Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-chats.html',
          controller: 'ChatsCtrl'
        }
      }
    })
    .state('tab.chat-detail', {
      url: '/chats/:chatId',
      views: {
        'tab-chats': {
          templateUrl: 'templates/chat-detail.html',
          controller: 'ChatDetailCtrl'
        }
      }
    })

    $stateProvider.state('page', {
  url: '/templates/page',
  views: {
    home: {
      templateUrl: 'templates/page.html',
       controller: 'PageCtrl'
    }
  }
})

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });

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

});

controllers.js controllers.js

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

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

.controller('ChatsCtrl', function($scope, Chats) {
  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //
  //$scope.$on('$ionicView.enter', function(e) {
  //});

  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  }
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})

.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };
});

and tab-chats.html 和tab-chats.html

<ion-view view-title="Chats">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
        <img ng-src="{{chat.face}}">
        <h2>{{chat.name}}</h2>
        <p>{{chat.lastText}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>

        <ion-option-button class="button-assertive" ng-click="remove(chat)">
          Delete
        </ion-option-button>
      </ion-item>
    </ion-list>
     <a class="button icon icon-right ion-chevron-right" href="#/templates/page">Scientific Facts</a>
  </ion-content>
</ion-view>

Answer 1

Since I assume you don't have a <ion-nav-view name="home"> </ion-nav-view> defined anywhere in code. 由于我假设您在代码中的任何地方都没有定义<ion-nav-view name="home"> </ion-nav-view> 。

 .state('page', {
    url: '/templates/page',
    templateUrl: 'templates/page.html',
    controller: 'PageCtrl'
   }
 }

if you have defined it. 如果已定义。 then it should be 那应该是

.state('page', {
  url: '/templates/page',
  views: {
    'home': {       // it should be in quotes.
      templateUrl: 'templates/page.html',
      controller: 'PageCtrl'
   }
}

I know you are new and all, but please first go through the DOCS. 我知道您是新手，但请先通过DOCS。 You need to understand routing completely to do what you want. 您需要完全了解路由才能执行所需的操作。

Answer 2

I met once this issue and it can be very tough to find out what's the problem with the white-screen. 我曾经遇到过这个问题，要找出白屏的问题可能很难。

But follow this check-list and you may get it solved: 但是按照以下清单，您可能会解决它：

1) In your index.html, check that you are not including any inexistent or wrong JS script. 1）在index.html中，检查您没有包括任何不存在或错误的JS脚本。 (The script src tag). （脚本src标签）。

2) Double check the order of your JS files when they are loading in your index.html. 2）仔细检查JS文件加载到index.html中时的顺序。

3) Remove the semicolon (;) at the end of each state URL configuration. 3）在每个状态URL配置的末尾删除分号（;）。

4) Make sure to use a single-quote when you are doing: 4）确保在执行操作时使用单引号：

 $urlRouterProvider.otherwise('app/users');

5) Don't hesitate to comment the code in your controller related to the white-screen URL. 5）不要犹豫，在控制器中注释与白屏URL相关的代码。

6) Finally, try to replace the URL that you want to route by another one that you can see when you are testing your app. 6）最后，尝试将要路由的URL替换为测试应用程序时可以看到的另一个URL。 For example if you get a white-screen when you try to route to /users but you can see /home view. 例如，如果您尝试路由到/ users时出现白屏，但可以看到/ home视图。 replace the $urlRouterProvider.otherwise by /home and see if it displays when you are testing on a real device or emulator. 将$ urlRouterProvider.otherwise替换为/ home，并查看在实际设备或仿真器上进行测试时是否显示。 By doing this, you can already know that it is either the view or the controller of the white-screen routing which contains a possible error. 通过这样做，您已经知道包含可能的错误的是白屏路由的视图或控制器。

Answer 3

This problem is due to a Syntax error or a wrong logic somewhere in your code. 此问题是由于语法错误或代码中逻辑错误所致。 You need to debug the JavaScript code to find out where it is. 您需要调试JavaScript代码以找出其位置。 Here is how you can do it: 这是您可以执行的操作：

1) Let's say for instance you get the white-screen-of-death when you are routing to /user URL. 1）比方说，例如，当您路由到/ user URL时，白屏死机。

2) Comment all the code of the controller related to the /user view. 2）注释与/ user视图相关的所有控制器代码。 You should be able to get rid of the white-screen. 您应该能够摆脱白屏。

3) Uncomment your code and start to add few alert() dialog after each code line in your controller-function scope and search where it block to the white-screen. 3）取消注释您的代码，并开始在控制器功能范围中的每个代码行之后添加一些alert（）对话框，并搜索阻止其进入白屏的位置。

For example, I got the white-screen-of-death because in my view I was doing a ng-repeat on a Array which is dynamically created by one of my function controller and cannot load it before the fetching process was done. 例如，我得到了死亡的白屏，因为在我看来，我正在对由我的功能控制器之一动态创建的数组执行ng-repeat，并且无法在获取过程完成之前加载它。 As soon as that I figured out this issue I start to use ng-init to load the Array and then iterate with ng-repeat. 一旦发现此问题，我便开始使用ng-init加载数组，然后使用ng-repeat进行迭代。 Everything is now fixed! 一切都已修复！

As I said the white-screen you got is more about a logic error happening somewhere in your code. 正如我说的，白屏显示的更多是关于代码中发生逻辑错误的信息。 Hope it does help. 希望对您有所帮助。

离子路由问题，在链接中显示空白页

问题描述

3 个解决方案

解决方案1
2 2015-07-13 05:48:42

解决方案2
0 2015-12-27 22:42:21

解决方案3
0 2015-12-28 13:13:05

离子路由问题，在链接中显示空白页

问题描述

3 个解决方案

解决方案1 2 2015-07-13 05:48:42

解决方案2 0 2015-12-27 22:42:21

解决方案3 0 2015-12-28 13:13:05

解决方案1
2 2015-07-13 05:48:42

解决方案2
0 2015-12-27 22:42:21

解决方案3
0 2015-12-28 13:13:05