我想用 Ionic 构建一个混合移动应用程序。这是我通过plunker进行的第一次试用。如您所见,我的 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
中,我定义了两个这样的状态:
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');
};
});
任何解决方案将不胜感激。谢谢。