AngularJS ng-click to go to another page in Ionic framework
AngularJS ng-click to go to another page in Ionic framework : We sometimes need ng-click to load another page in ionic framework. Here in this tutorial we are going to create a simple function which will accept the path of the page and will load the page. For this we need the controller service $location. In this this tutorial we will exlplain this with example and online demo.
AngularJS ng-click to go to another page in Ionic framework
You can create the controller function simply as –
Controller part : Js
AngularJS ng-click to go to another page in Ionic framework:
<script>
angular.module('todo', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home1', {
url: "/home1",
templateUrl: "templates/home1.html"
})
.state('profile', {
url: "/profile",
templateUrl: "templates/profile.html"
});
//$urlRouterProvider.otherwise("/tab/home");
})
.controller('MainCtrl', function($scope, $location) {
$scope.goTourl = function(path) {
$location.path(path);
};
});
<script>
|
Call the above function goTourl on ng-click to go to next page. Where path is the template url path you want to load.
Html Part
Here we have create two simple templates and called the function goTourl() to load the template -
:
<body ng-app="todo" ng-controller="MainCtrl">
<ion-header-bar align-title="left" class="bar-positive">
<a class="button icon icon-right ion-chevron-right" ng-click="goTourl('/home1')" href="javascript:void(0);">Home1</a>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/home1.html" type="text/ng-template">
<ion-view view-title="Home1">
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" ng-click="goTourl('/profile')" href="javascript:void(0);">Profile</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/profile.html" type="text/ng-template">
<ion-view view-title="Profile">
<ion-content class="padding">
<h2 class="title">Jhon Doe</h2>
<p>
<a class="button icon icon-right ion-chevron-right" ng-click="goTourl('/home1')" href="javascript:void(0);">Home1 </a>
</p>
</ion-content>
</ion-view>
</script>
</body>
|
If you will run the above example it will produce the output like this -
Advertisements
