CODEWITHSUNDEEP
angularjsionic-frameworkngroute
Thomas
Thomas

Reputation: 33

Blank screen ionic

When running my code I get a blank screen with console error:

GET http://localhost/templates/home.html 404 (Not Found)

resulting in a blank screen. The code is run into a lamp server (localhost).

My 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 href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/index.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/ngCordova/dist/ng-cordova.js"></script>

    <!-- ngRoute error-->
    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular-route/angular-route.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>

    <script src="Scripts/jquery-1.11.2.js"></script>
    <script src="Scripts/URLDecode.js"></script>
    <script src="Scripts/serverInfo.js"></script>
    <script src="Scripts/moment.js"></script>

    <!-- Location of user for displaying nearby restaurants from database
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>-->            


    <!--
    <script>
            localStorage.clear();
    </script>
    -->

  </head>

  <body ng-app="starter">

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

    <script id="templates/home.html" type="text/ng-template">
      <ion-side-menus enable-menu-with-back-views="false">
        <ion-side-menu-content>
          <ion-nav-bar class="bar-energized">
          <ion-nav-back-button>
          </ion-nav-back-button>

          <ion-nav-buttons side="left">
              <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
              </button>
          </ion-nav-buttons>

          </ion-nav-bar>
          <ion-nav-view name="sidebarContent"></ion-nav-view>
        </ion-side-menu-content>

        <ion-side-menu side="left">
          <ion-header-bar class="bar-energized">
            <h1 class="title">Testing</h1>
          </ion-header-bar>
          <ion-content>
            <ion-list>
              <ion-item nav-clear menu-close ng-click="startRanging()">
              </ion-item>
            </ion-list>
          </ion-content>
        </ion-side-menu>
      </ion-side-menus>
    </script>

    <script id="templates/rangemodal.html" type="text/ng-template">

    <ion-modal-view>
      <ion-header-bar class="bar-energized">
        <h1 class="title">Beacon values</h1>
        <div class="buttons">
          <button class="button button-clear" ng-click="closeModal()">Close
          </button>
        </div>
      </ion-header-bar>

      <ion-content>
      <ion-refresher spinner="lines" on-refresh="refreshData()">
      </ion-refresher>

      <div class="list">

      <label class="item item-input item-select">
        <div class="input-label">
          Select Major value
        </div>
          <select ng-model="selectedBeacon"
              ng-options="beacon.major for beacon in data">
              <option>--</option>
      </select>
      </label>

      </div>

      <ion-list>
        <ion-item>Minor: {{selectedBeacon.minor}}</ion-item>
        <ion-item>Proximity: {{selectedBeacon.proximity}}</ion-item>
        <ion-item>RSSI: {{selectedBeacon.rssi}}</ion-item>
      </ion-list>

      </ion-content>

    </ion-modal-view>

    </script>

<script id="templates/tester.html" type="text/ng-template">
  <ion-view view-title="tester">
    <ion-content>
      test
    </ion-content>
  </ion-view>
</script>

  </body>

</html>

Inside my app.js config:

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('home', {
    url: "/home",
    abstract: true,
    templateUrl: "templates/home.html",
    controller: 'TestmenuController'
  })
 .state('home.tester', {
 url: "/tester",
 templateUrl: "templates/tester.html",
 controller: 'TestController'

});

$urlRouterProvider.otherwise('/tester');

})

