离子框架无法工作

Question

我想用 Ionic 构建一个混合移动应用程序。这是我通过 plunker 进行的第一次试用。如您所见，我的 plunker 显示了一个空白页。我确实检查了问题是什么，但仍然没有找到。我的目标是在我的应用程序第一次启动时创建一个登录页面，然后用户将被重定向到 home-page.html。由于这只是示例，我不需要任何验证码，我只需要让所有这些 route/links 正常工作即可。

请看一下我的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 到 show/display 您的内容。我已经稍微修改了你的 plunker，将模板移动到单独的文件并添加 ui-view，现在一切正常，请检查 here.

离子框架无法工作

Ionic Framework can't work

angularjs

ionic-framework

ionic

ionic-view