I have Ionic 1 app where I have folder templates (home.html, menu.html, about.html..). The problem is in index.hmtl I have code :
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
This code run ionic navigation on every page. The question is how can i remove navigation from pages that I want to be without navigation? I tried hide-nav-bar="true"- this hide navigation but I can still open it with swipe.
My 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);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home.html'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/home');
});
Controler.js:
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
//$scope.$on('$ionicView.enter', function(e) {
//});
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/home.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
.controller('PlaylistsCtrl', function($scope) {
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
];
})
.controller('PlaylistCtrl', function($scope, $stateParams) {
});
Use this code in your app.js file while configuring the states.
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home.html'
})
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
$urlRouterProvider.otherwise('home');
});
Related
Hello I am working with ionic framework and I want to redirect to another page
after successfully login .When I run project using command:
ionic serve then $state.go working properly but when I run project using
ionic serve --lab it is not working
.controller('AppCtrl', function($scope,$http, $ionicModal,$location,$state, $timeout) {
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
alert($scope.loginData.username);
alert($scope.loginData.password);
$http({
method: 'POST',
url: 'http://localhost/home_owner12/admin/api/login',
data: {username:$scope.loginData.username,password:$scope.loginData.password},
headers : {
'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'}
})
.then(function successCallback(response)
{
if(response.data.length > 0)
{
$state.go('app.search');
console.log('the state is '+$state.current);
}
else
{
alert("Invalid email or pasword");
///$location.path('/search');
}
}, function errorCallback(response)
{
alert("Invalid email pasword");
});
};
})
here is state:
config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html',
controller: 'AppCtrl'
}
}
});
and module
angular.module('starter', ['ionic', 'starter.controllers', 'ui.router'])
The app.search page's controller goes to AppCtrl in place.
Because AppCtrl runs a second time, it is entering an infinite loop.
Replace the code with that
config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html',
controller: 'SearchCtrl'
}
}
});
and
.controller('SearchCtrl', function($scope,$http, $ionicModal,$location,$state, $timeout) {
............
.........
.......
})
For some reason ui router won't change state or does change it but it does not render it,
here is my code
angular.module('splash', ['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);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('splash', {
url: '/splash',
templateUrl: '/splash.html',
})
.state('splash.login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'login.html',
controller: "SplashCtrl"
}
}
})
.state('splash.register', {
url: '/register',
views: {
'menuContent': {
templateUrl: 'register.html',
controller: "SplashCtrl"
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/splash');
}])
.controller('SplashCtrl', function($scope, $state) {
$scope.go = function(state) {
$state.go(state);
}
});
is there anything wrong with what I am doing? in the html file I only add the ng-app directive, it loads the first state without any problems but it does not change states
kindly help me in this regard if you have any idea
Thanks in Advance
I fixed your code and added some comments. Feel free to ask about any uncentainties.
angular.module('splash', ['ionic'])
.run(function($ionicPlatform) {
$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();
}
});
})
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('splash', {
url: '/splash',
abstract : true, // Because your are have child-states under de 'splash' state, you should set it abstract : true;
templateUrl: '/splash.html',
})
.state('splash.login', {
url: '/login',
views: {
'menuContent': { // Is only your menu contect visible on your app ?
templateUrl: 'login.html',
controller: "SplashCtrl"
}
}
})
.state('splash.register', {
url: '/register',
views: {
'menuContent': {
templateUrl: 'register.html',
controller: "SplashCtrl"
}
}
})
// Using stateParams your are able to pass values when switching states.
.state("splash.third", {
url : "/thirdpage/:text", // This value is referencing the passed value in the 3th button.
views : {
"menuContent" : {
templateUrl : "thirdpage.html",
controller : "SplashCtrl"
}
}
}); // You forgot a ;
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/splash');
}])
.controller('SplashCtrl', function($scope, $state) {
// Your controller shouldn't know anything about routing. UI-router is fixing that your you! =]
// An controller is supposed to act as glue between your data (services/factories) and your scope (html templates/directives)
// e.g.
$scope.buttonText = "Third button";
});
// On your splash.html
<button ui-sref="splash.login">Login</button>
<button ui-sref="splash.register">Register</button>
<button ui-sref="splash.third({ text : buttonText })">{{buttonText}}</button>
In my program i want to load programsetup html page after pressing sign in button in login page.
myconfig function for login pages as follows
.config(function config($stateProvider) {
$stateProvider.state('login', {
url: '/login',
views: {
"main": {
controller: 'LoginCtrl',
templateUrl: 'login/login.tpl.html'
}
},
data: {
pageTitle: 'Login'
}
});
})
login page loads successfully! but program setup page is not loading after click on sign in button
$location.href = "#/programsetup";
this is line i used in my login .js for loading program setup page my programsetup config function is:
.config(function config($stateProvider) {
$stateProvider.state('programsetup', {
url: '/programsetup',
views: {
"main": {
controller: 'ProgramSetupCtrl',
templateUrl: 'programsetup/programsetup.tpl.html'
}
},
data: {
pageTitle: 'Program Setup'
}
});
})
what mistake i am doing? please help me out.
In your login.js file(inside login controller) you need to write ng-click method and add below code
$state.go("programsetup");
And $state need to add dependency injection in your controller
Just configure your state for programsetup inside the root .config. Then for the button login. User $state.go('programsetup') to go to that page.
Rough Html:
<button class="button button-positive" ng-click="login()">Go Programsetup</button>
Then in the config and controller.
.config(function config($stateProvider) {
$stateProvider.state('login', {
url: '/login',
views: {
"main": {
controller: 'LoginCtrl',
templateUrl: 'login/login.tpl.html'
}
},
data: {
pageTitle: 'Login'
}
});
$stateProvider.state('programsetup', {
url: '/programsetup',
views: {
"main": {
controller: 'ProgramSetupCtrl',
templateUrl: 'programsetup/programsetup.tpl.html'
}
},
data: {
pageTitle: 'Program Setup'
}
});
})
.controller('LoginCtrl', function($scope, $state) {
$scope.login = function() {
$state.go('programsetup');
}
})
.controller('ProgramSetupCtrl', function($scope) {
alert('i am at Program setup page.');
})
I want to evaluate the user when the app start if it's authenticated change the state to "categories" if not go to "land" state. i reached this using $stateChangeStart in the run block like so :
.run(function($ionicPlatform, DSCacheFactory, $rootScope, $auth, $state) {
$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();
}
});
$rootScope.$on('$stateChangeStart', function (event, toState) {
if (!$auth.isAuthenticated() && toState.name !== 'land') {
event.preventDefault();
$state.go('land');
}
});
})
and like this if it's authenticated:
$urlRouterProvider.otherwise('app/categories');
every thing works fine user get evaluated correctly but, clicking on anything in the app taking me to the land state. Any idea why!
The router code :
.config(function($stateProvider, $urlRouterProvider, $authProvider, $ionicAppProvider, API_URL) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('land', {
url: '/land',
templateUrl: 'templates/land.html',
controller: 'LandCtrl'
})
.state('signup', {
url: '/sign-up',
templateUrl: 'templates/sign-up.html',
controller: 'SignUpCtrl'
})
.state('signin', {
url: '/sign-in',
templateUrl: 'templates/sign-in.html',
controller: 'SignInCtrl'
})
.state('app.categories', {
url: '/categories',
views: {
'menuContent': {
templateUrl: 'templates/categories.html',
controller: 'categoriesCtrl',
}
}
});
I'm new on Ionic, and I have been a couple of days with this problem.
I create an app from chat examples, and I want to connect and read to my firebase database. The first part is woking.- I can retreive and show data from firebase, but my problem is when I click on the "Item list" and want to show detail description, I don not understand how to pass value and get the data again.
Here are my scripst:
app.js ( I'm only showing part of them )
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services','firebase'])
.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 && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
Here is my services file --- services.js where I connect to Firebase
angular.module('starter.services', [])
.factory('fireBaseData', function($firebase) {
// Might use a resource here that returns a JSON array
var ref = new Firebase("https://scorching-fire-921.firebaseio.com/")
refCorales = new Firebase("https://scorching-fire- 921.firebaseio.com/corales/");
var fireBaseData = {
all: refCorales,
get: function (chatId) {
return $firebase(ref.child('refCorales').child(chatId)).$asObject();
}
};
return {
ref: function() {
return ref;
},
refCorales: function() {
return refCorales;
}
}
});
And finally here is my controller.js
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {})
.controller('ChatsCtrl', function($scope, $firebase, fireBaseData) {
$scope.corales = $firebase(refCorales);
})
.controller('ChatDetailCtrl', function($scope, $stateParams, fireBaseData) {
$scope.corales = refCorales.get($stateParams.chat$id);
})
.controller('AccountCtrl', function($scope) {
$scope.settings = {
enableFriends: true
};
});
When I click on any item of the list, I'm receiving the following error message: TypeError: refCorales.get is not a function
Any idea how to avoid this erro?
In advance, thank you !
Victor
The problem i see is your services code is very unclear and not returning a way to acces var fireBaseData. Also why are you making two firebase references and not simple using ref.child('corales')?
This would be my solution:
.factory('fireBaseData', function($firebase) {
//Firebase reference
var ref = new Firebase("https://scorching-fire-921.firebaseio.com/")
return {
ref: function(){
return ref;
},
//I don't know if this is actually necessary
refCorales: function(){
return ref.child('corales');
},
get: function(chatId){
$firebase(ref.child('corales').child(chatId)).$asObject();
}
};
})
Update
Also some changes for your controller:
.controller('ChatsCtrl', function($scope, fireBaseData) {
$scope.corales = fireBaseData.refCorales();
})
.controller('ChatDetailCtrl', function($scope, $stateParams, fireBaseData) {
$scope.corales = fireBaseData.get($stateParams.chat$id);
})