Ionic を使用してハイブリッド モバイル アプリを構築したいと考えています。これが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では、次のような 2 つの状態を定義しました。
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');
};
});
どんな解決策でも大歓迎です。ありがとう。