離子框架無法工作

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。