Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/restorando/angular-server-repeat
Convert server-side rendered content into `ngRepeat` like content
https://github.com/restorando/angular-server-repeat
Last synced: about 1 month ago
JSON representation
Convert server-side rendered content into `ngRepeat` like content
- Host: GitHub
- URL: https://github.com/restorando/angular-server-repeat
- Owner: restorando
- License: mit
- Created: 2015-01-19T01:51:21.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2015-01-26T13:29:31.000Z (almost 10 years ago)
- Last Synced: 2024-04-20T17:43:21.716Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 497 KB
- Stars: 18
- Watchers: 13
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# angular-server-repeat [](https://travis-ci.org/restorando/angular-server-repeat)
Convert server-side repeated content into `ngRepeat` compatible [with some restrictions](#caveats-and-restrictions).
## Installation
Include the javascript file and add the `ServerRepeat` module as a dependency of your app.
```js
angular.module('YourApp', ['ServerRepeat']);
```
## Usage
Use the `serverRepeat` directive in your server-side content using `ngRepeat`'s short syntax.
```html
My awesome first post
My awesome first post summary
My awesome second post
My awesome second post summary
My awesome last post
My awesome last post summary
```
This 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`.
Having 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.
```html
My awesome first post
My awesome first post summary
show summary
My awesome second post
My awesome second post summary
show summary
My awesome last post
My awesome last post summary
show summary
```
Without 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.
### Data Binding
In 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.
```html
My awesome first post
My awesome first post summary
My awesome second post
My awesome second post summary
My awesome last post
My awesome last post summary
```
Now we have the html rendered content parsed and populated into the `post` object in each child scope.
##### Note:
`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.
```javascript
$scope.posts[0].title = "My new title";
```
#### Adding aditional data that is not rendered in the DOM
The `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.
Example:
```html
My awesome first post
My awesome first post summary
My awesome second post
My awesome second post summary
My awesome last post
My awesome last post summary
```
Will produce:
#### Iteration properties
Each child scope has `$first`, `$last`, `$middle`, `$even` and `$odd` variables as in `ngRepeat`.
## Motivation
In 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.
During 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.
Searching 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.
Using 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.
## Caveats and restrictions
* Changes that modify the collection's length (adding or removing items) won't be reflected in the DOM.
* For the moment you can only bind "flat level" properties using `server-bind`. Deep level properties will be considered for a future version.
## License
Copyright (c) 2015 Restorando
MIT License
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.