Ion-view is not displayed

ionic-v1
1

Hi there,

I am facing a really weird issue. I was following this tutorial. My goal was to implement two ion-view’s which have a reference to each other.

My problem is that when running the app in the browser (Firefox) the localhost-address is being called but nothing is rendered to the screen. There are also no errors, not even warnings in the console output. What is even more weird is that after posting the very same code to codepen it does work without problems, see here. The only difference to the code on my machine are the references to:

  • ionic.css
  • ionic.bundle.js

Those are generated by ionic on my machine and work fine for other projects. I am using Linux (Mint) and Firefox in developement. I will post my entire code but like I said there are no differences to the codepen.

Thanks in advance!

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</title>

    <link rel="manifest" href="manifest.json">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.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="js/controllers.js"></script>   

  </head>
  <body ng-app="starter" > 
    
      <ion-nav-view></ion-nav-view>

         <script id="home.html" type="text/ng-template">
        <ion-view view-title="home">
          <ion-content ng-controller="HomeCtrl">
              <p>Lorem Ipsum bla bla bla…</p>
            <a href="#/setViewer">View my set</a>
          </ion-content>
        </ion-view>
      </script>
          
       <script id="setViewer.html" type="text/ng-template">
        <ion-view view-title="SetViewer">
          <ion-content ng-controller="SliderCtrl">
                      <p>Lorem Ipsum bla bla bla…</p>
            <a href="#/home">Home</a>
          </ion-content>
        </ion-view>
      </script>

  </body>
</html>

controllers.js

angular.module('starter',['ionic'])
.controller('SliderCtrl',['$scope',function($scope){
    }])
    .controller('HomeCtrl',['$scope','$state',function($scope,$state){
   }]);

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'
angular.module('starter', ['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();
    }
  });
})

.config(function($stateProvider,$urlRouterProvider){
    
  $stateProvider
  
    .state('index',{
        url: '/',
        templateUrl: 'home.html',
    controller: 'HomeCtrl'
    })
  
    .state('setViewer',{
        url:'/setViewer',
        templateUrl: 'setViewer.html',
    controller: 'SlideCtrl'
    });
    
    $urlRouterProvider.otherwise('/');
    
});