Did I miss anything with this $http.jsonp in angularjs? - angularjs

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).

Related

controller is not loading whenever associated html is opened in IONIC V1

In my app I am trying to dashboard.html and associated controller would load if the condition is true, but the problem is first time it will load the controller but from second time it is opening html page but not only loading controller.
What may the wrong where I did mistake please help me to find.
app.js
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AutoLoginCtrl'
})
.state('app.autoLog', {
url: '/autoLog',
controller: 'AutoLoginCtrl'
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html'
}
}
})
.state('app.browse', {
url: '/browse',
views: {
'menuContent': {
templateUrl: 'templates/browse.html'
}
}
})
.state('app.profileInfo', {
url: '/profileInfo/:success',
views: {
'menuContent': {
templateUrl: 'templates/profileInfo.html',
controller: 'ProfileCtrl'
}
}
})
.state('app.profile', {
url: '/profile/:data',
views: {
'menuContent': {
templateUrl: 'templates/profile.html',
controller: 'ProfileCtrl'
}
}
})
.state('app.dashboard', {
url: '/dashboard',
views: {
'menuContent': {
templateUrl: 'templates/dashboard.html'
}
}
})
.state('app.dog', {
url: '/dog',
views: {
'menuContent': {
templateUrl: 'templates/dog.html',
controller: 'ProfileCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/autoLog');
loginController.js
If the below condition is true then is will call .state('app.dashboard')
if (data[0].Userprofile1 == true && data[0].Userprofile2 == true) {
$ionicLoading.hide();
console.log('My profile setup is over');
$state.go("app.dashboard");
}
dashboardController.js
app.controller('dashboardCtrl', function($scope, $http, $state, UserService) {
$scope.pageName = 'Hi i am user';
console.log('Hi home controller loading')
var userStatus = UserService.getUser()
console.log(userStatus);
if (userStatus != null) {
$scope.ersrserer = userStatus.userID;
console.log($scope.ersrserer);
} else {
console.log('its empty');
}
})
first time when it calls dashboard.html it will load controller also but from second time it will not load controller, what went wrong here?
A state requires a controller to be initialized with it, you have add the controller and inside the state you can add a resolve block:
.state('your state', {
url: '/url',
resolve: {
someName: function(inject here) {
//return something, or redirect to a state...etc
}
},
templateUrl: 'templates/something.html',
controller: 'ExampleCtrl'
})

how to skip login page if user already logged in in ionic

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';
}
});
});

Open ionicModal on stateChangeStart

I have been reviewing the different methods for authorization/authentication in the framework. What I am trying to do is assign a value to a state, then use ui-routers ability to detect the state change using $stateChangeStart. I am injecting the ionicModal service into app.js .run function and then creating the modal and attaching it to the $rootScope. When I try and open it I get the following error:
Cannot read property 'show' of undefined
Here is app.js:
angular.module('authlyApp', ['ionic', 'authlyApp.controllers', 'authlyApp.services'])
.run(function($ionicPlatform, $ionicModal, $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();
}
});
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $rootScope
}).then(function(modal) {
$rootScope.modal = modal;
});
$rootScope.$on('$stateChangeStart',
function(event, next, toState, fromState, toParams, fromParams){
console.log(next)
if ('data' in next && 'requireAuth' in next.data) {
event.preventDefault();
$rootScope.modal.show();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl',
data: {
requireAuth: true
}
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html'
}
}
})
.state('app.browse', {
url: '/browse',
views: {
'menuContent': {
templateUrl: 'templates/browse.html'
}
}
})
.state('app.playlists', {
url: '/playlists',
views: {
'menuContent': {
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
.state('app.single', {
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/playlists');
});

ionic plus angular routing giving a blank page

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('/');
});

Ionic: Method call on page enter

I have a < ion-side-menu > with links to my pages defined here:
app.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$stateProvider.state('content', {
url: "/content",
abstract: true,
templateUrl: "templates/sidemenu.html",
controller: 'SideController'
});
$stateProvider.state('content.home', {
url: "/home",
views: {
'menuContent': {
templateUrl: "templates/home.html",
controller: "HomeController"
}
}
});
$stateProvider.state('content.nearby', {
url: "/nearby",
views: {
'menuContent': {
templateUrl: "templates/nearby.html",
controller: "NearbyController"
}
}
});
$stateProvider.state('content.map', {
url: "/map",
views: {
'menuContent': {
templateUrl: "templates/map.html",
controller: "MapController"
}
}
});
$stateProvider.state('content.radar', {
url: "/radar",
views: {
'menuContent': {
templateUrl: "templates/radar.html",
controller: "RadarController"
}
}
});
$stateProvider.state('content.location-details', {
url: "/location-details/:index",
views: {
'menuContent': {
templateUrl: "templates/location-details.html",
controller: "DetailsController"
}
},
resolve: {
currentLocation: function($stateParams, shareService, NearbyFactory)
{
return NearbyFactory.getLocations()[$stateParams.index];
}
}
});
$urlRouterProvider.otherwise("/content/home");
});
I want to execute a method in my controllers when the user navigates to this page and when the page is left (for loading AJAX data or start listening to some Cordova sensors). Like this:
app.controller("HomeController", function()
{
$scope.onEnter = function(previous_page)
{
...
};
$scope.onExit = function(next_page)
{
...
};
});
I've already tried onEnter and onExit inside the $stateProvider state but afaik I don't have my $scope there.
What is the easiest/best/nicest way to get this functionality? It would be great if I could determine the previous/next page and if the user navigated back/forward. I tried this:
$scope.$on('$routeChangeStart', function(event, next, current)
{
console.log(next);
});
but this didn't work every time and it didn't fire when loading the page. This also seems a bit dirty to me because I'd have to implement this in every single controller.
Thank you!
You can use $ionicView.beforeEnter and beforeLeave.
Simply add this to your HomeController :
app.controller("HomeController", function()
{
$scope.$on('$ionicView.beforeEnter', function() {
//do stuff before enter
});
$scope.$on('$ionicView.beforeLeave', function() {
//do your stuff after leaving
});
});
You can check the docs of the $ionicView here.
You can try this. It works every time when it's loading the page:
$scope.$on('$locationChangeStart', function(event)
{
console.log(event);
});

Resources