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

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

angularjs

Angularjs 离子路由问题，在链接中显示空白页,angularjs,ionic,Angularjs,Ionic,我开始构建ionic应用程序，但我有一个严重的路由问题！我添加了一个按钮，但它链接到一个空白页面，没有显示该页面的内容我有3个文件： 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 (als

我开始构建ionic应用程序，但我有一个严重的路由问题！我添加了一个按钮，但它链接到一个空白页面，没有显示该页面的内容

我有3个文件：

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');

});

和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>


{{chat.name}
{{chat.lastText}
删除

因为我假设在代码中的任何地方都没有定义

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

如果你已经定义了它。那就应该是

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

我知道你是新来的，但请先看一下文件。你需要完全理解路由才能做你想做的事

我曾经遇到过这个问题，要找出白色屏幕的问题可能非常困难

但遵循此检查表，您可能会得到解决：

1）在index.html中，检查是否包含任何不存在或错误的JS脚本。（脚本src标记）

2）当JS文件加载到index.html中时，请仔细检查它们的顺序

3）删除每个状态URL配置末尾的分号（；）

4）在执行以下操作时，请确保使用单个报价：

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

5）请毫不犹豫地对控制器中与白屏URL相关的代码进行注释

6）最后，尝试将要路由的URL替换为测试应用程序时可以看到的另一个URL。例如，当您尝试路由到/用户，但可以看到/主视图时，会出现白色屏幕。将$urlRouterProvider.or替换为/home，并查看在真实设备或模拟器上测试时是否显示。通过执行此操作，您可以知道可能存在错误的是白屏路由的视图或控制器。

此问题是由于代码中的语法错误或错误逻辑造成的。您需要调试JavaScript代码以找出它的位置。以下是您如何做到这一点：

1）比方说，当您路由到/user URL时，您会看到白色的死亡屏幕

2）注释与/user视图相关的控制器的所有代码。你应该能够摆脱白色屏幕

3）取消对代码的注释，并开始在控制器函数作用域中的每个代码行之后添加几个alert（）对话框，然后在白屏上搜索代码阻塞的位置

例如，我得到了死亡的白色屏幕，因为在我看来，我正在一个数组上执行ng重复，该数组是由我的一个函数控制器动态创建的，在抓取过程完成之前无法加载它。一旦我解决了这个问题，我就开始使用nginit加载数组，然后使用ngrepeat进行迭代。现在一切都修好了

正如我所说，您得到的白色屏幕更多地是关于代码中某个地方发生的逻辑错误。希望它确实有用

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