我正在寻找学习OnsenUi来替代我的phonegap项目中的Jquery。
我要创建一个登录页面，然后切换到主页。
为此，有我的html代码：
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>My App</title>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="styles/topcoat-mobile-onsen-blue.css">
<link rel="stylesheet" href="styles/app.css"/>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="MyController as ctrl">
<ons-navigator title="Navigator" var="myApp.myNavigator">
<ons-page id="connexion.html">
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<ons-row style="margin-top: 50px;">
<ons-col align="left">
<div>
<section style="padding: 8px">
<p> Identifiant </p>
<input class="text-input" id="id-input" ng-model="ctrl.id" style="display: block; width: 100%">
</section>
<section style="padding: 8px">
<p> Password </p>
<input type="password" class="text-input" id="password-input" ng-model="ctrl.password" style="display: block; width: 100%">
</section>
<section>
Resté connecté
<ons-checkbox ng-model="ctrl.answer" ng-true-value="true" ng-false-value="false" ng-init="ctrl.answer='true'">
</ons-checkbox>
</section>
<section style="padding: 8px">
<ons-button modifier="large" style="display: block; width: 100%" ng-click="ctrl.connexion()">Connexion</ons-button>
</section>
</div>
</ons-col>
</ons-row>
</hr>
identifiant = {{ctrl.id}}
</hr>
password = {{ctrl.password}}
</ons-page>
</ons-navigator>
<ons-template id="app.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 2</div>
</ons-toolbar>
<h1>APP</h1>
</ons-page>
</ons-template>
</body>
</html>
`
而我的js：
(function(){
var mbdGlobal = new Object();
var app = angular.module('myApp', ['onsen.directives']);
app.controller('MyController', function($scope, $window){
this.id = "";
this.password = "";
this.connexion = function(){
mbdGlobal.id = this.id;
mbdGlobal.password = this.password;
mbdGlobal.stayConnected = JSON.parse(this.answer);
alert(JSON.stringify(mbdGlobal));
//myNavigator.pushPage("app.html", { animation: "slide" });
};
});
})();
但是，当我启动该应用程序时，我只会看到第二页。
请您帮我一下，因为Onsen的网站没有给出真实的例子。
谢谢。
最佳答案
您可以通过在导航器内部添加属性页面来添加默认的加载页面。假设您的登录页面名称为login.html，则应编写如下内容
<ons-navigator var="myNavigator" page="login.html"></ons-navigator>
不要将登录名放在index.html中，希望对您有所帮助。