CODEWITHSUNDEEP
angularjscoffeescriptangular-ui-routerionic-framework
SnareChops
SnareChops

Reputation: 13347

Ionic nav view results in blank page

For the life of me I cannot figure out what I am doing wrong here. I have followed the examples EXACTLY and I cannot get this to show up as anything but a blank page...

I have a BARE ionic application that I JUST started. It worked great with the default template that it starts with, but then when I changed the bare minimum code to personalize it to my needs (set a new home page and remove other tabs) all I get now is a blank page...

js/app.coffee

angular.module 'myApp', ['ionic']
.run ($ionicPlatform) ->
  $ionicPlatform.ready ->
    if window.cordova && window.cordova.plugins.Keyboard
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

    if window.StatusBar
      StatusBar.styleDefault();

.config ($stateProvider, $urlRouterProvider) ->
  $stateProvider
  .state 'tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  }
  .state 'tabs.home', {
    url: '/',
    views: {
      'home': {
        templateUrl: 'templates/home.html',
        controller: 'HomeController'
    }
  }
}

$urlRouterProvider.otherwise('/');

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">
  <script src="lib/ionic/js/ionic.bundle.js"></script>
  <script src="cordova.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body ng-app="myApp" animation="slide-left-right-ios7">
  <ion-nav-bar class="bar-stable nav-title-slide-ios7">
    <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
      Back
    </ion-nav-back-button>
  </ion-nav-bar>
  <ion-nav-view></ion-nav-view>
</body>
</html>

templates/home.html

<ion-view title="home">
  <ion-content class="padding">
    Hello
  </ion-content>
</ion-view>

js/controllers.coffee

angular.module 'myApp'
.controller 'HomeController', ($scope) ->

All I get is a blank black page. I have looked at all of the same issues here on SO and cannot see where I am doing anything different. I have also looked all over google and the ionic documentation examples. I cannot see anything I am not doing correctly. No 404 or JS errors in the console.

I have been at this for about 2 hours now with no results.

Upvotes: 1

Views: 3010

Answers (1)

Pablo Miranda
Pablo Miranda

Reputation: 369

Ok I got it to work but with I changed some things

first, your abstract state is 'tab' so change the tabs.home to tab.home and also put a name to the url like this:

.state 'tab.home', {
url: '/home',
views: {
  'home': {
    templateUrl: 'templates/home.html',
    controller: 'HomeController'
}

}

Now your otherwise will be this:

$urlRouterProvider.otherwise('/tab/home');

and be sure to change the name of the ion-nav-view in tabs.html

  <ion-tab title="Home title" icon="icon ion-home" href="#/tab/home">
    <ion-nav-view name="home"></ion-nav-view>

</ion-tabs>

It works for me.

Upvotes: 1

Related Questions