在离子状态下设置默认视图

我被困在一些非常简单的东西上，似乎无法弄清楚我做错了什么。我在离子中创建了一个空白项目，并希望将第一个视图加载为默认主屏幕。当我在浏览器中运行它时，我正盯着一个空白屏幕。在离子状态下设置默认视图

我的代码如下：

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' 
var app = angular.module('starter', ['ionic']) 

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

     // Don't remove this line unless you know what you are doing. It stops the viewport 
     // from snapping when text inputs are focused. Ionic handles this internally for 
     // a much nicer keyboard experience. 
     cordova.plugins.Keyboard.disableScroll(true); 
    } 
    if(window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }); 
}) 

app.config(function ($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/') 

    $stateProvider.state('home_screen', { 
     url:'/', 
     templateUrl: 'home_screen.html' 
    }) 
})

home_screen.html

<ion-pane> 
    <ion-header-bar class="bar-stable"> 
     <h1 class="title">Home Screen</h1> 
    </ion-header-bar> 
    <ion-content> 
     <div class="spacer" style="height: 100px;"></div> 
     <div class="col col-33 col-offset-33"> 
      <button class="button button-block button-balanced">Play</button> 
     </div> 
     <div class="spacer" style="height: 100px;"></div> 
     <div class="col col-33 col-offset-33"> 
      <a class="button button-outline button-block button-balanced" href="#/app/about">About</a> 
     </div> 
    </ion-content> 
</ion-pane>

的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="js/app.js"></script> 
</head> 

<body ng-app="starter"> 
    <ion-nav-view></ion-nav-view> 
</body> 

</html>

home_screen.html将工作得很好，当我将它包含在index.html中，但在我尝试将它设置为默认视图时不起作用。我试图从这里教程如下：

http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/

任何帮助，将不胜感激。

来源

2016-01-13 zic10

其实你必须在你的index.html文件中取消ion-nav-view的注释。你不必给这个名字甚至。试着在你的index.html文件添加此：

... 
<body ng-app="starter"> 
    <ion-nav-view></ion-nav-view> 
</body> 
...

要开始使用离子我还建议看看其他首发项目，如标签或sidemenu其描述here。

来源

2016-01-13 22:46:56 andreaspfr

我试过你的建议，但默认屏幕仍然是空白的。还有什么我可能会做错的？我已经看过两个选项卡和侧边菜单，我试图模仿他们，但我仍然失去了一些东西。 – zic10

日志中的任何错误消息？ – andreaspfr

是的，当我打开铬开发工具时，我得到“无法加载资源：服务器响应状态404”http：// localhost：8101/home_screen.html – zic10

在离子状态下设置默认视图

回答

相关问题