TesmenuController:

    .controller('TestmenuController', function($scope, $ionicModal, BeaconData) {

  $scope.data = BeaconData.getData();

  $scope.startRanging = function () {
    BeaconData.startRanging();    
    $scope.data = BeaconData.getData();
  };

  $scope.refreshData = function () {
    //BeaconData.resetData();
    $scope.data = BeaconData.getData();
    $scope.$broadcast('scroll.refreshComplete');
    if($scope.data == '') {
      alert('No data available for region:\n01122334-4556-6778-899a-abbccddeeff0');
    }
  };

  $scope.select = function (major) {
    alert('click');
    $scope.index = data.major.indexOf(major);
    alert(index);
  };

  $ionicModal.fromTemplateUrl('rangemodal.html', {
    scope: $scope,
    animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal = modal;
    });
    $scope.openModal = function() {
     $scope.modal.show();
    };
    $scope.closeModal = function() {
        $scope.modal.hide();
    };
    // Cleanup the modal when we're done with it!
    $scope.$on('$destroy', function() {
          $scope.modal.remove();
    });

})

My whole app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
ionic.Platform.isReady = true;
angular.module('starter', ['ionic', 'ngCordova', 'ngRoute'])


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

    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      //StatusBar.styleDefault();
      StatusBar.hide();
    }
    //Put on device's bluetooth
    cordova.plugins.locationManager.isBluetoothEnabled()
      .then(function(isEnabled) {
        if(!isEnabled) {
          cordova.plugins.locationManager.enableBluetooth();
        }
      })
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('home', {
    url: "/home",
    abstract: true,
    templateUrl: "templates/home.html",
    controller: 'TestmenuController'
  })

.state('home.tester', {
url: "/tester",
templateUrl: "templates/tester.html"

});

$urlRouterProvider.otherwise('/tester');

})

.service('BeaconData', function() {

  var data = [];

  this.startRanging = function () {

    var beaconRegion = {

      uuid: '01122334-4556-6778-899a-abbccddeeff0',
      identifier: '89'
    };

    var delegate = new cordova.plugins.locationManager.Delegate();

    cordova.plugins.locationManager.setDelegate(delegate);

    var beaconRegion = new cordova.plugins.locationManager.BeaconRegion(
    beaconRegion.identifier, beaconRegion.uuid);

    /* Every time startRanging() is called, this section will continue to update every split second
    if a beacon is detected for given beaconRegion*/
    delegate.didRangeBeaconsInRegion = function (pluginResult) {

      var result = JSON.stringify(pluginResult);

      var obj = JSON.parse(result);

      for(i = 0; i < obj.beacons.length;i++) {
        data[i] = obj.beacons[i];
      }

    };

    cordova.plugins.locationManager.startRangingBeaconsInRegion(beaconRegion)
    .fail(console.error)
    .done();

  };

  this.resetData = function () {
    data = '';
  }

  this.getData = function () {
    return data;
  };

})

.service('Database', function () {


})
/*
.service('GeolocationService', function() {

  var geocoder;

  this.getLocation = function() {

  geocoder = new google.maps.Geocoder();
  navigator.geolocation.getCurrentPosition(onGetCurrentPositionSuccess, onGetCurrentPositionError);

  var onGetCurrentPositionSuccess = function(position) {
      alert("lat: " + position.coords.latitude);
      alert("long: " + position.coords.longitude);
      var lat = parseFloat(position.coords.latitude);
      var lng = parseFloat(position.coords.longitude);


      var latlng = new google.maps.LatLng(lat, lng);

      geocoder.geocode({'latLng': latlng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (results[0]) {
            var arrAddress = results[0].address_components;
            // iterate through address_component array
            $.each(arrAddress, function (i, address_component) {
              if (address_component.types[0] == "locality") {
                console.log(address_component.long_name); // city
                alert(address_component.long_name);
                return false; // break
              }
            });
          } else {
            alert("No results found");
          }
        } else {
          alert("Geocoder failed due to: " + status);
        }
      });
    }

    var onGetCurrentPositionError = function(error) { 
      console.log("Couldn't get geo coords from device");
    } 
  }
})
*/
.controller('CheckAvailabilityController', function($scope, BeaconData) {


})

.controller('StartController', function($scope, BeaconData) {

})

