Question

在index.html中，我已经包含了这些javascripts：

<script src="js/app.js"></script>
<script src="js/controllers.js"></script>

然后我有：

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

在app.js中我有这个：

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
  StatusBar.styleDefault();
}
});
})

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('view.splash', {
    url: '/',
    views: {
        'view.splash': {
            templateUrl: 'templates/view-splash.html',
            controller: 'SplashCtrl'
        }
    }
})

.state('view.login', {
      url: '/login',
      views: {
          'view.login': {
              templateUrl: 'templates/view-login.html',
              controller: 'LoginCtrl'
          }
      }
});

$urlRouterProvider.otherwise('/');

});

最后在controllers.js中我有：

angular.module('starter.controllers', [])

.controller('SplashCtrl', function($scope) {
    $scope.appname = 'Wetters';
})

.controller('LoginCtrl', function($scope) {
    $scope.whereami = 'on login';
})

现在，splash.html看起来像这样：

<ion-view view-title="Splash">
<ion-content>
    This is splash
</ion-content>
</ion-view>

但是，当我使用浏览器访问应用程序时，不会显示任何内容。该页面为空。我真的不明白什么是错的。在离子页面上，他们不会写很多关于空白页面的内容，重点是选项卡或菜单应用程序。当您想要查看多个视图时，您应该在index.html中放置什么？我认为问题可能是我使用：

<ion-nav-view></ion-nav-view>

也许我应该把其他东西放在索引中，但我真的不知道该把它放在那里。

Answer 1

我为你做了一个例子：

Splash and Login example

如果您需要帮助，请致电！

这是代码，如果你在codepen中看不到：

HTML

<html ng-app="ionicApp">

<title>Side Menus</title>

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

<ion-nav-view></ion-nav-view>

<script id="templates/splash.html" type="text/ng-template">
  <ion-view view-title="Splash" ng-controller="SplashCtrl">
    <ion-content>
      Splash
    </ion-content>
  </ion-view>
</script>

<script id="templates/login.html" type="text/ng-template">
  <ion-view view-title="Login" ng-controller="LoginCtrl">
    <ion-content>
       Login
    </ion-content>
  </ion-view>
</script>

JS

angular.module('ionicApp', ['ionic'])

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

  $stateProvider
    .state('splash', {
      url: "/",
      templateUrl: "templates/splash.html"
    })
    .state('login', {
      url: "/login",
      templateUrl: "templates/login.html"
    });

  $urlRouterProvider.otherwise("/");
})

.controller('SplashCtrl', function($scope, $state, $timeout) {
  $timeout(function() {
     $state.go('login');
  }, 3000);
})

.controller('LoginCtrl', function($scope) {

});

空白离子应用中的多个视图

1 个答案: