Question

我想用Ionic构建一个混合移动应用程序。这是我通过plunker进行的首次试用。如你所见，我的plunker显示一个空白页面。我确实检查了问题是什么，但仍未找到。我的目标是在我的应用首次启动时创建登录页面，然后将用户重定向到home-page.html。由于它只是示例，我不想要任何身份验证代码，我只需要让所有这些路由/链接都能正常运行。

请查看我的index.html，如果我将......中的所有代码替换为普通的HTML代码，则会正常显示。

主管部分：

<script src="http://code.ionicframework.com/1.1.1/js/ionic.min.js"></script>
<script src="http://code.ionicframework.com/1.1.1/js/ionic.bundle.min.js"></script>

<link href="http://code.ionicframework.com/1.1.1/css/ionic.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet"/>

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

正文部分

 <script id="templates/login.htm" type="text/ng-template">
   <ion-view ng-controller="LoginCtrl">
     <ion-content>
       <h1>Login page</h1>
       <button type="button" class="btn btn-default" ng-click="logIn()">Login Press</button>
     </ion-content>
   </ion-view>
 </script>

 <script id="templates/home-page.htm" type="text/ng-template">
   <ion-view>
     <ion-content>
       <h1>Home Page</h1>
     </ion-content>
   </ion-view>
 </script>

在我的app.js中，我定义了两个这样的状态：

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

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

  $urlRouterProvider.otherwise('/login');

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

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

app.controller('LoginCtrl', function($scope, $state, $location) {
  $scope.logIn = function() {
  //$state.go('/home');
   alert('Clicked');
  };
});

任何解决方案将不胜感激。感谢。

Answer 1

不确定为什么但是它找不到你的ng-templates，你在'templates / login.html'上得到404。当您使用$stateProvider时，您需要ui-view来显示/显示您的内容。我稍微修改了你的plunker，将模板移动到一个单独的文件并添加了ui-view，现在一切正常，请检查here。

离子框架无法工作

1 个答案: