IONIC.BUNDLE.JS:13443 error

ionic-v1
#1

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.

#2

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
#3

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

#4

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.

#5

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>