CODEWITHSUNDEEP
javascriptandroidangularjscordovaionic-framework
mayur manudhanya
mayur manudhanya

Reputation: 120

Navigation Doesn't work in Ionic

I am developing an Ionic based Android app. Here is the HTML markup:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <link href="css/ionic.app.css" rel="stylesheet">
    <script src="js/app.js"></script>
</head>

<body ng-app="app">
    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-c"></i>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
    <script id="home.html" type="text/ng-template">
        <ion-view view-title="Home">
            <ion-content>
                <p>This is Page 1</p>
                <buton class="button button-positive" ng-click="gotoNextPage()">Go to Page 2</button>
            </ion-content>
        </ion-view>
    </script>
    <script id="page2.html" type="text/ng-template">
        <ion-view view-title="page2">
            <ion-content>
                <p>this is page 2</p>
            </ion-content>
        </ion-view>
    </script>
</body>

</html>

...and following is the AngularJS code: 

var app = angular.module('app', ['ionic', 'ui.router']);
app.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
});
app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('home', {
      url: '/',
      templateUrl: 'home.html',
      controller: 'HomeCtrl'
    })
      .state('page2', {
      url: '/page2',
      templateUrl: 'page2.html',
      controller: 'Page2Ctrl'
    });
    $urlRouterProvider.otherwise('/');
});
app.controller('HomeCtrl', function($scope, $state) {
    $scope.gotoNextPage = function() {
        $state.go('page2');
    };
});
app.controller('Page2Ctrl', function($scope, $ionicHistory) {
    alert('hi');
});

Now, whenever I click on Go To page 2 button, the URL changes from http://localhost/sample/index.html# to http://localhost/sample/index.html#/page2, but the page doesn't navigate, and if I type the URL manually the content of page 2 is not shown.

Upvotes: 0

Views: 365

Answers (3)

LJ.Wizard
LJ.Wizard

Reputation: 605

Use $location instead of $state:

HTML

<button class="button button-positive" ng-click="gotoNextPage('/page2')">Go to Page 2</button>

JS

app.controller('HomeCtrl', function ($scope, $location) {

$scope.gotoNextPage = function (path) {
        $location.path("/page2");
    }
};

Also, it's cleaner to move each view into it's own html file. So your directory structure could look like this:

www/
--- index.html
--- templates/
------- home.html
------- page2.html

Your index.html body would then be:

<body ng-app="app">
    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-c"></i>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
</body>

And your page1.html can be:

<ion-content>
    <p>This is Page 1</p>
        <buton class="button button-positive" ng-click="gotoNextPage('/page2')">Go to Page 2</button>
</ion-content>

And page2.html:

<ion-content>
     <p>this is page 2</p>
</ion-content>

In this case, your states would look like:

.state('home', {
      url: '/',
      templateUrl: 'templates/home.html',
      controller: 'HomeCtrl'
    })

 .state('page2', {
      url: '/page2',
      templateUrl: 'templates/page2.html',
      controller: 'Page2Ctrl'
    });

Upvotes: 0

nabin
nabin

Reputation: 687

Ok then I have made a codepen. I just changed the id to <script id="templates/home.html" type="text/ng-template"> and in the route also for both routes and pages and its working but I cannot explain why. Someone might help with explanation http://codepen.io/nabinkumarn/pen/PZgMwg.

Update:

codepen is working without the changing the id also. You might be using older ionic lib and ionicHistory might be undefined.

Upvotes: 0

AdsHan
AdsHan

Reputation: 465

You can also work the navigation in HTML with the href

For example

<a class="button button-positive" href="#/page2">Go to Page 2</a>

Upvotes: 0

Related Questions