Navigation between pages in ionic and angularjs mobile app

ionic-v1
1

Hi,

  I am very new in ionic angularja world. started to work on very simple thing but stuck.

  My requirement,

  I am creating an login page and a register page. if user click on register button from 
  login page, user will navigate to register page.

  here is my login page 

  <body ng-app="starter"
       class="platform-android platform-cordova platform-webview">

     <ion-header-bar align-title="center" class="bar-positive">
         <h1 class="title">Log In</h1>
     </ion-header-bar> 
     <ion-content> Some content! </ion-content> 
     <ion-footer-bar align-title="center" class="bar-positive right">
          <div class="button-bar">
             <a class="button button-clear" href="#/register">Register</a>
          </div>	 
     </ion-footer-bar>

here is my app.js.

angular.module(‘starter’, [‘ionic’])

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
});
})

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

$stateProvider

.state(‘user.register’, {
url: ‘/register’,
views: {
‘page-register’: {
templateUrl: ‘templates/register.html’
}
}
})

});

i have a register.html page in template folder.

Please help me to resolve this navigation issue.

Thanks in advance.

Ajoy

2

Hi …

        Any help on this basic please..

Thanks
Ajoy

3

Hi Ajoysinha,

Its not clear what your question is but from what I gather is that you are having problems navigating from your login page to your registration page. If that is the case

make the following change to your code

<a class="button button-clear" href="#/user/register">Register</a>

Let know if that resolved your navigation issue

4

Thanks Cmaden,

                     As it is very basic and I am very new on this, hence clarity problem injected.

                     Although, you have shown me right path. It works.

                     But, not clear why #/user/register not  #/register only. May be this is also very basic.
                     it will be really helpful if you can give me a pointer to understand this basic with clarity.
                     I will go through those. 

                     Thanks in advance.

Thanks
Ajoy

5

Hi Ajoysinha,
If I go through the basic URL Routing that ionic us

.state('user', {
        url: "/users",
        templateUrl: 'users.html'
    })

this will give your #user
However,

 .state('user.register', {
            url: "/register",
            templateUrl: 'register.html'
        })

this will give your #user/register

You have to include the base you have specified and your /register after it in this case your base is user with url of #user

I have this makes sense, for further information on how URL Routing work in IONIC look into https://github.com/angular-ui/ui-router/wiki