Ionic framework “离子模板”文件夹不显示任何内容_Ionic Framework_Ionic

Ionic framework “离子模板”文件夹不显示任何内容

ionic-framework

Ionic framework “离子模板”文件夹不显示任何内容,ionic-framework,ionic,Ionic Framework,Ionic,我最近开始学习离子框架。我创建了以下文件，但结果是空白页。Google Chrome中的开发者工具也没有显示任何内容 app.js var app = angular.module('sheikhsafi', ['ionic']); app.config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state('index', { url: '/', views: {

我最近开始学习离子框架。我创建了以下文件，但结果是空白页。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>

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

模板/home.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>

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


你好

有什么问题吗？

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('/')
});

在您的例子中，您正试图向

主页

视图添加一个模板，当您有一个抽象视图时，该模板是有意义的。看一看，这可能是一个很好的方式来发现一些东西

另外，如果您正在学习ionic，请阅读，并使用其中一个现成的应用程序模板。

谢谢您的回答，但不起作用。还是什么也看不出来。