Skip to content

IPSA Directive

Jump to bottom
Dain Brademan edited this page Mar 22, 2019 · 6 revisions

Using IPSA as an AngularJS directive

Overview

The spectrum renderer used in IPSA has been configured to be used as an AngularJS directive. Angular directives, read more here, allows a developer to extend Angular JavaScript functionality into HTML tags. In other words, you can integrate IPSA's interactive spectrum renderer into a custom website with a few easy steps.

Contents

Instructions

Dependencies

First, the following files need to be included in your web page.

Using The IPSA Directive

If you're unfamiliar with Angular syntax, I'd first suggest you check out some introductory material here.

Once the above mentioned files are included in your web page, the spectrum renderer can be included by adding the following HTML tag:

<div annotated-spectrum plotdata="myData.plotData" peptide="myData.peptide" settings="myData.settings" class="content"></div>

annotated-spectrum is the name of the directive.

plotdata is an attribute which passes the Javascript object myData.plotData to the directive.

peptide is an attribute which passes the Javascript object myData.peptide to the directive.

settings is an attribute which passes the Javascript object myData.settings to the directive.

Example Webpage Using IPSA Directive

My_Custom_Webpage.html

<html ng-app="myApp">
  <head>
    <!-- Javascript Dependencies -->
    <script src="angular.min.js"></script>
    <script src="d3.v3.min.js" charset="utf-8"></script>
    <script src="d3-ease.v1.min.js"></script>
    <script src="IPSA.js"></script>
    <script src="d3-tip.js"></script>

    <!-- CSS Dependencies -->
    <link href="Montserrat.css" rel="stylesheet">
    <link href="Open+Sans.css" rel="stylesheet">
    <link href="Inconsolata.css" rel="stylesheet">
    <link href="PeptideAnnotator.css" rel="stylesheet">

    <!-- Your custom Javascript code, which provides the spectrum renderer with the spectral data and annotations -->
    <script src="support/js/internal/MyCustomJavascript.js"></script>
  </head>
  <body>
    <div ng-controller="plotCtrl">
      <div annotated-spectrum plotdata="myData.plotData" peptide="myData.peptide" settings="myData.settings" class="content"></div>
    </div>
  </body>
</html>

Tutorials

Hosting IPSA

Clone this wiki locally