Socialspace for Angular

Integrate Socialspace in your own angular app.

Dependencies

• angular (v1.5) - https://angularjs.org/
• angular-sanitize (v1.5) - https://angularjs.org/
• angular-translate - https://angular-translate.github.io/
• packery - http://packery.metafizzy.co/
• fontawsome - http://fontawesome.io/icons/
• momentjs - http://momentjs.com/

Get Started

Add styles...

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all">
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css">
<link rel="stylesheet" href="[SOCIALSPACE-FOLDER]/dist/styles/themes/base.css">

Add scripts...

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.7/angular-sanitize.min.js"></script>
<script type="text/javascript" src="../node_modules/angular-translate/dist/angular-translate.min.js"></script>
<script type="text/javascript" src="../node_modules/moment/min/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/packery/2.1.1/packery.pkgd.min.js"></script>
<script type="text/javascript" src="[SOCIALSPACE-FOLDER]/dist/js/socialspace.js"></script>

Inject the socialspace module to you angular app...

angular
    .module('yourApp', [
        'socialspace',
    ])

Add the Socialspace component.

<socialspace mode="wall" channel="[CHANNEL ID]" header="true" filter="true" wall-servicetile="true" fallback="true"></socialspace>

DONE!

Localisation (ngTranslate)

ngTranslate is used to translate different texts and momentjs is used for dates and times.

If you already use ngTranslate in your project you can disable the socialspace configuration of ngTranslate to prevent conflicts by setting window.socialspaceTranslate = false; Remember to copy over the translation map for all the social space translations located in src/app/config/translate.js.

To change translations or localisation settings you can have a look to the file dist/locale/locale-de_DE.js which shows how to change the localisation for ngTranslate and momentjs.

Custom Filters

To apply or remove custom filters you can simply use the socialspaceFilterService.

Get Custom Filters

socialspaceFilterService.getCustomFilters();

Set Custom Filter

socialspaceFilterService.setCustomFilter(filterString, resetFilters, resetCustomFilters)

filterString: lucene query style string e.g. (kinds:text) AND (services:facebook OR services:twitter)

resetFilters: set to true to reset generic filters to avoid possible conflicts.

resetCustomFilters: set to true to reset other custom filters before applying the new one.

Remove Custom Filter

socialspaceFilterService.removeCustomFilter(filterString)

filterString: the query string you want to remove.

Reset Custom Filters

To reset all applied custom filters just call socialspaceFilterService.resetCustomFilters().