AngularJS and serverside filter and pagination - javascript

I'm looking to use Angular JS with WebAPI - will be returning a large number of results from the WebAPI and so want to use some sort of server-side pagination and filtering.
Most of the tutorials i've seen are for client side filtering which isn't what i'm looking for.
Not really used AngularJS before, so looking for a simple example which can show how to utilise this - effectively i have a list of products and want to be able to for example filter by price. As it's a large data set i'd want to utilise pagination as well.
At the moment, in my controller I have:
app.controller("MyController", function ($scope, $http){
$http.get('/api/ProductResults').
success(function (data, status, headers, config) {
$scope.results = data.results;
}).
error(function (data, status, headers, config) {
// log error
});
which will return a list of products and i will use to output a list.
The WebAPI will take parameters for page number and filters etc. but i'm not sure how to implement this in the code.
$http.get('/api/Products?page=1&minPrice=10')
I'd expect that i would get the current page number and min price from the URL parameters?

For the page number and minPrice, you could have scope variables that hold that info for you. Let's say you have a data grid on the page that includes navigation for the several pages of data you have. In this case, I would have a $scope.pageNumber variable bound to that data grid navigation item. A click on next or previous changes the value of $scope.pageNumber and on you $http you would use that $scope.pageNumber when constructing your request URL. The same goes for minPrice.
You can add your parameters to your request like this:
$http({
url: "/api/Products",
method: "GET",
params: {page : 1, minPrice : 10}
});

Related

rest api authorize using javascript

I was trying to create a api web data connector for tableau, but stuck in the authorization phase. I have a header key and value (e.g. api_header, value123) needs to pass using javascript.
// Download the data
myConnector.getData = function(table, doneCallback) {
$.getJSON("https://testapi/data",
function(resp) {
var tableData = [];
How to pass the key and value here?
I'm not sure .getJSON supports headers, at least the documentation doesn't mention them.
According to this answer, you could use .ajax instead like so:
$.ajax({
url: 'https://testapi/data',
headers: { api_header: 'value123' }
});

How can load the html, get the value and do some calculation by the javascript

I want to make a HTML using javascript to do the following task:
loading a HTML such as here
put the stock price value in a variable
display using that variable for calculation
You can't. XSS protection. Cross site contents can not be read by javascript. No major browser will allow you to do that. Your only option should be making a server-side call then do whatever you want
Contact that provider and request/buy access to their information. They might provide you with an endpoint of a Web API (or other service). You can then access it through (for instance) AngularJS:
// Simple GET request example:
$http({
method: 'GET',
url: 'http://somehosturl/api/stockprices/' // or whatever
}).then(function successCallback(response) {
$scope.stockPrices = response;
}, function errorCallback(response) {
HandleError(response);
});
(based on their general usage sample)

Changing an Angular ng-model with jQuery

I'm writing a Google Chrome extension which will interact directly with an AngularJS app.
Data is passed into Chrome's localstorage (chrome.storage.local) in one page, and then retrieved when the user loads my app's page.
The Angular is basically just a form with ng-models attached, like so:
<input id="q1" ng-model="inputName" >
<input id="q2" ng-model="inputTitle" >
<input id="q3" ng-model="inputAge" >
<button ng-click='submit()' >
The submit() function saves the ng-model values to my database to be retrieved later.
There are similar questions here which use older versions of AngularJS and I cannot get to work with Angular 1.2+ (I'm on Angular 1.2.2).
I've tried:
$('#q1').val(obj.title).trigger('input');
I've also tried:
$('#q1').val(obj.title);
angular.element($('#q1')).triggerHandler('input');
Neither work, in fact the latter makes no value change occur at all. What's the fix?
EDIT: Here's the Angular function being called on click, if there's something I can do in here to force ng-model to check the html input's value (that was set by jQuery in the Google Chrome extension) then that could be a solution:
$scope.submit = function(){
var theEvent = {
inputTitle: $scope.inputTitle,
inputName: $scope.inputName,
inputAge: $scope.inputAge
};
$rootScope.existing = theEvent;
$http({
url: '/api/saveToMongo/newEvent',
method: "POST",
data: theEvent
}).
success(function(data, status, headers, config) {
$cookies.oldSession = data;
$location.path('/collect');
}).
error(function(data, status, headers, config) {
console.log("There was an error submitting!");
});
};
All of these are returning null when I submit to my database, although if I type in the values manually then they work fine.

how to get data from controller to $scope in mvc using angularjs

I am new to angular js, I am using angular js with mvc5 application. I have created a module and controller in the js for angular. I have one action "View" in customer controller(MVC5). We need to show the all the customer in this view and i want to use "ng-repeat" here.
My problem is i am getting collection of customer as model, previously i was making foreach loop of model to show the customers. Now how i can add model into $scope data container so that i can use in ng-repeat.
What you have been doing till now is rendering the customers collection on server straight to the HTML returned to the client. What you want to do ideally is to render the HTML without the customers collection and have a call over $http service to your API controller to give you the data. From there is is easy, you
I suggest reading:
http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api
https://docs.angularjs.org/api/ng/service/$http
https://docs.angularjs.org/api/ng/directive/ngRepeat
Using $http in your controllers is far away from the best practice, but for simplification...the $http call in your controller could look like this:
$http({method: 'GET', url: '/api/customers'}).
success(function(data, status, headers, config) {
$scope.customers = data;
}).
error(function(data, status, headers, config) {
alert('error');
});
Then you ngRepeat in the view:
<ul>
<li ng-repeat="customer in customers">
{{customer.name}}
</li>
</ul>
For getting the data you need the http module to make call to server
https://docs.angularjs.org/api/ng/service/$http
you should be doing this via an api request to an MVC controller function that is returning json to your frontend and than use the data with $http or $resource to feed it into your controller.

Angular JS from rs.send()

Im generating some html code with angular in it, lets say it look something like this
exports.someApi = function(req,res){
res.send('<p>some html {{ "ENTER-PASSWORD" | translate }} </p>');
}
and in my controller im doing this
$http({method: 'GET', url: '/someapi'}).
success(function(data, status, headers, config) {
console.log(data);
$('.testPrint').html(data);
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
the problem is, I get resposne rigth, but angular code is not executed it print this in html
some html {{ "ENTER-PASSWORD" | translate }}
it should write some html enter password
How to do this?
This is not the way to go with Angular. Specifically, $(...).html(data) will set the data directly to DOM, bypassing Angular's compilation step. This step is where the "magic" happens" (i.e. in your case the {{...}} get bound to the model).
Some ways to do it:
Make a directive and use templateUrl: "/someapi". When the directive is to be displayed, Angular will load /someApi and compile it.
Use ng-include="'/someApi'" (note single quotes within double quotes; this is intentional). Maybe together with ng-if to hide the content when not wanted.
The ui-router provides advanced facilities for subview navigation that may suit your needs.
A must-read is this great answer.

Categories