Usage - Intermediate

One of the nice things that you can leverage is some of the declarative constructs that AngularJS offers to simplify the creation of a plasmid. AngularJS provides a number of constructs for repetition, conditional logic, and event handling without necessarily having to get into Javascript programming. This section goes through some examples of using the AngularPlasmid directives with AngularJS

Step 1 - Declare the plasmid

Let's start with a basic plasmid.

HTML

<!DOCTYPE html>
<html>
    <head>
        <script src='angularplasmid.complete.min.js'></script>
    </head>
    <body>
        <plasmid sequencelength='1000'>
            <plasmidtrack radius='75' style='fill:#f0f0f0;stroke:#ccc'>
            </plasmidtrack>
        </plasmid>
    </body>
</html>

Result

Step 2 - Add 10 markers

AngularPlasmid directives support the ng-repeat directive provided by AngularJS. Using this, you can make the task of creating markers vastly easier.

Let's add 10 markers to the current plasmid, at locations 50, 90, 130, 200, 350, 400, 450, 600, 735, and 900. We'll assume that they are all 10 nucleotides in length for now.

HTML

<!DOCTYPE html>
<html>
    <head>
        <script src='angularplasmid.complete.min.js'></script>
    </head>
    <body>
        <plasmid sequencelength='1000'>
            <plasmidtrack radius='75' style='fill:#f0f0f0;stroke:#ccc'>
                <trackmarker ng-repeat='n in [50,90,130,200,350,400,450,600,735,900]' start='{{n}}' end='{{n+20}}' style='fill:#9cf;stroke:#036'></trackmarker>
            </plasmidtrack>
        </plasmid>
    </body>
</html>

Result

The ng-repeat declares and iterates n over the given array values. The start and end attributes can use the iterated value by enclosing the value in double-braces {{...}}. This tells AngularJS to interpolate the values for the start and end attributes.

Step 3 - Add labels

Since ng-repeat repeats the entire code block, you can also declare additional elements to be repeated. For instance, to include labels for each of the markers, simply add a markerlabel element within each marker:

HTML

<!DOCTYPE html>
<html>
    <head>
        <script src='angularplasmid.complete.min.js'></script>
    </head>
    <body>
        <plasmid sequencelength='1000'>
            <plasmidtrack radius='75' style='fill:#f0f0f0;stroke:#ccc'>
                <trackmarker ng-repeat='n in [50,90,130,200,350,400,450,600,735,900]' start='{{n}}' end='{{n+20}}' style='fill:#9cf;stroke:#036'>
                    <markerlabel text='Pos [{{n}}]' vadjust='35' style='font-size:10px'></markerlabel>
                </trackmarker>
            </plasmidtrack>
        </plasmid>
    </body>
</html>

Result

Now, you'll get 10 labels positioned relative to each of the 10 markers that contain them.

Step 4 - Add additional elements

To make this a complete example, let's add a tracklabel and some trackscale elements to provide the finished output.

HTML

<!DOCTYPE html>
<html>
    <head>
        <script src='angularplasmid.complete.min.js'></script>
    </head>
    <body>
        <plasmid sequencelength='1000'>
            <plasmidtrack radius='75' style='fill:#f0f0f0;stroke:#ccc'>
                <trackmarker ng-repeat='n in [50,90,130,200,350,400,450,600,735,900]' start='{{n}}' end='{{n+20}}' style='fill:#9cf;stroke:#036'>
                    <markerlabel text='Pos [{{n}}]' vadjust='35' style='font-size:10px'></markerlabel>
                </trackmarker>
                <tracklabel text='pBR1' style='font-size:25px;font-weight:bold'></tracklabel>
                <trackscale interval='10' direction='in' style='stroke:#ccc'></trackscale>
                <trackscale interval='100' direction='in' showlabels='1' style='stroke:#f00;stroke-width:2p' labelvadjust='10' labelstyle='font-size:8px;fill:#999'></trackscale>
            </plasmidtrack>
        </plasmid>
    </body>
</html>

Result

Next Steps : AngularPlasmid API >>