i just begin with angular and ionic and i have a problem, routing display blank page , its bein 2 hours , that i'm looking for a solution without found one can someone help me figure out this please. sorry for my bad english
this is my app.js code: am i doin someething wrong?
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleLightContent();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('homepage', {
url: '/',
views: {
'': {
templateUrl: 'templates/home.html',
controller: '',
}
}
})
.state('itemPage', {
url: '/itemPage',
views: {
'': {
templateUrl: 'templates/itemPage.html',
controller: 'myCtrl',
}
}
})
.state('cart', {
url: '/cart',
view: {
'': {
templateUrl: 'templates/cart.html',
controller: 'myCtrl',
}
}
})
.state('categories', {
url: '/categories',
view: {
'': {
templateUrl: 'templates/categories.html',
controller: 'myCtrl'
}
}
})
.state('billingDetails', {
url: '/billingDetails',
view: {
'': {
templateUrl: 'templates/billingDetails',
controller:'myCtrl',
}
}
})
.state('confirmOrder', {
url: '/confirmOrder',
view: {
'': {
templateUrl: 'templates/confirmOrder',
controller:'myCtrl'
}
}
})
$urlRouterProvider.otherwise('/');
});
Related
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins && 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('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('notePadHome', {
url: '/notePadHome',
views: {
'notePadHome': {
templateUrl: 'templates/notePadHome.html',
controller: 'DashCtrl'
}
}
})
$urlRouterProvider.otherwise('/notePadHome');
});
In tabs.html you need to apply at ion-nav-view element the name="tab".
And then in your app.js try this:
.state('notePadHome', {
url: '/notePadHome',
views: {
'tab': {
templateUrl: 'templates/notePadHome.html',
controller: 'DashCtrl'
}
}
})
If you want remove the tab from app.js, remember to remove it also in your home view route, like this:
.state('notePadHome', {
url: '/notePadHome',
templateUrl: 'templates/notePadHome.html',
controller: 'DashCtrl'
})
I am new to the ionic framework.
I am working on an app and I don't want tabs in the landing page.
How to hide tabs on landing page (Home page) in ionic.
In the below example its working when you click on the Scientific Facts, I am not getting how to do it can any one please help me with this issue.
Example
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.facts', {
url: "/facts",
views: {
'home-tab': {
templateUrl: "templates/facts.html"
}
}
})
.state('tabs.facts2', {
url: "/facts2",
views: {
'home-tab': {
templateUrl: "templates/facts2.html"
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'about-tab': {
templateUrl: "templates/about.html"
}
}
})
.state('tabs.navstack', {
url: "/navstack",
views: {
'about-tab': {
templateUrl: "templates/nav-stack.html"
}
}
})
.state('tabs.contact', {
url: "/contact",
views: {
'contact-tab': {
templateUrl: "templates/contact.html"
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl', function($scope) {
console.log('HomeTabCtrl');
})
.directive('hideTabs', function($rootScope) {
return {
restrict: 'A',
link: function($scope, $el) {
$rootScope.hideTabs = 'tabs-item-hide';
$scope.$on('$destroy', function() {
$rootScope.hideTabs = '';
});
}
};
});
I just had a similar problem... try making the Home page a separate state/template/controller outside of the nested tabs.logic. The easiest way I found to do this was in two steps:
Remove your Home from the nested .state('tabs.home', logic to just .state('home',
Remove the views: { portion and just add the templateUrl and
controller directly.
(I also moved it to the top of the list for clarity)
I've modified the code below as an example:
$stateProvider
.state('home', {
url: "/home",
templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
})
//everything below here is the same, but I left it for context
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.facts', {
url: "/facts",
views: {
'home-tab': {
templateUrl: "templates/facts.html"
}
}
})
Hi i am new to ionic framework. i am using session manager in ionic. But i want to skip login page if user is already logged in.
app.js
angular.module('grocery', ['ionic', 'grocery.controller', 'ngCordova', 'ngCordovaOauth'])
.run(function($ionicPlatform, $cordovaSQLite, $cordovaToast, $rootScope, mainItemsList, $state) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
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();
}
});
});
$rootScope.$on('$locationChangeStart', function(event, newUrl, oldUrl) {
if (mainItemsList.isLoggedIn() != true) {
$state.go('app.login');
}
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/navigationDrawer.html",
controller: 'AppCtrl'
})
.state('app.masterList', {
url: "/masterList",
views: {
'menuContent': {
templateUrl: "templates/masterList.html",
controller: 'indexCtrl'
}
}
})
.state('app.login', {
url: "/login",
views: {
'menuContent': {
templateUrl: "templates/login.html",
controller: 'loginCtrl'
}
}
})
.state('app.register', {
url: "/register",
views: {
'menuContent': {
templateUrl: "templates/register.html",
controller: 'registerCtrl'
}
}
})
$urlRouterProvider.otherwise("/app/masterList");
});
angular.module('grocery.services', [])
.factory('mainItemsList', function($cordovaSQLite, $cordovaToast, $cordovaPreferences) {
return {
isLoggedIn: function(sessionEmail) {
$cordovaPreferences.store('email', sessionEmail).success(function(value) {
//$cordovaToast.showShortTop('stored');
})
.error(function(error) {
$cordovaToast.showShortTop("Error " + error);
})
return true;
}
}
})
I tried existing stackoverflow answers. But not working. please help me where i am wrong.
Create a new controller and a new state called autologin. Make this your default state. In the autologin controller, check whether the user is already logged in. If he is, redirect to some page. If he is not, redirect to login.
.state('app.autologin', {
url: "/autologin",
controller: 'autologinCtrl'
})
$urlRouterProvider.otherwise("/app/autologin");
controller:
angular.module('grocery').controller('autologinCtrl, function($scope, $state){
//check if user is logged in
if (userLoggedIn){
state.go('app.masterList');
} else {
state.go('app.login');
}
});
If you are adding a new controller for this logic,There will be a chance for flickering between the pages.So handle this by using $urlRouterProvider
.config(function($stateProvider, $urlRouterProvider, mainItemsList) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/navigationDrawer.html",
controller: 'AppCtrl'
})
.state('app.masterList', {
url: "/masterList",
views: {
'menuContent': {
templateUrl: "templates/masterList.html",
controller: 'indexCtrl'
}
}
})
.state('app.login', {
url: "/login",
views: {
'menuContent': {
templateUrl: "templates/login.html",
controller: 'loginCtrl'
}
}
})
.state('app.register', {
url: "/register",
views: {
'menuContent': {
templateUrl: "templates/register.html",
controller: 'registerCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise(function() {
var logged = mainItemsList.isLoggedIn();
// Check User logined or not
if (logged != true) {
return 'app.login';
} else {
return 'app.masterList';
}
});
});
i'm starting on ionic, and in this project I need the menu to show from top, but behind the top bar.
Of course I looked into the ionic doc's side menu.
Also saw this but I don't think it's the best solution.
Can you help me with that?
You can have a look at below link just as you want.
http://jsfiddle.net/brayancastrop/fgcruwxg/1/
(function () {
angular.module('sampleApp', ['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) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
})
})
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.views.maxCache(0);
$stateProvider
.state('app', {
abstract: true,
templateUrl: "templates/menu.html"
})
.state('app.events', {
url: "/events",
views: {
'menuContent': {
templateUrl: "templates/events.html"
}
}
})
.state('app.event', {
url: "/events/:id",
views: {
'menuContent': {
templateUrl: "templates/event.html"
}
}
})
.state('app.conference', {
abstract: true,
views: {
'menuContent': {
templateUrl: "templates/conference.html"
}
}
})
.state('app.conference.information', {
url: "/events/:id/conferences/:conferenceId/information",
views: {
'conferenceInformation': {
templateUrl: "templates/conference/information.html"
}
}
})
.state('app.conference.presentation', {
url: "/events/:id/conferences/:conferenceId/presentation",
views: {
'conferencePresentation': {
templateUrl: "templates/conference/presentation.html"
}
}
})
.state('app.conference.questions', {
url: "/events/:id/conferences/:conferenceId/questions",
views: {
'conferenceQuestions': {
templateUrl: "templates/conference/questions.html"
}
}
})
.state('app.conference.notes', {
url: "/events/:id/conferences/:conferenceId/notes",
views: {
'conferenceNotes': {
templateUrl: "templates/conference/notes.html"
}
}
});
$urlRouterProvider.otherwise('/events');
});
})();
I know this question has been asked several times, but I'm not understanding if I missed anything or it's just a server thing.
I need to show you my code for checking please:
(function(){
var app = angular.module('c4s', ['ionic', 'starter.controllers', 'starter.services']);
app.controller('curiousCtrl', function($http, $scope){
$scope.stories = [];
$http.jsonp('http://curious4science.com/?json=1&callback=JSON_CALLBACK')
.success(function(response) {
angular.forEach(response.data.children, function(child){
console.log(response);
$scope.stories.push(child.data);
});
});
});
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
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($httpProvider, $stateProvider, $urlRouterProvider) {
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$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');
});
}());
And I'm getting this error:
TypeError: response.data is undefined
First, I tried $http.get(....) but I got the error that cross domain thing is not allowed. Then I tried jsop.
Thank you.
The sucess() callback doesn't take the http response as argument. It takes the response data, then the status, then the headers, then the config.
So the code should be
$http.jsonp('http://curious4science.com/?json=1&callback=JSON_CALLBACK')
.success(function(data) {
angular.forEach(data.children, function(child){
console.log(response);
$scope.stories.push(child.data);
});
});
(assuming the returned JSON has a children field which is an array, and that each child has a data field, of course).