IONIC.BUNDLE.JS:13443 error

Am a newbie to ionic and and am trying to create a login page with signup and forgot reset options. This is what i have done so far and am stuck, anyone to help will be very appreciated.

  <body ng-app="starter" style="background-color: #003366 ">

    <ion-pane class="branding">


<ion-content ng-controller="loginCtrl">      
  <div class="login-image">
    <img src="../img/img3.jpg" width="100%" class="padding">
  </div>

<div class="padding">  
   <form name="login-form" ng-submit="doLogin()" >
       <div class="list">
         <label class="item item-input">
           <span class="input-label"></span>
           <input type="text" ng-model="loginData.username" placeholder="Username">
         </label><br>
         <label class="item item-input">
           <span class="input-label"></span>
           <input type="password" ng-model="loginData.password" placeholder="Password">
         </label><br>
          <div style=" text-align: right;">
            <a href="/forgot-password"> Forgot Password ? </a>
          </div><br>
         <div>
           <button class="button button-block button-positive" type="submit" href = "template/dashboard.html">Log in</button>
         </div>
         <br>
       </div>
     </form>
</div>
    </ion-content>
   </ion-pane>
  </body>

i also tried to put the codes in a new file but it doesn’t work, here’s what i mean

index.html

 <body ng-app="starter">

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

LOGIN.HTML

<ion-view>

  <ion-content ng-controller="loginCtrl">
    <div class="padding">  

       <form ng-submit="doLogin()" >
         <div class="list">

           <label class="item item-input">
             <span class="input-label"></span>
             <input type="text" ng-model="loginData.username" placeholder="Username">
           </label><br>

           <label class="item item-input">
             <span class="input-label"></span>
             <input type="password" ng-model="loginData.password" placeholder="Password">
           </label><br>
           
            <div style=" text-align: right;">
              <a href="#/"> Forgot Password </a>
            </div><br>

           <label>
             <button class="button button-block button-positive" type="submit" >Sign In </button> 
           </label>
           <br>

            <div style=" text-align: center;">
              <a href="#/template/createaccount.html">Create Account</a>
            </div>

         </div>
       </form>
    </div>
  </ion-content>

</ion-view>

app,js

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
     .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/tabs.html'
    controller: 'loginCtrl',
      }
  })

    .state('login', {
    url: '/login',
      templateUrl: 'templates/login.html',
      controller: 'loginCtrl',
      cache: false
  })

  
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/login.html')
});

This one give a blank page .
would be happy if someone helps me out.
Thanks.

Hi @iamstyles,

By looking at your code it seems like you are facing the issue because of your routing.

// if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/login.html')

This code is buggy. Try to change it with the following one.

// if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/login')

Feel free to accept this as a solution. You can always click on a heart button.

1 Like

my createaccount.html has no styling as compared to the login.html
all the input boxes are scattered accross the page.What may be the possible cause

It may be the design or CSS related issue. So could you please write your createaccount.html and its routing and controller file, so that I can get the better idea.

createaccount.html

  <ion-content>  
    <form name="createaccountform" class="padding">
     <div>
      <label class="item item-input item-floating-label">
        <span class="input-label">First Name</span>
        <input type="text" name="firstname" placeholder="First Name">
      </label>
      <label class="item item-input item-floating-label">
        <span class="input-label">Last Name</span>
        <input type="text" name="lastname" placeholder="Last Name">
      </label>
      <label class="item item-input item-floating-label">
        <span class="input-label"> Email </span>
        <input type="email" name="email" placeholder="Email">
      </label>
      <label class="item item-input item-floating-label">
        <span class="input-label">Username</span>
        <input type="text" name="Username" placeholder="Username">
      </label>
      <label class="item item-input item-floating-label">
        <span class="input-label">Password</span>
        <input type="password" name="password" placeholder="Password">
      </label>
      <label>
        <button class="button button-block button-positive" type="submit">Create Account </button>
      </label>     
     </div>   
    </form>  
  </ion-content>
  
</ion-view>