View not rendering in Ionic

ionic-v1
1

I am just getting started with Ionic framework to build an Android app. I was able to run the starter projects but I can’t get my code to work.

I am trying to take the user to a login page when the app starts. Here’s the code -

index.html

<body ng-app="starter">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>

  </body>

app.js

// Generated by CoffeeScript 1.9.0
(function() {
  angular.module('starter', ['ionic', 'starter.controllers']).run(function($ionicPlatform) {
    return $ionicPlatform.ready(function() {
      if (window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if (window.StatusBar) {
        return StatusBar.styleDefault();
      }
    });
  }).config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('candidate.login', {
      url: '/candidate_login',
      views: {
        'candidate-login': {
          templateUrl: 'templates/candidate_login.html',
          controller: 'CandidateLoginController'
        }
      }
    });
    return $urlRouterProvider.otherwise('/candidate_login');
  });

}).call(this);

templates/candidate_login.html

<ion-view view-title="Candidate Sign Up">
    <ion-content>

        Hi This is Me

    </ion-content>
</ion-view>

js/controllers.js

// Generated by CoffeeScript 1.9.0
(function() {
  angular.module('starter.controllers', []).controller('CandidateLoginController', function(scope) {});

}).call(this);

When I visit localhost:8100 (ionic serve) I am taken to localhost:8100/#/candidate_login and I just see the header bar without the title or the text Hi This is Me.

Can someone please point to me what I am missing here and how to fix this?

2

i assume you missed the name attribute for ion-nav-view.

<ion-nav-view name="candidate-login"></ion-nav-view>

this is because you defined it like this in your states.

3

I tried adding the name attribute but it still doesn’t work. I get the same output. Is there anything else I might be missing?

PS - I am noob to both Angular as well as Ionic.

4

Also if I put this in index.html

<a href="/#/candidate_login">Click Me</a>

then I see this link but when I click on it, the URL changes but candidate_login.html does not appear. So, I think there must be some problems with the template rendering ? Just guessing.

5

did you put the name attribute to index.html?

6

Yes, my html in index.html looks like -

<body ng-app="starter">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
      -->
    <ion-nav-view name="candidate-login"></ion-nav-view>

  </body>
7

Check if you get any errors in the browser console.

8

can you create a codepen?
then i can help you.

9

Yep… I did that. There are no errors in the browser console. Here’s another finding - The controller function in controllers.js never gets called.

I changed controllers.js to the following -

// Generated by CoffeeScript 1.9.0
(function() {
  angular.module('starter.controllers', []).controller('CandidateLoginController', function($scope) {
    console.log('coming here');
  });

}).call(this);

Nothing is logged to the console.

@kirgg - I will create a codepen and post it. Thanks for the help.

10

Another noob question - How do I create a codepen with multiple HTML and JS files?

11

see this example

12

Here’s my codepen - http://codepen.io/sidchilling/pen/KwLzqX

There seems to be some errors on ionic side - I am not sure what these are. I’m not getting these errors on the console when running the app.

Is this useful? Please let me know if I have make any changes to this?

13

here is a working example

you missconfigured the stateprovider. ask me questions if you have some

1 Like
14

That worked. Many thanks!