Overview Gettings Started

Getting started

It takes only 3 easy steps to get started with PDB Component Library.

<!-- Complied & minified library css -->
<link rel="stylesheet" href="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/css/pdb.component.library.min-1.0.0.css" />

<!-- Dependencey scripts (these can be skipped if already included in page) -->
<script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/d3.min.js"></script>
<script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/angular.1.4.7.min.js"></script>

<!-- Complied & minified library JS -->
<script src="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/js/pdb.component.library.min-1.0.0.js"></script>

As soon as you've got the dependencies and library files included in your application page you just need to declare :

I) If you are developing an AngularJs Application

angular.module('myModule', ['pdb.component.library']);

II) For other Applications, add this code in your script

(function () {
'use strict';
angular.element(document).ready(function () {
    angular.bootstrap(document, ['pdb.component.library']);

Once you install the Component Library you can add any component to your application page just like you add html elements.

For example, element below will add the LiteMol viewer :

<pdb-lite-mol pdb-id="'1cbs'"></pdb-lite-mol>

Individual component mark-up/definition and their parameter attributes are explained in details on the documentation page