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
Post a Comment