1

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

请看一下我的index.html,如果我用普通的 HTML 标签替换......内的所有这些代码,它会正常显示。

  1. 头部部分:

    <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>
    
  2. 车身部分

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

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

4

1 回答 1

1

不知道为什么,但似乎找不到您的 ng-templates,您在“templates/login.html”上得到 404。当您使用时,$stateProvider您需要放置ui-view显示/显示您的内容。我已经稍微修改了你的 plunker,将模板移动到单独的文件并添加 ui-view,现在一切正常,请检查这里

于 2015-11-11T07:13:49.827 回答