{"id":20407840,"url":"https://github.com/restorando/angular-server-repeat","last_synced_at":"2025-07-02T17:35:27.065Z","repository":{"id":26006236,"uuid":"29448793","full_name":"restorando/angular-server-repeat","owner":"restorando","description":"Convert server-side rendered content into `ngRepeat` like content","archived":false,"fork":false,"pushed_at":"2015-01-26T13:29:31.000Z","size":509,"stargazers_count":18,"open_issues_count":0,"forks_count":1,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-12T15:40:22.184Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/restorando.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-01-19T01:51:21.000Z","updated_at":"2023-04-13T14:25:59.000Z","dependencies_parsed_at":"2022-08-24T03:00:46.499Z","dependency_job_id":null,"html_url":"https://github.com/restorando/angular-server-repeat","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/restorando/angular-server-repeat","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/restorando%2Fangular-server-repeat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/restorando%2Fangular-server-repeat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/restorando%2Fangular-server-repeat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/restorando%2Fangular-server-repeat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/restorando","download_url":"https://codeload.github.com/restorando/angular-server-repeat/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/restorando%2Fangular-server-repeat/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263185231,"owners_count":23427143,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T05:26:29.664Z","updated_at":"2025-07-02T17:35:27.043Z","avatar_url":"https://github.com/restorando.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-server-repeat [![Build Status](https://travis-ci.org/restorando/angular-server-repeat.svg?branch=master)](https://travis-ci.org/restorando/angular-server-repeat)\n\nConvert server-side repeated content into `ngRepeat` compatible [with some restrictions](#caveats-and-restrictions).\n\n## Installation\n\nInclude the javascript file and add the `ServerRepeat` module as a dependency of your app.\n\n```js\nangular.module('YourApp', ['ServerRepeat']);\n```\n\n## Usage\n\nUse the `serverRepeat` directive in your server-side content using `ngRepeat`'s short syntax.\n\n```html\n\u003cdiv ng-controller=\"PostsController\"\u003e\n    \u003carticle server-repeat=\"post in posts\"\u003e\n        \u003ch4\u003eMy awesome first post\u003c/h4\u003e\n        \u003cspan class=\"author\"\u003eJohn Williams\u003c/span\u003e\n        \u003cdiv class=\"summary\"\u003eMy awesome first post summary\u003c/div\u003e\n    \u003c/article\u003e\n    \u003carticle server-repeat=\"post in posts\"\u003e\n        \u003ch4\u003eMy awesome second post\u003c/h4\u003e\n        \u003cspan class=\"author\"\u003ePeter Morello\u003c/span\u003e\n        \u003cdiv class=\"summary\"\u003eMy awesome second post summary\u003c/div\u003e\n    \u003c/article\u003e\n    \u003carticle server-repeat=\"post in posts\"\u003e\n        \u003ch4\u003eMy awesome last post\u003c/h4\u003e\n        \u003cspan class=\"author\"\u003eMark Lopez\u003c/span\u003e\n        \u003cdiv class=\"summary\"\u003eMy awesome last post summary\u003c/div\u003e\n    \u003c/article\u003e\n\u003c/div\u003e\n```\n\nThis will generate a `posts` array in `PostsController` scope, and every post will have a child scope with a reference to the current post in the `post` property, as if rendered client side using `ngRepeat`.\n\n![image](https://cloud.githubusercontent.com/assets/591992/5893438/dd360918-a4c2-11e4-88a9-80caeb6f5f2a.png)\n\nHaving a child scope for each member of the collection allows you to \"angularize\" each item independently. As an example let's hide each post summary and add a link in each post to show it.\n\n```html\n\u003cdiv ng-controller=\"PostsController\"\u003e\n    \u003carticle server-repeat=\"post in posts\"\u003e\n        \u003ch4\u003eMy awesome first post\u003c/h4\u003e\n        \u003cspan class=\"author\"\u003eJohn Williams\u003c/span\u003e\n        \u003cdiv class=\"summary\" ng-show=\"showSummary\"\u003eMy awesome first post summary\u003c/div\u003e\n        \u003ca href=\"\" ng-click=\"showSummary = true\" ng-hide=\"showSummary\"\u003eshow summary\u003c/a\u003e\n    \u003c/article\u003e\n    \u003carticle server-repeat=\"post in posts\"\u003e\n        \u003ch4\u003eMy awesome second post\u003c/h4\u003e\n        \u003cspan class=\"author\"\u003ePeter Morello\u003c/span\u003e\n        \u003cdiv class=\"summary\" ng-show=\"showSummary\"\u003eMy awesome second post summary\u003c/div\u003e\n        \u003ca href=\"\" ng-click=\"showSummary = true\" ng-hide=\"showSummary\"\u003eshow summary\u003c/a\u003e\n    \u003c/article\u003e\n    \u003carticle server-repeat=\"post in posts\"\u003e\n        \u003ch4\u003eMy awesome last post\u003c/h4\u003e\n        \u003cspan class=\"author\"\u003eMark Lopez\u003c/span\u003e\n        \u003cdiv class=\"summary\" ng-show=\"showSummary\"\u003eMy awesome last post summary\u003c/div\u003e\n        \u003ca href=\"\" ng-click=\"showSummary = true\" ng-hide=\"showSummary\"\u003eshow summary\u003c/a\u003e\n    \u003c/article\u003e\n\u003c/div\u003e\n```\n\nWithout a child scope, the snippet above would hide all post summaries as expected, but clicking on any link would display all the summaries instead of the selected one.\n\n### Data Binding\n\nIn the previous example, each child scope has a `post` empty object. If you need to use a post's data you can use the `server-bind` directive.\n\n```html\n\u003cdiv ng-controller=\"PostsController\"\u003e\n    \u003carticle server-repeat=\"post in posts\"\u003e\n        \u003ch4 server-bind=\"title\"\u003eMy awesome first post\u003c/h4\u003e\n        \u003cspan class=\"author\" server-bind=\"author\"\u003eJohn Williams\u003c/span\u003e\n        \u003cdiv class=\"summary\" server-bind=\"summary\"\u003eMy awesome first post summary\u003c/div\u003e\n    \u003c/article\u003e\n    \u003carticle server-repeat=\"post in posts\"\u003e\n        \u003ch4 server-bind=\"title\"\u003eMy awesome second post\u003c/h4\u003e\n        \u003cspan class=\"author\" server-bind=\"author\"\u003ePeter Morello\u003c/span\u003e\n        \u003cdiv class=\"summary\" server-bind=\"summary\"\u003eMy awesome second post summary\u003c/div\u003e\n    \u003c/article\u003e\n    \u003carticle server-repeat=\"post in posts\"\u003e\n        \u003ch4 server-bind=\"title\"\u003eMy awesome last post\u003c/h4\u003e\n        \u003cspan class=\"author\" server-bind=\"author\"\u003eMark Lopez\u003c/span\u003e\n        \u003cdiv class=\"summary\" server-bind=\"summary\"\u003eMy awesome last post summary\u003c/div\u003e\n    \u003c/article\u003e\n\u003c/div\u003e\n```\n\nNow we have the html rendered content parsed and populated into the `post` object in each child scope.\n\n![image](https://cloud.githubusercontent.com/assets/591992/5893513/23a0aedc-a4c6-11e4-9013-5191d4d09feb.png)\n\n##### Note:\n`server-bind` works as `ng-bind`, so changing the value of a binded property like the example below will reflect the property update in the DOM.\n\n```javascript\n$scope.posts[0].title = \"My new title\";\n```\n\n#### Adding aditional data that is not rendered in the DOM\n\nThe `server-bind` directive can be used in the same element that uses the `server-repeat` directive. In this case, it will expect a JSON representation with properties that will be extended to the `post` object.\n\nExample:\n\n```html\n\u003cdiv ng-controller=\"PostsController\"\u003e\n    \u003carticle server-repeat=\"post in posts\" server-bind='{\"id\":1,\"tags\":[\"misc\"]}'\u003e\n        \u003ch4 server-bind=\"title\"\u003eMy awesome first post\u003c/h4\u003e\n        \u003cspan class=\"author\" server-bind=\"author\"\u003eJohn Williams\u003c/span\u003e\n        \u003cdiv class=\"summary\" server-bind=\"summary\"\u003eMy awesome first post summary\u003c/div\u003e\n    \u003c/article\u003e\n    \u003carticle server-repeat=\"post in posts\" server-bind='{\"id\":2,\"tags\":[\"tools\", \"misc\"]}'\u003e\n        \u003ch4 server-bind=\"title\"\u003eMy awesome second post\u003c/h4\u003e\n        \u003cspan class=\"author\" server-bind=\"author\"\u003ePeter Morello\u003c/span\u003e\n        \u003cdiv class=\"summary\" server-bind=\"summary\"\u003eMy awesome second post summary\u003c/div\u003e\n    \u003c/article\u003e\n    \u003carticle server-repeat=\"post in posts\" server-bind='{\"id\":3,\"tags\":[\"music\"]}'\u003e\n        \u003ch4 server-bind=\"title\"\u003eMy awesome last post\u003c/h4\u003e\n        \u003cspan class=\"author\" server-bind=\"author\"\u003eMark Lopez\u003c/span\u003e\n        \u003cdiv class=\"summary\" server-bind=\"summary\"\u003eMy awesome last post summary\u003c/div\u003e\n    \u003c/article\u003e\n\u003c/div\u003e\n\n```\n\nWill produce:\n\n![image](https://cloud.githubusercontent.com/assets/591992/5893560/e78cbf42-a4c7-11e4-88a1-1bb2afb6422c.png)\n\n#### Iteration properties\n\nEach child scope has `$first`, `$last`, `$middle`, `$even` and `$odd` variables as in `ngRepeat`.\n\n## Motivation\n\nIn Restorando we have full client side apps that use AngularJS intensively, and server rendered apps with custom javascript for some pages. Since we had a great experience with AngularJS in the client side apps, we started to slowly remove the legacy javascript files in our \"server-side apps\" and replace them with reusable angular directives.\n\nDuring our work we discovered that we wanted to add functionality to our \"repeated\" html snippets, but we didn't want to immerse ourselves in a big refactor to render this data client-side using `ngRepeat`. Doing this would also prevent the search engines to index our content.\n\nSearching on the web, we found lots of people trying to accomplish the same thing, such as [this question](http://stackoverflow.com/questions/11838639/html-template-filled-in-server-side-and-updated-client-side), [this one](http://stackoverflow.com/questions/25463409/angularjs-server-side-rendering-of-ngrepeat-directive) and [this other one](http://stackoverflow.com/questions/20764100/build-html-in-server-and-bind-to-ng-repeat), none of them being successful.\n\nUsing this directive in our own applications made us more agile, and it allowed us to replace our old javascript code into AngularJS faster and easily.\n\n## Caveats and restrictions\n\n* Changes that modify the collection's length (adding or removing items) won't be reflected in the DOM.\n* For the moment you can only bind \"flat level\" properties using `server-bind`. Deep level properties will be considered for a future version.\n\n## License\n\nCopyright (c) 2015 Restorando\n\nMIT License\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frestorando%2Fangular-server-repeat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frestorando%2Fangular-server-repeat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frestorando%2Fangular-server-repeat/lists"}