2015-11-16 61 views
0

我是Ionic Framework的初学者。我已经将模板加载到索引文件中,但无法从登录屏幕移动到注册屏幕。请看看我的代码,并让我知道什么是错的。在Ionic Framework中导航

的index.html

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <title>IonicApp</title> 
</head> 

<body> 

    <html ng-app="ionicApp"> 

    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
     <title>IonicApp</title> 
     <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
     <script src="lib/ionic/js/ionic.bundle.js"></script> 
     <link href="css/font-awesome.css" rel="stylesheet"> 
     <link href="css/style.css" rel="stylesheet"> 
    </head> 

    <body> 

     <ion-nav-bar> 
      <ion-nav-back-button class="button-icon ion-arrow-left-c"> 
      </ion-nav-back-button> 
     </ion-nav-bar> 

     <ion-nav-view></ion-nav-view> 
    </body> 

    </html> 
    <script src="js/app.js"></script> 
</body> 

</html> 

的login.html

<ion-view view-title="Login" class="login" hide-nav-bar="true"> 
    <ion-content scroll="false"> 
     <div class="content"> 
      <div class="row topgap"> 
       <div class="col-80 col-offset-10"> 
        <div class="fixWidthContainer"> 
         <h2 class="text-center">Welcome to App</h2> 
         <input type="email" placeholder="Email" /> 
         <input type="password" placeholder="Password" /> 
         <br /> 
         <button class="button button-full LoginButton">Login</button> 
         <button class="button button-full LoginButton facebook">Sign up using Facebook</button> 
         <br /> 
         <button class="button button-full LoginButton forgot">Forgot Password?</button> 
         <br /> 
         <a class="button button-full LoginButton forgot" ng-href="templates/signup.html">Sign Up</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </ion-content> 
</ion-view> 

Signup.html

<ion-view view-title="Sign Up" class="login" hide-nav-bar="true"> 
    <ion-content class="has-footer" scroll="false"> 
     <div class="row topgap"> 
      <div class="col-80 col-offset-10"> 
       <div class="fixWidthContainer"> 
        <h2 class="text-center">Welcome to App</h2> 
        <input type="text" placeholder="Full Name" /> 
        <input type="email" placeholder="Email" /> 
        <input type="password" placeholder="Password" /> 
        <br /> 
        <button class="button button-full LoginButton">Sign up</button> 
        <button class="button button-full LoginButton facebook">Sign up using Facebook</button> 
       </div> 
      </div> 
     </div> 
    </ion-content> 
</ion-view> 

个App.js

angular.module('ionicApp', ['ionic']) 

.config(function($stateProvider, $urlRouterProvider) { 

    $stateProvider  
    .state('login', { 
     url: '/login', 
     templateUrl: 'templates/login.html', 
     //controller: 'loginControl' 
    }) 
    .state('signup', { 
     url: '/signup', 
     templateUrl: 'templates/signup.html', 
     //controller: 'signupControl' 
    }) 

    $urlRouterProvider.otherwise('/login'); 
}) // Main Controller Ends 

如果我删除从控制器的意见的页面得到不安。

+0

你'Index.html'就会混乱;你有多个'',''和''标签 – Phil

+0

你可以修复它请 –

+0

不,我认为你应该修复它 – Phil

回答

1

请改变你的index.html这样,

<!DOCTYPE html> 
<html ng-app="ionicApp"> 

<head> 
    <meta charset="UTF-8"> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title>IonicApp</title> 
    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 
    <link href="css/font-awesome.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 
    <script src="js/app.js"></script> 
</head> 

<body> 
    <ion-nav-bar> 
     <ion-nav-back-button class="button-icon ion-arrow-left-c"> 
     </ion-nav-back-button> 
    </ion-nav-bar> 
    <ion-nav-view></ion-nav-view> 
</body> 

</html> 
+0

模板加载...现在我怎么可以加载注册模板到这个视图 –

+0

可以你为此创建一个演示? – Muhsin

+0

让我们在这里聊天https://chat.stackoverflow.com/rooms/95202/navigation – Muhsin