2017-02-15 11 views
0

은 내가 하나의 로그인 응용 프로그램을 만들 https://ide.monaca.mobionsenUI AngularJS UI가 제대로 작동하지 않습니까?

에 onsenUI AngularJS와 1 개 최소 템플릿을 생성하지만, UI 디자인은 제대로

작동하지 않습니다 이것은 내 index.html을 응용

<!DOCTYPE HTML> 
<html ng-app="myApp"> 
<head> 
    <script src="components/loader.js"></script> 
    <link rel="stylesheet" href="components/loader.css"> 
    <link rel="stylesheet" href="css/style.css"> 
    <script src="js/login.js"></script> 

</head> 
<body ng-controller="loginCtrl"> 
    <ons-navigator var="myNavigator" page="login.html"></ons-navigator> 
</body> 
</html> 

이 내 로그인입니다. HTML 응용 프로그램

<ons-page> 

    <ons-toolbar> 
    <div class="center">My App</div> 
    </ons-toolbar> 

    <div style="text-align: center; margin-top: 30px;"> 
    <p> 
     <input id="email" modifier="underbar" type="text" placeholder="Email" float ng-model="user.email"> 
    </p> 
    <p> 
     <input id="password" modifier="underbar" type="password" placeholder="Password" float ng-model="user.password"> 
    </p> 
    <p> 
     <input id="domain" modifier="underbar" type="text" placeholder="Domain" float ng-model="user.domain"> 
    </p> 
    <p style="margin-top: 30px;"> 
     <ons-button ng-click="submitLogin()">Sign in</ons-button> 
    </p> 
    </div> 

</ons-page> 

이 내 login.js

var myApp = angular.module("myApp", ['onsen']); 

myApp.controller('loginCtrl', function($scope) { 

    $scope.submitLogin = function() { 
    alert("hello")  
    myNavigator.pushPage('page1.html'); 
    }; 
}); 

내가 어떤 일을하고있을 때 어떤 프로 브런이든 내가이 일에 참으로 도와 줘라. 그리고 두 번째 페이지에서 한 가지 더 의미 page1.html 나는 tabbar가 필요해 어떻게 Thankyou 넣을 수

답변

0

아마 당신의 프로젝트에 온천 UI 라이브러리를 추가하지 않았다. 페이지 상단의 "구성"탭을 클릭하고 "JS/CSS 구성 요소 관리"를 선택한 다음 Onsen UI 구성 요소의 "추가"버튼을 클릭하십시오. 설치할 버전을 묻습니다. 그냥 최신 버전을 선택하고 "설치"를 클릭하십시오. 설치 후 나타나는 대화 상자에 각도 라이브러리를 포함하도록 상자를 선택하십시오.

ons-tabbar에 관해서는 ons-tabbar와 그 탭을 추가 할 별도의 html ons-page 파일을 생성하십시오. 그런 다음 탐색기에서 "page1.html"을 누르는 대신 ons-tabbar가있는 html을 누릅니다.

체크 아웃 TabBar의 추가하는 방법에 대한 페이지 : http://tutorial.onsen.io/?framework=angular1&category=reference&module=tabbar

참고 : 나는 당신이 대신 <ons-input>의, 그냥 평범한 <input>을 사용하고 나타났습니다. 이 경우 추가 한 '한정자'속성은 <ons-input>에서만 작동하므로 작동하지 않습니다.