Router between 2 html page Ionic


#1

hello , I find a problem during the redirected between 2 html pages, page index.html and home.html page

index.html

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
    
        <link rel="manifest" href="manifest.json">
    
        <!-- un-comment this code to enable service worker
        <script>
          if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('service-worker.js')
              .then(() => console.log('service worker installed'))
              .catch(err => console.log('Error', err));
          }
        </script>-->
    
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
    
        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->
    
        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="lib/ionic/js/angular/angular.js"></script>
        <script src="lib/ionic/js/angular-ui/angular-ui-router.js"></script>
    
        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>
        <!-- script home.js
        <script src="js/home.js"></script> -->
    
        <!-- your app's js -->
        <script src="js/app.js" ></script>
      </head>
      <body ng-app="myApp">
    
        <ion-pane>
        <!--  <ion-header-bar class="bar-stable">
            <h1 class="title">Ionic Blank Starter</h1>
          </ion-header-bar>
          <ion-content>
          </ion-content> --><div ng-view></div>
        </ion-pane>
      </body>
    </html>

code home.html

  <head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>AngularJS & Firebase Web App</title>
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">


    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">



  </head>

  <body >

  <ion-view view-title="home">
    <ion-content >


    <div class="container">
    <div class="jumbotron" style="padding-bottom:0px;">
      <h2>AngularJS & Firebase App!</h2>
    </div>
    <form class="form-signin" role="form">
      <input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
      <input type="password" class="form-control" placeholder="Password" required="">
      <label class="checkbox">
        <a href="#"> Sign Up</a>
      </label>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>

  </div>

    </ion-content>

  </ion-view>


  </body>

code app.js

  var app = angular.module('myApp', ['ui.router','ionic'])
  
  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      if(window.cordova && window.cordova.plugins.Keyboard) {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  
        // Don't remove this line unless you know what you are doing. It stops the viewport
        // from snapping when text inputs are focused. Ionic handles this internally for
        // a much nicer keyboard experience.
        cordova.plugins.Keyboard.disableScroll(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })
  
  app.config(['$stateProvider', function($stateProvider,$urlRouterProvider) {
    $stateProvider.state("home",{ url : "/home", templateUrl : "templates/home.html" });
  }]);
  
  
  app.controller('HomeCtrl', [function() {
  
  }]);

help me to find the solution and thank you