I want to make $http request, get results and according to data i get to route to view1 or view2. How can i do it in angular? Does somebody have example?
It should be some
$http({
url: 'API/v1/User/GetUserInfo',
method: "GET",
headers: { 'Content-Type': 'application/json' }
}).success(function (data, status, headers, config) {
//Something like this
var myVar=data.myVariable;
if(myVar==1){
$routeProvider.otherwise({ redirectTo: '/view1' });
}else{
$routeProvider.otherwise({ redirectTo: '/view2' });
}
}).error(function (data, status, headers, config) {
$scope.error = "There are problems with connection to server. Status:" + status + " Please, try to connect later.";
$scope.validationClass = "invalid";
});
and after that
Use to $location service to go to a specific path/route. Angular routing listens to changes on the location and will trigger all necessary actions.
if (myVar == 1) {
$location.url('/view1');
} else {
$location.url('/view2');
}
Related
module.controller('HomeController', function($scope, $http) {
$http.get('http://104.155.209.198/list/json')
.success(function (data) {
$scope.home_items = data;
console.log('call HomeController');
})
.error(function (error) {
$scope.error = "error";
});
$scope.ClickHome = function (url) {
$http.get('http://104.155.209.198'+url+'/json')
.success(function (data) {
$scope.list_items = data;
console.log($scope.list_items);
console.log('call ListItems');
});
};
$scope.ClickList = function (url) {
$http.get('http://104.155.209.198'+'/list'+url+'/json')
.success(function (data) {
$scope.viewObject = data;
console.log($scope.viewObject);
console.log('call ViewItems');
})
};
});
This is my Angular code. This work in WebBrowers but not working in ios-emulate. what is a problem? not working $http in onsen-ui?
The problem might be loading of external content.
You can inspect the problem with Safari. If that's the case, this might help: http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/
Add this to platforms/ios/<appname>/<appname>-Info.plist
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
new version of onsen ui not supported $http in emulate android
$http({
method: 'POST',
data: 'Username=' + $scope.user.email + '&Password=' + $scope.user.password + '&is_varified='+$scope.user.is_varified+'&gcm_reg_id='+gcm_reg_id,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
url: myService.ajax_base_url+'/login/validate_mobile_user'
}).
success(function(data, status, headers, config) {
//console.log(data);
alert('in success');
modal.hide();
}).
error(function(data, status, headers, config) {
modal.hide();
alert('in error');
});
I have the following angular service:
angular.module('app.services.api_login', [])
.factory('loginApi', function($http, $q, CONFIG) {
return function(email, password) {
var promise = $http({
method: 'POST',
url: CONFIG.login_url,
data: {
username: email,
password: password
},
headers: {'Content-Type': 'application/json'}
}).
then(function(response){
if (typeof response.data === 'object') {
return response;
} else {
return $q.reject(response);
}
}, function(error){
return $q.reject(error);
});
return promise;
}
});
In the controller, I am able to invoke the service. However, inspecting the Network requests made by the browser, it does an HTTP GET.
Any possible ideas why?
Remove the '/' at the end of your CONFIG.login_url
I am using this post method in angularjs.
$http.post('url', data).
success(function(data, status, headers, config) {
console.log(data);
}).
error(function(data, status, headers, config) {
alert("error");
});
I have server side code which sends a response back (expressjs) to state if the user is authenticated or not.
I use $http post request and get the success back if all is ok. If user is authenticated I need to redirect the user to the relevant page.
My code here currently does not work or throw an error either when using debugging tools
$http({ method: 'POST',
url: '/login',
data: JSON.stringify({'username' : $scope.user.username, 'password' : $scope.user.password }),
headers: {'Content-Type': 'application/json'}}).
success(function (data, status, headers, config) {
$scope.invalid = false;
$window.location.href = '#/admin/';
}).
error(function (data, status, headers, config) {
console.log(status);
$scope.list = data;
});
return;
};
Any help would be great.
You can use $location to redirect
$location.path( "#/admin/" );
I would have expected your $window.location to also perform the redirect, so there could be something else going on. Do you have a route for '#/admin/' set up in a routeProvider? If not the default route would execute, if specified.
I am trying to access the http headers in my angular controller but I am getting undefined. Also, I am able to see the header response in my angular service which is not reflecting in my controller. Can someone please tell me what I am missing? Please see the code below:
Service:
cmApp.service('supplierService', function ($http, $q) {
this.getSuppliers = function (orderByColumn, skipRows, takeRows) {
var deferred = $q.defer();
$http({
method: 'GET',
url: 'api/supplier',
params: { orderBy: orderByColumn, skip: skipRows, take: takeRows },
timeout: 30000,
cache: false
}).
success(function (data, status, headers, config) {
// any required additional processing here
deferred.resolve(data, status, headers, config);
}).
error(function (data, status) {
deferred.reject(data, status, headers, config);
});
return deferred.promise;
}
Controller:
supplierService.getSuppliers($scope.orderby, $scope.skip, $scope.take)
.then(function (data, status, headers, config) {
**//getting undefined here.**
$scope.totalRecords = parseInt(headers('X-TotalRowCount'));
$scope.suppliers = data;
}, function (error) {
// error handling here
});
I have found the solution by myself. All I have to do is create an array and add all those values to the same & return it to the controller. Please see the updated code below:
Service:
cmApp.service('supplierService', function ($http, $q) {
this.getSuppliers = function (orderByColumn, skipRows, takeRows) {
var deferred = $q.defer();
$http({
method: 'GET',
url: 'api/supplier',
params: { orderBy: orderByColumn, skip: skipRows, take: takeRows },
timeout: 30000,
cache: false
}).
success(function (data, status, headers, config) {
// any required additional processing here
var results = [];
results.data = data;
results.headers = headers();
results.status = status;
results.config = config;
deferred.resolve(results);
}).
error(function (data, status) {
deferred.reject(data, status, headers, config);
});
return deferred.promise;
}
Controller:
supplierService.getSuppliers($scope.orderby, $scope.skip, $scope.take)
.then(function (response) {
$scope.suppliers = response.data;
$scope.totalRecords = parseInt(response.headers["x-totalrowcount"]);
}, function (error) {
// error handling here
});
This question is old, but $http() returns a promise itself. you can just return that from your service, no need to create a new promise. You can do this even after using .success() and .error(), or for that matter even after using a .then(), they keep chaining.
I had to access Token and TokenExpiry time from response headers of my Rest Service,then store it in my $rootScope.
Here is the code I used:
$scope.Authenticate=function(){
var EncDecUserPass=decodeURIComponent(encodeURIComponent($scope.LoggedUserName+':'+$scope.LoggedUserPassword)) ;
$http(
{method: 'GET',
url: 'http://localhost:53256/api/Products/Authenticate',
cache: false,
headers:{'Authorization':'Basic '+window.btoa(EncDecUserPass)}
}
).success(function(data, status, headers, config) {
//Here it goes
$rootScope.token=headers().token;
$rootScope.tokenExpirySec=headers().tokenexpiry;
}).error(function(data, status, headers, config) {
alert('Invalid User');
});
}
I have a loading icon set up on my page that looks like this:
<div class="loading-mask"
data-ng-show="action != null">
<span>{{action}} ...</span>
</div>
When I set $scope.action to a message appears in the loading box.
When loading my page I have a number of different async processes that get data. For example I have:
getUserProfiles: function ($scope) {
var url = '/api/UserProfile/GetSelect';
$http({ method: 'GET', url: url })
.success(function (data, status, headers, config) {
$scope.option.userProfiles = data;
})
.error(function (data, status, headers, config) {
alert("Error: No data returned from " + url);
});
},
and:
getSubjects: function ($scope) {
var url = '/api/Subject/GetSelect';
$http({ method: 'GET', url: url })
.success(function (data, status, headers, config) {
$scope.option.subjects = data;
})
.error(function (data, status, headers, config) {
alert("Error: No data returned from " + url);
});
},
How can I make it so that the first of these async processes causes a "Loading" message to appear and the last of the async process causes the loading box to not show any more. Note at this time I am not concerned about error messages. I just want the loading to not show when everything is completed.
To expand on what devmiles has said, but to handle the multiple asynchronous functions, you will want to set a loading flag on your first function to be called. I.e.:
getUserProfiles: function ($scope) {
$scope.loading = true;
var url = '/api/UserProfile/GetSelect';
$http({ method: 'GET', url: url })
.success(function (data, status, headers, config) {
$scope.option.userProfiles = data;
})
.error(function (data, status, headers, config) {
alert("Error: No data returned from " + url);
});
},
And then you will want to wrap each of your asynchronous functions in a promise, like so:
getUserProfiles: function ($scope) {
var deferred = $q.defer();
$scope.loading = true;
var url = '/api/UserProfile/GetSelect';
$http({ method: 'GET', url: url })
.success(function (data, status, headers, config) {
$scope.option.userProfiles = data;
deferred.resolve();
})
.error(function (data, status, headers, config) {
alert("Error: No data returned from " + url);
deferred.reject();
});
return deferred;
},
You can then call $q.all on all of your asynchronous functions, and the success callback of this will occur once all asynchronous functions have resolved:
$q.all([getUserProfiles, getSubjects]).then(function() {
$scope.loading = false;
}
This means once all of your functions have resolved, loading will be set to false.
NB: If you want to access the data of your callbacks, you can pass it in as a parameter of "deferred.resolve(x)", and then in your $q.all callback, it will be available as function(x) { do something with x }.
Hope this helps!
EDIT: Don't forget to pass in angular's promise service, $q, to the controller where your functions are.
Just set some boolean flag on when your controller is being instantiated and reset this flag in your success/error functions.
.controller('MyCtrl', function ( $scope ) {
$scope.isLoading = true;
$http({ method: 'GET', url: url })
.success(function (data, status, headers, config) {
$scope.option.subjects = data;
$scope.isLoading = false;
})
.error(function (data, status, headers, config) {
alert("Error: No data returned from " + url);
$scope.isLoading = false;
});
});
Use ng-show with this flag to show your loading thingy.