Ion-nav-view does not display my view

ionic-v1
1

Hi,

I am new with ionic and wanted to try the ion-nav-view. Why those files/code does not display my sitesView? What am I missing? Big Thanks!

index.html

<script src="js/app.js"></script>
<body ng-app="myApp">   
            
   <ion-nav-view animation="slide-left-right"></ion-nav-view>
    
</body>

js/app.js

var myApp = angular.module('myApp', ['ionic']);

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

  $stateProvider
    .state('sitesView', {
      url: "/sitesView",
      templateUrl: "Views/sitesView.html",
      controller: "Controllers/SitesViewCtrl"
    });
  
   $urlRouterProvider.otherwise("/sitesView");

});

js/Views/sitesView.html

<ion-view title="Sites">

  <ion-header-bar class="bar-header bar-balanced ">
    <h1 class="title">Sites</h1>
  </ion-header-bar>


  <ion-content>
    <div class="list card">

      <a href="#" class="item item-icon-left item-icon-right">
        <i class="icon ion-home"></i>
        Site #1
        <i class="icon ion-ios7-arrow-right"></i>
      </a>

      <a href="#" class="item item-icon-left item-icon-right">
        <i class="icon ion-home"></i>
        Site #2
        <i class="icon ion-ios7-arrow-right"></i>
      </a>

      <a href="#" class="item item-icon-left item-icon-right">
        <i class="icon ion-home"></i>
        Site #3
        <i class="icon ion-ios7-arrow-right"></i>
      </a>

      <a href="#" class="item item-icon-left item-icon-right">
        <i class="icon ion-home"></i>
        Site #4
        <i class="icon ion-ios7-arrow-right"></i>
      </a>
    </div>
  </ion-content>
</ion-view>
2

I got it working in CodePen for you : http://codepen.io/calendee/pen/bnjrG

Exactly what trouble are you having?

3

nothing is displayed (empty screen)

4

Hi again,

Thank for the CodePen project and I confirm that it is working.

The only difference that I see is you embedded my sitesView.html inside a script into the index.html file. Do you think having the view in a separate file and directory generates my issue?

5

It shouldn’t. As long as your route has the correct path to the template, it should display it.

The other thing I did was include the “SitesViewCtrl”, you may have it in your real code but didn’t display it here.

You might want to include something like this code into your app.run so you can see if there is a state change error.

        $rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
            console.log("stateChangeError:");
            console.log(arguments);
        });
6

Ok, I just copied everything that you did into an empty project and it worked perfectly!

I then moved some codes into single files to reflect what I did at home and it worked as expected.

So, tonight, I will check again which lines are missing but for sure now, I know I have a functional project. I will post my error (for sure it is my fault!) to let other knows what happened.

Big thanks for quick responde!

7

Finally, I had couple of things that did not go very well and don’t know why I did not catch them at the beginning

  1. In the $stateProvider, my “controller” pointed to “Controllers/SitesViewCtrl” instead of “SitesViewCtrl”

  2. In my “Controllers/SitesViewCtrl.js” file, my controller’s name was “SitesViewsCtrl” instead of “SitesViewCtrl”.