Generating SVG using AngularJS

Generating SVG using AngularJS.markdown

Generating SVG using AngularJS

This pen has been constructed to let you get at quick start at making AngularJS and Twitter bootstrap pens. 
You should simply "Fork" it and start coding! :-) 
The original pen is here: http://codepen.io/netsi1964/pen/Dwvsp

A Pen by Sten Hougaard on CodePen.

License.

index.html

<div class="container" ng-app="codepen">
    <div class="row">

        <div class="container" ng-controller="MainCtrl">
            <div class="row"> 
                <h1>Generating SVG using AngularJS</h1>
              <blockquote>This pen is forked from  <a href="http://codepen.io/netsi1964/pen/Dwvsp">http://codepen.io/netsi1964/pen/Dwvsp</a>, to get a quick start into AngularJS and Twitter bootstrap. <br />
                Here I use AngularJS to build a simple <code>SVG</code> (<strong>S</strong>calable <strong>V</strong>ector <strong>G</strong>raphics) drawing. The simple graphics may remind of you of a road :-) Oh, and since AngularJS offers <code>2-way-binding</code> you can change the drawing by changing the values in the input box. Pretty neat! :-)
              </blockquote>
            </div>
            <div class="row">
                <div class="col-md-6">
                  <label for="vv">The values</label> <input id="vv" ng-change="v = vv.split(',')" type="text" ng-model="vv" /> <label for="x">x</label> <input id="x" type="number" ng-model="x" /> <label for="m" title="A ”multiply“ value">m</label> <input id="m" type="number" ng-model="m" min="2" max="100" /><br />
                  Using AngularJS you can even generate things like SVG drawings. In this simple example I repeat values in an array stored in the AngularJS <code>controller</code>:
                  <pre>$scope.v = [{{vv}}]</pre>
I then generate some SVG elements using simple math:
                  <pre>
&lt;rect ng-repeat="a in v" x="&#123;&#31;&#123;x-a*15&#125;&#31;&#125;px" y="&#123;&#31;&#123;a*m}}px"  width="&#123;&#31;&#123;a}}px" height="&#123;&#31;&#123;4*a}}px" /&gt;</pre>
The math within the curly brackets are replaced by AngularJS to the calculated result and then become a value for the attribute in the SVG element.

              </div>
                <div class="col-md-6">

    <svg style="width: 100%; height: 200px;" onclick="alert()">
      <line ng-repeat="a in v" x1="0" y1="{{a*m+4*a}}" x2="100%" y2="{{a*m}}" style="stroke:#eee;" />
      <line ng-repeat="a in v" x1="0" y1="{{a*m-4*a}}" x2="100%" y2="{{a*m}}" style="stroke:#eee;" />
      <line ng-repeat="a in v" x1="{{a*m+4*a}}" y1="{{a*m+4*a}}" x2="100%" y2="{{a*m}}" style="stroke:#eee;" />
      <line ng-repeat="a in v" x1="{{a*m-14*a}}" y1="{{a*m+4*a}}" x2="100%" y2="{{a*m+4*a}}" style="stroke:#eee;" />
      <rect ng-repeat="a in v" x="{{x-a*(m*1.5)}}px" y="{{a*m}}px"  width="{{a}}px" height="{{4*a}}px" />
      <rect ng-repeat="a in v" x="{{(x*1.01)+a*(m*1.5)}}px" y="{{a*m}}px"  width="{{a}}px" height="{{4*a}}px" />


    </svg>

              </div>
            </div>
        </div>
    </div>
</div>

script.js

var app = angular.module('codepen', []);
var $globalscope;
app.controller('MainCtrl', function($scope) {
  $globalscope = $scope;
  $scope.hello = 'world';
  $scope.vv = ".1,.4,.64,1.2,1.6,4,5,6,7,9,13,15,27,31,34,36,37,42,45,50";
  $scope.v = $scope.vv.split(',');
  $scope.x = 300;
  $scope.m = 10;
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

h1.ng {
  display: inline;
}
.narrow {
  padding-right: 0px;
  padding-left: 0px;
}
svg {
  box-shadow: 0px 0px 10px black;
}
rect {
  fill: rgba(0,0,0,.7);
}
input[type="number"] {
  width: 4em;
}