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 >
Related
I am currently developping an application using Ionic - angularJS
To show the content in the home page I use the directive ng-show='isLogged', this condition has to be false to display the content.
Here is the code for the page home.html :
<ion-view view-title="Home" ng-app='starter'>
<ion-content class='padding' ng-show="!isLogged">
<div class="global-speach">
<p>You are not logged in, to continue further, please log in</p>
<a ui-sref="logIn"><button class='button button-full button-dark'> Log In </button></a>
</div>
<br>
<div class="global-speach">
<p>Or you can create an account by clicking on the button below</p>
<a ui-sref="signUp"><button class='button button-full button-dark'>Create an account </button></a>
</div>
</ion-content>
the parametter isLogged is defined when the user open the application
if (window.localStorage.getItem('isLogged') == 'true')
{
$rootScope.isLogged = true;
window.localStorage.setItem('isLogged', 'true');
}
else {
$rootScope.isLogged = false;
window.localStorage.clear();
window.localStorage.setItem('isLogged', 'false');
}
My problem is that when I open the application and the variable $rootScope.isLogged is true the content is still displayed
I have a side menu in the application and I don't know why but when I click to open the side menu, the content disapear as expected in the begining.
For testing another part of the project I added a button in the menu bar of the application and when I click this button (used to display in console the content of localStorage) the content disapear too.
Thank you in advance for any ideas.
app.js :
var app = angular.module('starter', ['ionic', 'ngCordova'])
app.run(function($ionicPlatform, $rootScope)
{
$ionicPlatform.ready(
function()
{
if(window.cordova && window.cordova.plugins.Keyboard)
{
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
if (window.localStorage.getItem('isLogged') == 'true')
{
$rootScope.isLogged = true;
window.localStorage.setItem('isLogged', 'true');
}
else {
$rootScope.isLogged = false;
window.localStorage.clear();
window.localStorage.setItem('isLogged', 'false');
}
});
$rootScope.serverUrl = '';
})
app.config(function($stateProvider, $urlRouterProvider){
// Home view
$stateProvider.state('home', {
url: '/home',
templateUrl: 'templates/home.html'
})
// Login view
$stateProvider.state('logIn', {
url: '/logIn',
templateUrl: 'templates/logIn.html',
controller: 'connectionController'
})
// Sign up view
$stateProvider.state('signUp', {
url: '/signUp',
templateUrl: 'templates/signUp.html',
controller: 'connectionController'
})
$urlRouterProvider.otherwise('/home')
});
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>Project</title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<!-- Models -->
<script type="text/javascript" src="js/Models/sha512.js"></script>
<!-- jquery -->
<script type="text/javascript" src='js/jquery-1.7.1.min.js'></script>
<!-- controllers -->
<script type="text/javascript" src="js/controllers/connectionController.js"></script>
</head>
<body ng-app="starter">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class='bar-stable'>
<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-buttons side='right'>
<button ng-show='isLogged' class='button' ng-controller='connectionController' ng-click='disconnect()'>Log Out</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side='left'>
<ion-item menu-close ui-sref='home'>Home</ion-item>
<ion-item menu-close ui-sref='logIn' ng-show='!isLogged'>Log In</ion-item>
<ion-item menu-close ui-sref='signUp' ng-show='!isLogged'>Sign Up</ion-item>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
home.html :
<ion-view view-title="Home" ng-app='starter'>
<ion-content class='padding' ng-show="!isLogged">
<div class="global-speach">
<p>You are not logged in, to continue further, please log in</p>
<a ui-sref="logIn"><button class='button button-full button-dark'> Log In </button></a>
</div>
<br>
<div class="global-speach">
<p>Or you can create an account by clicking on the button below</p>
<a ui-sref="signUp"><button class='button button-full button-dark'>Create an account </button></a>
</div>
</ion-content>
</ion-view>
Try updating to following code (leaving out the '' marks around the isLogged variable. You want them to treat the variables as boolean not strings
if (window.localStorage.getItem('isLogged') == true)
{
$rootScope.isLogged = true;
window.localStorage.setItem('isLogged', true);
}
else {
$rootScope.isLogged = false;
window.localStorage.clear();
window.localStorage.setItem('isLogged', false);
}
In your ng-show then, do this instead: ng-show="(isLogged !== 'true');"
Ok I found a solution,
The first time I tried to create a controller for the home view I created a function to initialize the rootScope variable isLogged and call that function as the begining of home.html,
I just tried again now but without the function and it seems to be working.
here is the homeController.js:
app.controller('homeController', ['$rootScope',
function($rootScope){
if (window.localStorage.getItem('isLogged') == 'true')
{
$rootScope.isLogged = true;
window.localStorage.setItem('isLogged', 'true');
}
else {
$rootScope.isLogged = false;
window.localStorage.clear();
window.localStorage.setItem('isLogged', 'false');
}
}]);
Thank you all for your help.
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'
});
I am new to AngularJs and Ionic, I am trying to follow this example to create simple app but it is just showing blank screen and there is no error on console log.
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>
<!-- 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/controller.js"></script>
</head>
<body ng-app="bloggerDemo">
<ion-pane>
<ion-nav-bar class="bar-positive"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
</body>
</html>
latestPosts.html
<ion-view title="Latest Posts">
<ion-content>
<ion-list>
<ion-item ng-repeat="latestPost in latestPosts" class="item item-icon-right" sref="latestPosts.singlePost({post: $index})">
<span>{{latestPost.title}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
singlePost.html
<ion-view title="Single Post">
<ion-content padding='true'>
<h1>{{post.title}}</h1>
<section>{{post.description}}</section>
</ion-content>
</ion-view>
app.js
var app = angular.module('bloggerDemo', ['ionic'])
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/latestPosts')
$stateProvider.state('latestPosts', {
abstract: true,
url: '/latestPosts',
template: '<ion-nav-view></ion-nav-view>'
})
$stateProvider.state('latestPosts.index', {
url: '/latestPosts',
templateUrl: 'templates/latestPosts.html',
controller: 'PostsCtrl'
})
$stateProvider.state('latestPosts.singlePost', {
url: '/:singlePost',
templateUrl: 'templates/singlePost.html',
controller: 'SinglePostCtrl',
resolve: {
singlePost: function ($stateParams, PostService) {
return PostService.getPost($stateParams.post)
}
}
})
})
app.controller('PostsCtrl', function ($scope, PostService) {
$scope.latestPosts = PostService.latestPosts
})
app.controller('PostCtrl', function ($scope, singlePost) {
$scope.singlePost = singlePost
})
app.factory('PostService', function () {
var posts = [
{
title: 'lkad alkjdflak dfkljad f alkdsjf al',
description: 'adflkajd fjad faldfj aldkjf lkdfj lakdj flaksd flkds flksdj flkadlkfkhaghoiahd fkasdjkasdjfkl ajf sdjfalksdj falj falkf '
},
{
title: 'lkad alkjdflak dfkljad f alkdsjf al',
description: 'adflkajd fjad faldfj aldkjf lkdfj lakdj flaksd flkds flksdj flkadlkfkhaghoiahd fkasdjkasdjfkl ajf sdjfalksdj falj falkf '
}
];
return {
latestPosts: posts,
getPost(function (post) {
return latestPosts[post]
})
}
})
try changing this:
<ion-list>
<ion-item ng-repeat="latestPost in latestPosts" class="item item-icon-right" sref="latestPosts.singlePost({post: $index})">
<span>{{latestPost.title}}</span>
</ion-item>
</ion-list>
for this:
<ion-list>
<ion-item ng-repeat="latestPost in latestPosts" class="item item-icon-right">
<a ui-sref="latestPosts.singlePost({post: latestPost.post_id })">
{{latestPost.title}}
</a>
</ion-item>
</ion-list>
Hope this Help you...
after I read your code, I think I found the problem exist in your app.js
change this:
$stateProvider.state('latestPosts', {
abstract: true,
url: '/latestPosts',
template: '<ion-nav-view></ion-nav-view>'
})
to this:
$stateProvider.state('latestPosts', {
abstract: true,
url: '/latestPosts',
template: "/templates.index.html"
})
It is essential to note that the abstract state always point to where the <ion-nav-view> exist.
Tell me if it works, Happy Coding.