Nav-view won't populate after upgrade to 0.9.19

ionic-v1
1

Hey there,

I just upgraded my app to 0.9.19 and upgraded the routing to the new state based routing system in favor of the old routeprovider based system. Problem is, my app won’t render anymore: when I inspect the source, the html of the template file is loaded, but it’s wrapped in a <script> tag that has CSS display: none applied to it. Which I’m guessing means something is wrong with my controller / view setup.

I’ve followed the guide at http://ionicframework.com/docs/angularjs/controllers/view-state/.
Console gives no error messages, and I can verify the controller gets loaded by using console.log('test'); within the controller and it shows up in the console.

Using this in my index.html:

<body ng-app="starter">

  <!-- The nav bar that will be updated as we navigate -->
  <nav-bar animation="nav-title-slide-ios7" 
           type="bar-positive" 
           back-button-type="button-icon" 
           back-button-icon="ion-arrow-left-c"></nav-bar>

  <!-- where the initial view template will be rendered -->
  <nav-view animation="slide-left-right"></nav-view>

</body>

app.js:

angular.module(
	'starter', [
		'ionic', 
		'ngRoute', 
		'ngAnimate', 
		'ngSanitize',
		'rn-lazy',
		'ngTouch',
		'ui.router'
	])

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

  $stateProvider
    .state('home', {
      url: "/home",
      templateUrl: "templates/app.html",
      controller: 'AppCtrl'
    })

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

  $stateProvider
    .state('home', {
      url: "/home",
      templateUrl: "templates/app.html",
      controller: 'AppCtrl'
    })

});

And app.html (in /templates/app.html):

<script id="home.html" type="text/ng-template">
  <view title="'Home'">
    <content has-header="true" padding="true">
      <p>Example of Ionic tabs. Navigate to each tab, and
      navigate to child views of each tab and notice how
      each tab has its own navigation history.</p>
      <p>
        <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
      </p>
    </content>
  </view>
</script>

This leads to:

Help…!

2

Did some further digging: when I remove the script tag in the partial the view does show up.
Any idea why it doesn’t work as documented in http://ionicframework.com/docs/angularjs/controllers/view-state/?

3

I’m also have problems with the new UI Router implementation, I think it’s mainly me though…

Is this kind of what you’re after? (I don’t know why the back button isn’t displaying)

4

I managed to get the basics working by removing the script tags that preceded the template code in the documentation examples (e.g.: <script id="home.html" type="text/ng-template">). Once I removed that I was good to go.

Now to get the state parameters going.

5

Sorry I didn’t get to this earlier, but glad you figured out the template stuff. You could use an inline template, or an external template, and this is all apart of Angular templates.

Also, our seed app may have some better code to reference:

I realize we’re kinda slim on helping describe how to wire it all up, after the ng-conf that’s one of our goals is to document the angular side of things better.

2 Likes
6

No worries! Thanks for the great framework so far :slight_smile: