2015-01-27 7 views
0

내 phonegap 프로젝트에서 Jquery를 대체 할 OnsenUi를 찾고 있습니다.Onsen UI navigator

기본 페이지로 전환 한 후 로그인 페이지를 만들고 싶습니다.

<!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 :

내 HTML 코드가 있음을 수행

(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" }); 
    }; 

}); 
})(); 

하지만 난이 응용 프로그램을 시작할 때 난 단지 두 번째 페이지를 참조하십시오.

Plz 온천의 웹 사이트에서 실제 사례를 제공하지 않기 때문에 저를 도와 줄 수 있습니까? 감사합니다. .

답변

1

네비게이터 내부에 페이지 속성을 추가하여 기본로드 페이지를 추가 할 수 있습니다. 로그인 페이지 이름이 login.html이라고 가정하면, 당신은 index.html을에 로그인을 넣지 마십시오이

<ons-navigator var="myNavigator" page="login.html"></ons-navigator> 

같은 것을 작성해야, 그것은 도움이되기를 바랍니다.

+0

덕분에 다음 코드를 참조하지만 작동하지 않습니다이다. –

+0

그것은 작동해야합니다, index.html 온보드 네비게이터를 제외하고 몸에서 모든 내용을 제거하십시오 –

0

프로젝트 사용 슬라이드 메뉴 템플릿 메인 페이지를 설정하여 그것을 쉽게 할 수있는 경우) = 답변에 대한

<ons-sliding-menu menu-page="menu.html" main-page="login.html" side="left" 
    var="menu" type="reveal" max-slide-distance="90%" swipeable> 
</ons-sliding-menu>