Getting started
It takes only 3 easy steps to get started with PDB Component Library.
- Include Dependencies and Library CDN in your application page.
- Install the Component library
- Use Component defination / markup to render them anywhere in the page
Dependencies and Library CDN :
<!-- Complied & minified library css --><link rel="stylesheet" href=/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=/pdbe/pdb-component-library/libs/d3.min.js"></script><script src=/pdbe/pdb-component-library/libs/angular.1.4.7.min.js"></script><!-- Complied & minified library JS --><script src=/pdbe/pdb-component-library/v1.0/js/pdb.component.library.min-1.0.0.js"></script>Installation :
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']);
});
}());Components :
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