离子框架无法工作

Question

我想用离子建立混合移动应用程序。这是我第一次通过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'); 
    }; 
}); 

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

Answer 1

不知道为什么，但它接缝，你的ng模板没有找到，你得到404'模板/ login.html'。当您使用$stateProvider时，您需要将ui-view显示/显示您的内容。我有一点点修改你的plunker，移动模板到一个单独的文件并添加ui-view，现在它工作正常，请检查here。