Question

我正面临着问题。我创建了一个名为“main”的空白页面进行测试。它在离子服务命令中工作正常。但是当我试图效仿时。 “主”页面无法加载。

这里是config

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('main', {
      url: "",
      abstract: true,
      templateUrl: '/templates/main.html'
    })
    .state('main.tabs', {
      url: '/tab',
      abstract: true,
      views : {
        'main-content' : {
          templateUrl: '/templates/tabs.html'
        }
      }
    })
    .state('main.tabs.page1', {
      url: '/tab/page1',
      views : {
        'page1' : {
          templateUrl: 'templates/page1.html',
          controller: 'EventController'
        }
      }
    });
    $urlRouterProvider.otherwise('/tab/page1');
})

这是我的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>
    <script src="js/controller.js"></script>
  </head>
  <body ng-app="starter">
    <ion-nav-bar class="bar-calm">
        <ion-nav-title>
            Test
        </ion-nav-title>
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view>
    Hello World!
    </ion-nav-view>
</html>

这里是main.html

<ion-view name="main-content">
    Hello Hello Hello Hello Hello
</ion-view>

离子导航视图不起作用

0 个答案: