Ion-view is not displayed at all

Question

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:

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('/');



});

Answer 1

So the solution was that I mixed up the files.

As you can see in my codepen .module declaration, .config and .controller declarations took place in a single document. Compared to my local structure where those were separated between app.js and controllers.js.

Once I put all those declarations in a single file everything worked fine.

Ion-view is not displayed at all

Sign up