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…!
