Hi,
You can find here our complete guide on how to import required dependencies and ods-widgets library into your own project, and therefor use ODS Widgets in your pages directly (outside Opendatasoft platform)
https://github.com/opendatasoft/ods-cookbook/tree/master/widgets/external-use/
I’d like to clarify that ods-widgets library relies on AngularJS and not on Angular, that are two different framework and not compatible between each others.
Auto-translation 🪄
Bonjour, Vous pouvez trouver ici notre guide complet sur la façon d'importer les dépendances requises et la bibliothèque ods-widgets dans votre propre projet, et ainsi utiliser les widgets ODS directement dans vos pages (en dehors de la plateforme Opendatasoft) https://github.com/opendatasoft/ods-cookbook/tree/master/widgets/external-use/ Je tiens à préciser que la bibliothèque ods-widgets s'appuie sur AngularJS et non sur Angular, qui sont deux frameworks différents et non compatibles entre eux.
Thank you,
So if I unterstood well I can’t work on Angular 17?
Because what I did copied the code of a widget in the index of my project and it worked juste fine.
Auto-translation 🪄
Merci,Donc si j'ai bien compris je ne peux pas travailler sur Angular 17 ? Parce que ce que j'ai fait a copié le code d'un widget dans l'index de mon projet et cela a très bien fonctionné.
May I have a look ? I guess that you also imported the required dependencies (Jquery and Angular js 1.18) ?
You didn’t experienced any conflict between the two frameworks ? That is unexpected.
The last time we tried with ReactJs, it was pretty complicated
Auto-translation 🪄
Puis-je y jeter un œil ? Je suppose que vous avez également importé les dépendances requises (Jquery et Angular js 1.18) ? Vous n'avez rencontré aucun conflit entre les deux frameworks ? C'est inattendu. La dernière fois que nous avons essayé avec ReactJs, c'était assez compliqué.
And the web-page looks like this:
This is my index.html:
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>ODS Widgets Sandbox</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://static.opendatasoft.com/ods-widgets/latest-v2/ods-widgets.css">
</head>
<body>
<div ng-cloak ng-app="ods-widgets">
<app-root></app-root>
<div class="ng-cloak" ng-app="ods-widgets">
<ods-dataset-context
context="ctx"
ctx-dataset="us-hospitals"
ctx-domain="discovery">
<h2>
{{ ctx.dataset.metas.records_count | number }} hospitals
<i class="fa fa-hospital-o" aria-hidden="true"></i>
</h2>
<ods-text-search context="ctx" placeholder="NY, Psychiatric, Health"></ods-text-search>
<ods-table context="ctx" sort="nom"></ods-table>
<ods-map context="ctx" location="12,34.07143,-118.39588" basemap="land"></ods-map>
</ods-dataset-context>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.8.2/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.8.2/angular-locale_fr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/locale/fr.js"></script>
<script type="text/javascript" src="https://static.opendatasoft.com/ods-widgets/latest-v2/ods-widgets.min.js"></script>
<!-- ODS Translation dict. -->
<script type="text/javascript">
var ods = angular.module('ods-widgets');
ods.run(function(gettextCatalog) {
gettextCatalog.setStrings('fr', {
'Clear all': 'Tout effacer',
'More': 'Voir plus',
'Less': 'Voir moins',
'Download image': 'Télécharger l\'image',
'({{ $count }} options)': '({{ $count }} options)',
'All': 'Tous',
'Clear selection': 'Effacer la sélection',
'Filter': 'Filtre',
'Hide options': 'Cacher les options',
'No option selected': 'Aucune option sélectionnée',
'No options': 'Aucune option',
'Options are loading...': 'Options en cours de chargement...',
'Select one element': 'Sélectionnez un élément',
'Select one or more elements': 'Sélectionnez un ou plusieurs éléments',
'Show all': 'Tout afficher',
'Show options': 'Afficher les options',
'Show selection': 'Voir la sélection',
'{{ $count }} option selected':
'{{ $count }} option sélectionnée',
'{{ $count }} options sélectionnées'
]
});
gettextCatalog.setCurrentLanguage('fr');
});
</script>
<!-- urlsync patch -->
<script type="text/javascript">
angular.module('ods-widgets').config(function($locationProvider) {
$locationProvider.html5Mode(true);
});
</script>
<!-- custom basemap -->
<script type="text/javascript">
angular.module('ods-widgets').config(function(ODSWidgetsConfigProvider) {
ODSWidgetsConfigProvider.setConfig({
"basemaps": >
{
"label": "Stamen",
"provider": "stamen.toner"
},
{
"url": "https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png",
"strictTMS": false,
"provider": "custom",
"label": "Thunderforest",
"id": "land"
}
]
});
});
</script>
</body>
</html>
Auto-translation 🪄
Et la page Web ressemble à ceci :Voici mon index.html :ODS Widgets Sandbox
And the web-page looks like this:
This is my index.html:
...
I guess your msg is truncated.
As you copy pasted the html template for ods-widgets, and therefor this is working as there is only AngularJs framework loaded
Auto-translation 🪄
Et la page Web ressemble à ceci : Ceci est mon index.html : ... Je suppose que votre message est tronqué. Comme vous avez copié-collé le modèle HTML pour ods-widgets, cela fonctionne donc car seul le framework AngularJs est chargé
