I am using angularJS, Play framework, Java and Mongo Db, Help me to implement Server side Pagination
You have to use limit() and skip() in MongoDB.
Example: I have Users collection.
db.getCollection('users').find({}).limit(10).skip(0)
You have to pass your URL with ?limit=10&offset=0 like https://domain/api/users?limit=10&offset=0
You have to use offset in skip().
limit() is for how many records you display in your page..
skip() is for records skip
I have a Marionette application which is using Backgrid control to fetch records from a backend API.
My requirement :
While Bootstrapping fetch 100 records and split them into 5 pages of 20 each.
For the first 5 pages implement Client side pagination i.e no call to backend.
To load the next 100 records on the 6th page make a backend call to fetch the records.
Can this be achieved using the "infinite" mode setting in backgrid paginator?
Any suggestions will be helpful.
I generated one application using JHipster V3. I am trying to modify the search functionality and adding some kind of filter where user select some filter and hit search button and my angular search controller will make a POST call to my API.I did modification on server side to support filter search and return data.
Now I want to modify pagination link so that they also make a POST call with selected filter data instead of GET.
I did some investigation and found that when user click on link call goes to 'ui-bootstrap-tpls.min.js' [selectPage] function.
I dont want to make any changes on this js as it is global and will work for other UI screen.
Is there any better approach to implement such requirements?
I'm building a UI using AngularJS that consumes a REST service:
Here is the Server API
/items/ GET
/items/:id GET
/items/ POST (to create new item)
/items/:id PUT (to edit item)
/items/:id DELETE
What are the best practices when setting up the routes in Angular? These routes would map to the server REST API, but obviously there is a problem. I'm guessing I would need the action as part of the URL, right? Something like this:
Angular Routes:
/items/
/items/:id
/items/new
/items/:id/edit
/items/:id/delete
However the above pattern also has a problem. /items/new will match both /items/:id and /items/new so what is the best practice when setting up a route for create?
Also keep in mind that the client side, Angular, routes you're defining could be dependent on your UI. The routes you've defined are more like a traditional web application where you click an "Add New" button that takes you to a new page that has a form that you fill out. However, this may not be the pattern you use for a Single Page App (SPA) as is often created with Angular.
By this I mean that most of the SPA apps I've done don't actually have a standalone "/items/new" route on the client side. Instead, the "/items/new" functionality is handled on the "/items/" route/partial ("page" in traditional web app terms). This page lists the existing items, and there is a form on this page that you can fill out to create a new item. Or, there is an "Add New" button on this page (just like a traditional web app); but, clicking it either slides in a modal form or ng-shows a form that is already defined (but initially hidden) on the /items/ partial template.
Upon submission, the controller hits against "POST /items/" on the server to create the new item, updates scope with the return value from the POST (assuming success, this would be the new item info), and clears/re-hides the "new" form.
Bottom line -- keep in mind that in a SPA you may not actually need a "/items/new" if the UI is such that the new is handled as a capability of the item list page. Of course, if you're needing it to be a standalone page as an addressable endpoint (i.e. you're planning to link to this from multiple places, not just from within the app), then you'll obviously need a direct route.
In our case, we typically don't need a named route for it in our apps and we just have it serviced as a capability of the "/items/" route.
Using UI-Router we can setup client side routing.
Make sure you disable html5 routes, because some browsers still doesn't support html5 and they hit the server api instead of hitting the client route
You can do this by setting $locationProvider.html5Mode(false); in app.config method while defining angular app
/items/ - this is for listing items
/items/{id:[0-9]{1,4}} - this is for displaying one item in detail
/items/add - for displaying new item form
/items/:id/edit - for displaying existing item in Form for editing
/items/:id/delete - **This is not required, I mean you just hit the API when
use clicks delete, we cant show any deletion form**
You can use regex for params '/items/{id:[0-9]{1,4}}' this means allow only numbers 0 to 9 and 1 to 4 characters long
Can be used AngularJS for the following scenario?
a php back end based on a framework like Laravel or Codeigniter which is used to manage MySQL Data.
On the Frontend AngularJS which shows Data via API (Angular -> <- Codeigniter, Laravel).
The user has the possibility to filter back end data with option Boxes and here is the thing on what I'm not sure about.
On each option I would like to deeplink the result of filtered. How would I do that with angular. I read about routing and I'm not really sure if this would be the workaround.
You could try $location.search() to change URL when updating the current filter. And on page load, read the $location.search() and preset the filters. If you are using ngRoute, you may want to set the reloadOnSearch to false for the route which contains the data so that the controller and view aren't recreated when you set the search.
Perhaps the below question and answer could also help
AngularJS Paging with $location.path but no ngView reload