.controller('TestmenuController', function($scope, $ionicModal, BeaconData) {

  $scope.data = BeaconData.getData();

  $scope.startRanging = function () {
    BeaconData.startRanging();    
    $scope.data = BeaconData.getData();
  };

  $scope.refreshData = function () {
    //BeaconData.resetData();
    $scope.data = BeaconData.getData();
    $scope.$broadcast('scroll.refreshComplete');
    if($scope.data == '') {
      alert('No data available for region:\n01122334-4556-6778-899a-abbccddeeff0');
    }
  };

  $scope.select = function (major) {
    alert('click');
    $scope.index = data.major.indexOf(major);
    alert(index);
  };

  $ionicModal.fromTemplateUrl('rangemodal.html', {
    scope: $scope,
    animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal = modal;
    });
    $scope.openModal = function() {
     $scope.modal.show();
    };
    $scope.closeModal = function() {
        $scope.modal.hide();
    };
    // Cleanup the modal when we're done with it!
    $scope.$on('$destroy', function() {
          $scope.modal.remove();
    });
    // Execute action on hide modal
    //$scope.$on('modal.hidden', function() {
    // Execute action
    //});
          // Execute action on remove modal
    //$scope.$on('modal.removed', function() {
          // Execute action
    //});
})

Upvotes: 1

Views: 3010

Answers (3)

Anshul Kalra
Anshul Kalra

Reputation: 198

Can you check which version of Cordova you are using. 

cordova -v

if the version is >4.3, try adding the whitelist plugin 

ionic plugin add cordova-plugin-whitelist

The new cordova blocks the http request and this error shows up when the application is trying to make http requests.

<access origin="*" />

add the access origin to your config.xml file.

This should solve your problem

Upvotes: -1

Non
Non

Reputation: 8589

OK lets see

this is how your html should look like

<html ng-app="ionicApp">
  <head>
    //links and stuff
  </head>

  <body>

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

    <script id="templates/home.html" type="text/ng-template">
      <ion-side-menus enable-menu-with-back-views="false">
        ...
      </ion-side-menus>
    </script>

    <script id="templates/tester.html" type="text/ng-template">
      <ion-view view-title="TESTER">
        <ion-content>
          ...
        </ion-content>
      </ion-view>
    </script>
  </body>
</html>

here the Angular part

angular.module('ionicApp', ['ionic'])

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

  .state('home', {
    url: "/home",
    abstract: true,
    templateUrl: "templates/home.html",
    controller: 'TestMenuCtrl'
  })

  .state('home.tester', {
    url: "/tester",
    views: {
      'menuContent': {
        templateUrl: "templates/tester.html",
        controller: 'TesterCtrl'
      }
    }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/home/tester');
})

.controller('TestMenuCtrl', function($scope, $ionicModal, $timeout) {
  // Form data for the login modal
  $scope.loginData = {};

})

.controller('TesterCtrl', function($scope) {
  $scope.oneAndtwo = [
    { title: 'one', id: 1 },
    { title: 'two', id: 2 },
    { title: 'three', id: 3 },
    { title: 'four', id: 4 },
    { title: 'five', id: 5 },
    { title: 'six', id: 6 }
  ];
});

and here a working example http://jsbin.com/diliru/1/edit?html,js,output

remember to do ionic serve in your terminal, be aware of this: <ion-nav-view name="menuContent"></ion-nav-view> should be the same name that you should put here

  .state('home.tester', {
    url: "/tester",
    views: {
      'menuContent': {
        templateUrl: "templates/tester.html",
        controller: 'TesterCtrl'
      }
    }
  });

remember to mention you dependencies.

I don't know what else. Just let me know If I could help.

Upvotes: 2

sameera207
sameera207

Reputation: 16629

Ionic has its own server to test your application. AFIK, it's not designed to run on as a normal web site/server. Running as a server is just a tool that they give to build the app more rapidly

So to run the app,

cd to your app folder

run ionic serve

it should start at localhost:8100 by default

read more on their getting started

Upvotes: 0

Related Questions