Question

我最近开始学习离子骨架。我创建了以下文件，但结果是空白页。 Google Chrome中的开发者工具中也没有显示任何内容。

app.js

var app = angular.module('sheikhsafi', ['ionic']);

app.config(function ($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('index', {
       url: '/',
       views: {
          home: {
          templateUrl: 'templates/home.html',
       }
     }
  })
  $urlRouterProvider.otherwise('/')
});

app.controller('HomeController', function ($scope, $stateParams) {

})

的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>
</head>
<body ng-app="sheikhsafi">
   <ion-nav-view></ion-nav-view>
</body>
</html>

模板/ home.html做为

<script id="templates/home.html" type="text/ng-template">
   <ion-view title="Home">
      <ion-content>
         <ion-pane>Hi</ion-pane>
      </ion-content>
   </ion-view>
<script>

问题是什么？

Answer 1

Working plunker

app.js 的config部分中的代码错误。正确的是：

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

    .state('app', {
       url: '/',
       templateUrl: 'templates/home.html'
      });

  $urlRouterProvider.otherwise('/')
})

而不是你的：

app.config(function ($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('index', {
       url: '/',
       views: {
          home: {
            templateUrl: 'templates/home.html',
          }
       }
    })
  $urlRouterProvider.otherwise('/')
});

在您的情况下，您尝试添加到home查看模板，这在您拥有抽象视图时有意义。看看ionic-starter-sidemenu，这可能是发现一些事情的好方法。

此外，如果您正在学习离子，请阅读getting started guide，并使用其中一个现成的应用模板。

离子模板文件夹没有显示任何内容

1 个答案: