javascript - how to navigate between two pages in ionic -


i working on ionic framework.i dont know how navigate between 2 pages.i trying create login page using ionic using side menu template.here goes code login.html

<ion-view view-title="login"> <ion-header-bar> <h1 class="title">login</h1> </ion-header-bar> <ion-content> <form ng-submit="dologin()">   <div class="list">     <label class="item item-input item-stacked-label">     <span class="input-label">username</span>     <input type="text" placeholder="email or phone">     </label>     <label class="item item-input item-stacked-label">     <span class="input-label">password</span>     <input type="text" placeholder="password">     </label>     <label class="item">     <button class="button button-block button-positive" type="submit">log in</button>     </label>     <label class="item">     <span class="input-label">new user?</span>     <a class="button ion-plus-round" href="#/app/signup">signup</a>         </label>    </div> </form> </ion-content> </ion-view> 

in app.js :-

.state('app.login', {     url: "/login",     views: {       'menucontent': {         templateurl: "templates/login.html",         controller: 'loginctrl'       }     }   })   .state('app.signup', {     url: '/signup',     views: {       'menucontent': {         templateurl: 'templates/signup.html',         controller: 'loginctrl'       }     }   }) 

i put login button in menu.html rest being same

 <ion-item nav-clear menu-close href="#/app/login">           login         </ion-item>    

login button working when click in menu signup button not working in login page.can u me?i new ionic , angularjs

this should help,

<ion-view view-title="login" name="loginview"> <ion-header-bar> <h1 class="title">login</h1> </ion-header-bar> <ion-content> <form ng-submit="dologin()">   <div class="list">     <label class="item item-input item-stacked-label">     <span class="input-label">username</span>     <input type="text" placeholder="email or phone">     </label>     <label class="item item-input item-stacked-label">     <span class="input-label">password</span>     <input type="text" placeholder="password">     </label>     <label class="item">     <button class="button button-block button-positive" type="submit">log in</button>     </label>     <label class="item">     <span class="input-label">new user?</span>     <a class="button ion-plus-round" ui-sref="app.signup">signup</a>         </label>    </div> </form> </ion-content> </ion-view> 

your routing should be,

.state('app.login', {     url: "/login",     views: {       'loginview': {         templateurl: "templates/login.html",         controller: 'loginctrl'       }     }   })   .state('app.signup', {     url: '/signup',     views: {       'signupview': {         templateurl: 'templates/signup.html',         controller: 'loginctrl'       }     }   }) 

your login button,

 <ion-item nav-clear menu-close ui-sref="app.login">           login         </ion-item>  

ui-router used angularjs , ionic. consider using ui-sref attribute. has 1 more advantage, oviously parent state remains bound 'app' when use example, ui-sref="app.login". not use href when dealing angular. have angular option that, ng-href.

add <ion-view view-title="signup" name="signupview"> signup page

hope helps


Comments

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -