angular.module('BeautyCare', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.Store', {
url: "/Store",
views: {
'Store-tab': {
templateUrl: "templates/Store.html",
controller: 'StoreTabCtrl'
}
}
})
.state('tabs.SalonGalary', {
url: "/SalonGalary",
views: {
'SalonGalary-tab': {
templateUrl: "templates/SalonGalary.html",
controller :'SalonGalaryCtrl'
}
}
})
.state('tabs.Profile', {
url: "/Profile",
views: {
'Profile-tab': {
templateUrl: "templates/Profile.html"
}
}
})
.state('tabs.Alerts', {
url: "/Alerts",
views: {
'Alerts-tab': {
templateUrl: "templates/Alerts.html"
}
}
});
$urlRouterProvider.otherwise("/tab/Store");
});
.controller('StoreTabCtrl', function($scope,$http,$log) {
var items =null;
$log.debug('start debug');
var url="http://open.api.ebay.com/shopping?GLOBAL-ID=EBAY-IN&QueryKeywords=Iphone&ResponseEncodingType=JSON";
url+="&appid=API_ID&callback=JSON_CALLBACK._0";
url+="&callname=FindPopularItems&version=713?callback=JSON_CALLBACK";
$log.debug($http.jsonp(url)
.success(function(data) {
items=data;
console.log(items);
})
.error(function(data) {
//alert("ERROR");
}));
});
<html >
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Beauty Care</title>
<!-- MyBeauty , BeautyCare,BeautyEye,BeautyShop,BeautySalon !-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
<script src="js/Service.js"></script>
<script src="js/Controllers.js"></script>
<!-- <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLSOMXsw_sxOlRpyBj16g5iaewLHDpSes&libraries=places"></script>
-->
</head>
<body ng-app="BeautyCare">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="" icon="ion-ios-cart" href="#/tab/Store">
<ion-nav-view name="Store-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="" icon="ion-navicon-round" href="#/tab/SalonGalary">
<ion-nav-view name="SalonGalary-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="" icon="ion-android-person" ui-sref="tabs.Profile">
<ion-nav-view name="Profile-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="" icon="ion-ios-bell" ui-sref="tabs.Alerts">
<ion-nav-view name="Alerts-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/Store.html" type="text/ng-template">
<ion-view view-title="BeautyCare Store" cache-view="false">
<ion-content class="padding" >
<ion-list>
<ion-item class="item-icon-right" ng-repeat="item in items">
<h1>{{item.TimeStamp }}</h1>
<!--<p>{{ item.title}}</p> !-->
<i class="icon ion-chevron-left icon-accessory"></i>
<ion-option-button class="button-positive" ng-click="viewFriend(viewFriend(data.idfriends))">View Friend</ion-option-button>
<ion-option-button class="button-assertive" ng-click="deleteFriend(remove(data.idfriends))">Delete</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<script id="templates/SalonGalary.html" type="text/ng-template">
<ion-view view-title="BeautyCare Salon Galary" cache-view="false">
<ion-content class="padding">
</ion-content>
</ion-view>
</script>
<script id="templates/Profile.html" type="text/ng-template">
<ion-view title="My Profile" cache-view="false">
<ion-content>
</ion-content>
</ion-view>
</script>
<script id="templates/Alerts.html" type="text/ng-template">
<ion-view view-title="My Alerts" cache-view="false">
<ion-content class="padding">
</ion-content>
</ion-view>
</script>
</body>
</html>
</body>
</html>
I tried to use $http.get with no luck , the code showing unexpected error.
i appreciate any help to solve this issue or workaround to use $http.get . I tried different examples but still not getting issues solved. Thanks in advance
Let's take a closer look at the URL you are attempting to send to the eBay API:
http://open.api.ebay.com/shopping?GLOBAL-ID=EBAY-IN&QueryKeywords=Iphone&
ResponseEncodingType=JSON&appid=Mawsem77f-2832-4be9-93d8-e257a245be3&
callback=JSON_CALLBACK._0&callname=FindPopularItems&version=713?callback=JSON_CALLBACK
I counted three problems with this:
the version parameter has an invalid value: 713?callback=JSON_CALLBACK. This parameter appears to require a numeric value. Note that this part of the URL is already in the query string, so the ? here won't be interpreted as the start of the query string or as an argument separator.
If callback=JSON_CALLBACK at the end of the URL is supposed to be another URL parameter name and value, then you have specified the callback parameter with two different values. You only need to specify this parameter once, and you also need to make up your mind about which value to use.
As you are making a JSONP request you need to specify the name of a function to wrap the returned JSON in. However, according to the eBay API documentation, you are using the wrong parameter for the name of the callback function. If the parameter callback has the value true, the response will be wrapped in a call to a function named _cb_FindPopularItems. Other values for this parameter appear to be ignored. It seems you want to use the callbackname parameter instead. So, try removing both callback parameters from your URL and adding either callbackname=JSON_CALLBACK or callbackname=JSON_CALLBACK._0 (it's not clear which one you intend here).
This also explains the syntax error: responses to JSONP requests are assumed to be executable JavaScript but the response you are getting is actually some JSON data.
I have not tested this, but I would hope the following URL (wrapped for readability) would work. You may need to add the ._0 suffix to the callback name:
http://open.api.ebay.com/shopping?GLOBAL-ID=EBAY-IN&QueryKeywords=Iphone&
ResponseEncodingType=JSON&appid=Mawsem77f-2832-4be9-93d8-e257a245be3&
callbackname=JSON_CALLBACK&callname=FindPopularItems&version=713
Finally, please consider changing your eBay app ID. You've now posted it on the public internet and anyone who views this question can now use it. I've never used eBay nor its API before, so I'll leave it up to you to figure out how to do this.
Related
errors
controllers.js:6 Uncaught SyntaxError: Unexpected token (
ionic.bundle.js:26794 Error: [ng:areq] Argument 'MenuCtrl' is not a function, got undefined
I am working to create an cross platform app with help of Ionic framework using word press as back end, Following are the files with codes
Index.html
<!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">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<!-- Cordova is bootstrapped by ionic-platform-web-client, uncomment this if you remove ionic-platform-web-client... -->
<!-- <script src="cordova.js"></script> -->
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view>
</ion-nav-view>
</body>
</html>
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'templates/menu.html',
controller: 'MenuCtrl'
})
.state('main.contentRecent', {
url: '/contentRecent',
templateUrl: 'templates/menuContent.html',
controller: 'MenuCtrl'
})
.state('main.postDetail', {
url: '/postDetail',
templateUrl: 'templates/postDetail.html',
controller: 'PostCtrl'
});
$urlRouterProvider.otherwise('/main/contentRecent');
})
Controllers.js
angular.module('starter')
.controller( 'MenuCtrl', function ($http, $scope){
$scope.categories = [];
$http.get("http://bijay.sahikura.com/api/get_category_index/").t
function(data){
$scope.categories = data.data.categories;
console.log(data);
}, function ( err){
console.log(err);
}
})
.controller('PostCtrl', function() {
//hello
})
Menu.html
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-view>
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title"> खुला सरकार </h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="category in categories" menu-close href ="#">
<span> {{category.title}} </span> <span class="badge badge-assertiv"> १</span>
category.post_count}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
It looks like you want to reuse the same controller within your config as well as define a controller 'MenuCtrl' that is visible within the html in the app. In that case you are better off defining the function separately and reusing the function name wherever you need that function. For eg.
function menuCtrlFunc(http, scope) {
$scope.categories = [];
// other stuff
}
angular.module('starter').controller('MenuCtrl', menuCtrlFunc);
angular.module('starter').config(
//....
//....
controller: menuCtrlFunc,
);
HTH
I have an ui-router structure:
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'menu.html',
})
.state('app.parent', {
url: '/parent',
views: {
'menuContent': {
templateUrl: 'parent.html',
}
}
})
.state('app.parent.next', {
url: '/next',
views : {
'next' : {
templateUrl: 'next.html'
}
}
})
parent.html contains ui-view and link to the app.parent.next
<ion-view view-title="Parent">
<ion-nav-buttons side="secondary">
<button class="button" ng-click="$state.go('app.parent.next')">
next »
</button>
</ion-nav-buttons>
<ion-content has-header="true">
<h1>Parent</h1>
<div ui-view></div>
</ion-content>
</ion-view>
It works just fine, however if I start the app directly in app.parent.next state the header and template are not there.
http://michalstefanow.com/ionic.html#/app/parent - works just fine
http://michalstefanow.com/ionic.html#/app/parent/next - next nested-view is loaded, it's just the ion-nav-buttons defined in the parent are not there
(provided link to hosted version because to reproduce it is essential to start in a nested state)
<!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 data-require="ionic#1.2.4" data-semver="1.2.4" rel="stylesheet" href="https://code.ionicframework.com/nightly/css/ionic.css" />
<script data-require="ionic#1.2.4" data-semver="1.2.4" src="https://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script>
angular.module('starter', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'menu.html',
})
.state('app.parent', {
url: '/parent',
views: {
'menuContent': {
templateUrl: 'parent.html',
}
}
})
.state('app.parent.next', {
url: '/next',
views : {
'next' : {
templateUrl: 'next.html'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/parent');
})
</script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
<script type="text/ng-template" id="menu.html">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar style="background-color: transparent !important;">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/parent">
Parent
</ion-item>
<ion-item menu-close href="#/app/parent/next">
Directly into next
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script type="text/ng-template" id="parent.html">
<ion-view view-title="Parent">
<ion-nav-buttons side="secondary">
<button class="button" ui-sref='app.parent.next'>next »</button>
</ion-nav-buttons>
<ion-content has-header="true">
<h1>Parent</h1>
<h1>Parent</h1>
<h1>Parent</h1>
<div ui-view="next"></div>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="next.html">
<h1>Next</h1>
<h1>Next</h1>
<h1>Next</h1>
</script>
</body>
</html>
I've tried something similar with pure ui-router implementation:
http://michalstefanow.com/ui-router.html#/app/parent
http://michalstefanow.com/ui-router.html#/app/parent/child
<!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>UI Router</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script>
angular.module('starter', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'main.html',
})
.state('app.parent', {
url: '/parent',
views: {
'main': {
templateUrl: 'parent.html',
}
}
})
.state('app.parent.child', {
url: '/child',
templateUrl: 'child.html'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/parent');
});
</script>
</head>
<body ng-app="starter">
<div ui-view></div>
<script type="text/ng-template" id="main.html">
<h1>This is main.html</h1>
Below is:
<pre>ui-view="main"</pre>
<div ui-view="main"></div>
</script>
<script type="text/ng-template" id="parent.html">
<h1>Parent</h1>
<a ui-sref="app.parent.child">child »</a>
<div ui-view></div>
</script>
<script type="text/ng-template" id="child.html">
<h1>I am a child</h1>
</script>
</body>
</html>
Speculation guesstimate: somethingIonic specific due to caching - Template does not update when using ui-router and ion-tabs ?
What am I really trying to do? Just to avoid XY problem - https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem - I want guide a user to upload an image. There will be couple of steps and the user will land directly in state app.upload.one without touching app.upload directly. app.upload will keep the current state of the upload process, while each of the steps will add description, tags, etc...
I think that ionic is single page application,so there is just one parent (which is root,like tabs or menu),others all are the child,and specially important is that the others are all siblings,so they can't be the relation of parent and child.
In short,you only can use one dot notation like app.child , don't like app.child.grandchild which has two dot notations.
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.
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>
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.
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'
});
In my Ionic app, I want to pass parameter(s) from one sub-view to another sub-view. When I pass parameters first time, It works as I expected, but my problem is, when I return first sub-view and then go to another sub-view, it goes to that page without parameters. My code is given below:
index.html (project/www)
<!DOCTYPE html>
<html>
<head>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/main.js"></script>
<script src="js/routes.js"></script>
</head>
<body ng-app="app" animation="slide-left-right-ios7" >
<!-- main window -->
<div>
<ion-nav-view></ion-nav-view>
</div>
</body>
</html>
route.js (www/js/route.js)
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('mainUser', { // first window
url: '/mainuser',
templateUrl: 'templates/mainUser.html',
controller: 'mainCtrl'
})
.state('userDrive', { // second window
url: '/user_drive',
params: {
driveData: null // parameter send
},
templateUrl: 'templates/user_drive.html',
controller: 'DriveCtrl'
});
$urlRouterProvider.otherwise('/mainUser');
});
templates/mainUser.html
<ion-side-menus>
<ion-side-menu-content>
<ion-content class="padding" style="background-color:#fff;">
<input type="date" ng-model="selectData.selectedDate" placeholder="Date">
<input type="time" ng-model="selectData.selectedTime" placeholder="Time">
</ion-content>
<div class="bar bar-footer">
<div class="button-bar">
<a ui-sref="userDrive({ driveData: selectData })" class="button"> Drive </a>
</div>
</div>
</ion-side-menu-content>
</ion-side-menus>
Here after click on Drive button, it will redirect to userDrive sub-view with parameter driveData correctly. But where I back to mainUser and then change selectData.selectedDate and selectData.selectedTime and then click again on Drive button, it will redirect to userDrive sub-view without driveData parameter.
userDrive Controller
.controller('DriveCtrl', function($scope, $state, $stateParams) {
console.log("DriveCtrl"); // after redirect to this controller second time
// it also print no value
// seems might be DriveCtrl is not called
console.log("$stateParams : ", $stateParams);
})
The problem is that the view is cached by Ionic, and in that case the controller gets executed only once, so that's why you only see the log the first time.
You need to use ionic view events, here the docs: http://ionicframework.com/docs/api/directive/ionView/
#leandro-zubrezki is right. To remove cache you can add anywhere in the controller 'DriveCtrl'.
$scope.$on("$ionicView.afterLeave", function () {
$ionicHistory.clearCache();
});
U can't send object into state param, if u need to send each value separately
I am currently learning ionic and i am trying to create a basic app. My problem is when i click on the links in the app it doesn't change to the template in the link it only changes the URL.
<!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">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</body>
</html>
app.js
angular.module('starter', ['ionic', 'starter.controllers'])
.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) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
// states for each page
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/app');
$stateProvider
// main page that first loads, select region page
.state('app', {
url: '/app',
templateUrl: 'templates/regions.html',
controller: 'regionCTRL'
})
// EU page
.state('app.EU', {
url: '/EU',
views: {
'Regions': {
templateUrl: 'templates/EU.html',
controller: 'APICtrl'
}
}
})
// USCAN page
.state('app.USCAN', {
url: '/USCAN',
views: {
'Regions': {
templateUrl: 'templates/USCAN.html',
controller: 'APICtrl'
}
}
})
})
regions.html template
<!-- user can select which region they want to see -->
<ion-view view-title="Regions">
<ion-content>
<ion-list id="item">
<ion-item href="#/app/EU">
<p>EU</p>
</ion-item>
<ion-item href="#">
<p>ASPAC</p>
</ion-item>
<ion-item href="#/app/USCAN">
<p>USCAN</p>
</ion-item>
<ion-item href="#">
<p>EAGM</p>
</ion-item>
<ion-item href="#">
<p>LATAM</p>
</ion-item>
<ion-item href="#">
<p>CHINA</p>
</ion-item>
<ion-item href="#">
<p>INDIA</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
To change the state, the ui-sref directive is the correct way to go:
<ion-item ui-sref="/app/EU">
<p>EU</p>
</ion-item>
Few days back i had pushed my code to my repository you can get the idea form here.
Routing Menue
Defined State
Its required that you keep your snippets inside ionic-content like i did here
<ion-view title="courses" hide-back-button="true" left-buttons="leftButtons" right-buttons="rightButtons"
hide-back-button="true">
<ion-content has-header="true" padding="true">
----your elements----
</ion-content >