Mulgard Mulgard - 4 months ago 38
AngularJS Question

Cant get `ion-nav-view` to work

I tried to implement the

ion-nav-view
from Ionic so i could get a toolbar which is similar to the Android Native Toolbar. For that i followed the instructions described here.

So i created the following index.html:

<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

<!-- Ionic -->
<link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.css">
<script type="text/javascript" src="lib/ionic/js/ionic.bundle.js"></script>

<!-- myApp -->
<link rel="stylesheet" type="text/css" href="css/general.css">
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/factory.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</head>

<body>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>
</body>

</html>


And this app.js:

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

myApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('index', {
url: '/',
templateUrl: 'views/home.html'
}).state('prints', {
url: '/prints',
templateUrl: 'views/photo_prints.html'
}).state('box', {
url: '/box',
templateUrl: 'views/photo_box.html'
}).state('framed', {
url: '/framed',
templateUrl: 'views/photo_framed.html'
}).state('xxl', {
url: '/xxl',
templateUrl: 'views/photo_xxl.html'
}).state('collage', {
url: '/collage',
templateUrl: 'views/photo_collage.html'
}).state('coupon', {
url: '/coupon',
templateUrl: 'views/photo_coupon.html'
});

$urlRouterProvider.otherwise("/");
});


To show an example here the views/home.html:

<script id="home" type="text/ng-template">
<ion-view view-title="Home">
<ion-content ng-controller="HomeController">
<a href="#/prints">Prints</a>
<a href="#/box">Box</a>
<a href="#/book">Book</a>
</ion-content>
</ion-view>
</script>


But when i now start the app all i can see is the following:

enter image description here

The documentation says the following:


Then on app start, $stateProvider will look at the url, see it matches the index state, and then try to load home.html into the
<ion-nav-view>
.


So either the app is not in index state when i start it or i have another mistake. Can someone help me out?

Answer

Your home.html should be plain html, it should not use <script id="home" type="text/ng-template">, Because of ng-template type it will create a template with its URL home & will put it inside $templateCache of angular

Removing script tag from there will fix your issue. I think you have made same mistake for other html too

Home.html

<ion-view view-title="Home">
    <ion-content ng-controller="HomeController">
        <a href="#/prints">Prints</a>
        <a href="#/box">Box</a>
        <a href="#/book">Book</a>
    </ion-content>
</ion-view>
Comments