Skip to main content
  • EN
Solved

Using ods widgets in angular project

  • September 26, 2024
  • 5 replies
  • 143 views
  • Translate
M

Hello, 

I discovered that there’s ods widgets we can use directly by copying its html, css codes and putting them in the angular project. However, ods tags (ods dataset context for exemple) are not known to angular. Can you help me so I can use the ods widgets.

Thanks

Auto-translation 🪄

Bonjour, j'ai découvert qu'il existe des widgets ods que l'on peut utiliser directement en copiant ses codes html, css et en les mettant dans le projet angular. Cependant, les balises ods (contexte du dataset ods par exemple) ne sont pas connues d'angular. Pouvez-vous m'aider pour que je puisse utiliser les widgets ods. Merci

Best answer by frederic.passaniti

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.
View original

    frederic.passaniti
    ODS Team

    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.
    Translate
    M

    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é.
    Translate
    frederic.passaniti
    ODS Team

    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é.
    Translate
    M

    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

    hôpitaux

    Translate
    frederic.passaniti
    ODS Team
    Mohamed Bouhamed wrote:

    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é
    Translate

    Reply


    Terms & ConditionsCookie settings

    Cookie policy

    We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

     
    Cookie settings
    Opendatasoft Terms & Conditions Cookie settings