Paging-"Tutorial" & Nested JSON resource (Beginner)

[Programmieraffe]

Hey,

I just started with angularjs (pretty nice framework imo) today and I have a few questions:

1) I have a service like that:

 

angular.service('Project', function($resource) {

 return $resource('../../public/api/project/:projectId.json', {}, {

   query: {method: 'GET', params: {projectId: 'list'}, isArray: false}

 });

});

And my response is:    {"projects":[{"id":"3", [...]}]}

How can I map my template to use response.projects?

Controller: 

this.projects = Project_.query(); //how to get .projects?

Template: http://pastebin.com/K0GxMHNi

2.) How can I use a "global" prefix for my resource url? (because my backend is not in the same directory level)

3.) Are there any Paging / Grid How-Tos or Plugins?

Thanks in advance!

Matthias

[Programmieraffe]

Number 1 is solved, silly mistake.

[Programmieraffe]

I tried to integrate jpaginate (http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/) as a widget, but it seems that it is not loaded correctly? (Error: "Method .paginate not found for [object Object]")

http://pastebin.com/84drVv74

Is there a special way to load jquery? I did not really understand the explanations in the docs regarding this. Right now my index.html looks like this: http://pastebin.com/TYQkMHQh

[Misko Hevery]

Hi,

2.) How can I use a "global" prefix for my resource url? (because my backend is not in the same directory level)

you just have to declare a var and then use it.

angular.service('baseUrl', function($resource) {

  return 'http://baseurl';

});

angular.service('Project', function($resource, baseUrl) {

 return $resource(baseUrl + '/project/:projectId.json', {}, {

   query: {method: 'GET', params: {projectId: 'list'}, isArray: false}

 });

});

3.) Are there any Paging / Grid How-Tos or Plugins?

Integrating with other plugins which manipulate DOM is tricky since you have to coordinate the DOM updates of angular with that of the paginator. The easiest way to do pagination is like this

<div ng:repeat="item in getPage(source, pageNo)">

</div>

<

then in controller define

this.getPage = function(source, pageNo) {

  var list = [];

  // figure out how to get the right items into the list for this page

  return list;

}

-- misko

--
You received this message because you are subscribed to the Google Groups "angular" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/QulEfEMvtEMJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Programmieraffe]

Hey Misko,

thank you very much for the answer. Second problem is now also solved. (The resources-implementation is really great and useful!)

Is there a jsfiddle-Example somewhere regarding the paging-problem? Because I'm stuck at updating one hashSearch-parameter and then trigger the data to be reloaded: http://jsfiddle.net/programmieraffe/ZbRQ3/52/

My goal is to achieve something like this:

"#/project/list?page=2&sort=id&sortType=desc"

[Misko Hevery]

I think here is some relevant discussion: https://github.com/angular/angular.js/issues/354 see this commit: https://github.com/IgorMinar/angular.js/commit/e004378d100ce767a1107180102790a9a360644e

--
You received this message because you are subscribed to the Google Groups "angular" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/VinHUFRfxIEJ.

[Vojta Jina]

Yep, this is already in 0.9.19: https://github.com/angular/angular.js/commit/dc0b0c77c7ba3e419442ec639356ab5d3ba7efbe

See http://docs.angularjs.org/#!/api/angular.service.$route

We plan to add another config param `reloadOnPath` - with this set to false, route '#/some/:id' won't reload when hash changes from '#/some/12' to '#/some/99'

V.

[Adam Pohorecki]

Awesome, this is very useful.

> --
> You received this message because you are subscribed to the Google Groups
> "angular" group.
> To view this discussion on the web visit

> https://groups.google.com/d/msg/angular/-/EYuVMJNBjOgJ.

[Matthias Andrasch]

Okay cool, thanks for the explanation! 

I now wanted to optimize my script a little bit, but I got stuck when trying to watch the value change of multiple selects:

http://jsfiddle.net/programmieraffe/mnCXp/

How would be the best way to achieve this? (ng:click="optionChange()" on every select element?)

[Vojta Jina]

When new scope is released, your code will work ($watching objects), in meantime, this will work:

    // multiple options - how to achieve?
    this.$watch('gridOptions.sortDirection + gridOptions.limit',function(gridOptions){
        console.log('gridOptions changed',gridOptions);
        // update hashSearch (route -> reloadOnSearch=false)
        $location.hashSearch = gridOptions;
    });

V.

[Matthias Andrasch]

Nice, thanks Vojta!

One addition to this:

I had to use self.gridOptions for the new hashSearch because the gridOptions-value given by the watch-function is a string where the values are "glued" together.

  this.$watch('gridOptions.sortDirection + gridOptions.limit',function(gridOptions){

        console.log('gridOptions changed',newGridOptionsString);

        // update hashSearch (route -> reloadOnSearch=false)

        $location.hashSearch = self.gridOptions;
    });

Updated fiddle: http://jsfiddle.net/programmieraffe/mnCXp/

[lucassus]

Here you can find complex grid implementation in

https://github.com/lucassus/angular-todolist/blob/master/app/assets/javascripts/app/services/grid.js

https://github.com/lucassus/angular-todolist/blob/master/app/assets/javascripts/app/widgets/grid.js

It has pagination, sorting, in-place editing, dirty state checking etc.

Generally this implementation works, but it's buggy.. this project is only my angularjs sandbox ;)

Can someone smarter that me do a code review for this grid?

Maybe one on these days I create reusable grid component.

[Matthias Andrasch]

Hey Lucassus, thanks for grid example! I will look into it soon and provide feedback.

[Igor Minar]

This looks interesting do you have a demo of these widgets posted somewhere online?

/i

--

You received this message because you are subscribed to the Google Groups "angular" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/I-hj94XXRCYJ.

[mark chen]

Is there a example on http://docs.angularjs.org/ regarding simple
pagination for a list of items, limiting to 10 results a page?

Thank you for your assistance

[Witold Szczerba]

Do you want to fetch all the data from the server in one go and then
do a client side pagination or do you want to do a lazy downloading?
In either case, expose an array of maximum 10 items in your controller
and use ng:repeat over it. Just make sure your list does not have more
than 10 items. Next thing would be to add buttons to switch pages and
bind that buttons to the methods in controller which replaces the
items in a list, either by downloading other page from server or by
copying other ten items from array where all of the items are stored.
Since your controller would perform just a business logic, without
being bothered by a DOM manipulation or HTTP requests stuff (resulting
in pure and clean JavaScript), you can write unit-tests very easily,
so no need to play with the manual testing (paste URL, click here,
there, damn not working, repeat...) in a browser during that coding
session. Once it is all ready and your tests are fine, fire your
browser and see how it all works :)

Regards,
Witold Szczerba

> --
> You received this message because you are subscribed to the Google Groups "AngularJS" group.

[rur]

Here is a little demo with a very simplified approach.

http://jsfiddle.net/rur_d/rvYxD/

Obviously this isn't how you would actually want it to work but you
get the gist of it.

On Oct 6, 5:33 pm, Witold Szczerba <pljosh.m...@gmail.com> wrote:
> Do you want to fetch all the data from the server in one go and then
> do a client side pagination or do you want to do a lazy downloading?
> In either case, expose an array of maximum 10 items in your controller
> and use ng:repeat over it. Just make sure your list does not have more
> than 10 items. Next thing would be to add buttons to switch pages and
> bind that buttons to the methods in controller which replaces the
> items in a list, either by downloading other page from server or by
> copying other ten items from array where all of the items are stored.
> Since your controller would perform just a business logic, without
> being bothered by a DOM manipulation or HTTP requests stuff (resulting
> in pure and clean JavaScript), you can write unit-tests very easily,
> so no need to play with the manual testing (paste URL, click here,
> there, damn not working, repeat...) in a browser during that coding
> session. Once it is all ready and your tests are fine, fire your
> browser and see how it all works :)
>
> Regards,
> Witold Szczerba
>

> On 6 October 2011 09:11, mark chen <markche...@gmail.com> wrote:
>
>
>
>
>
>
>
> > Is there a example onhttp://docs.angularjs.org/regarding simple

[mark chen]

Hi rur. This example is helpful. Thanks. One question though. If I'm
using the $resource service to get an array of projects (instead of
pages), how do I populate the data in the controller, given that
$resource returns an empty reference?

[rur]

The $resource service returns an empty object which is populated when
the remote call returns. You simply apply the object in your
controller and it update once the data is available. Your view will
automatically update through the magic of data binding!

Just keep in mind, if your retrieving an Array directly, you need to
set 'isArray' to true, otherwise the $resource service wont know what
kind of empty object to return (it returns {} by default).

All you really need to do to that demo to make the pages data come
from a remote service is inject $resource and apply the empty Array to
pages.

Hope that helps,

rur

[Igor Minar]

all resource methods also take a success and error callbacks, so you can post-process responses if you want. if you don't need that just assign the response to the scope (just as rur wrote) and wait for the magic to happen.

/i