angular/angular.js

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 756 553" width="63pc" height="553pt" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata> Produced by OmniGraffle 6.5.2 <dc:date>2013-11-06 19:46:59 +0000</dc:date></metadata><defs><font-face font-family="Arial" font-size="12" panose-1="2 11 7 4 2 2 2 2 2 4" units-per-em="1000" underline-position="-105.95703" underline-thickness="104.98047" slope="0" x-height="518.5547" cap-height="715.8203" ascent="905.27344" descent="-211.91406" font-weight="bold"><font-face-src><font-face-name name="Arial-BoldMT"/></font-face-src></font-face><font-face font-family="Courier" font-size="11" units-per-em="1000" underline-position="-178.22266" underline-thickness="57.617188" slope="0" x-height="462.40234" cap-height="594.72656" ascent="753.90625" descent="-246.09375" font-weight="500"><font-face-src><font-face-name name="Courier"/></font-face-src></font-face><font-face font-family="Arial" font-size="11" panose-1="2 11 7 4 2 2 2 2 2 4" units-per-em="1000" underline-position="-105.95703" underline-thickness="104.98047" slope="0" x-height="518.5547" cap-height="715.8203" ascent="905.27344" descent="-211.91406" font-weight="bold"><font-face-src><font-face-name name="Arial-BoldMT"/></font-face-src></font-face><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker" viewBox="-1 -3 5 6" markerWidth="5" markerHeight="6" color="navy"><g><path d="M 2.8799995 0 L 0 -1.0799998 L 0 1.0799998 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_2" viewBox="-4 -3 5 6" markerWidth="5" markerHeight="6" color="navy"><g><path d="M -2.88 0 L 0 1.08 L 0 -1.08 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker></defs><g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1"><title>databinding2</title><rect fill="white" width="756" height="553"/><g><title>Layer 1</title><path d="M 74.625 101.25 L 284.95834 101.25 C 293.24261 101.25 299.95834 107.96573 299.95834 116.25 L 299.95834 229.00954 C 299.95834 237.29381 293.24261 244.00954 284.95834 244.00954 L 74.625 244.00954 C 66.34073 244.00954 59.625 237.29381 59.625 229.00954 L 59.625 116.25 C 59.625 107.96573 66.34073 101.25 74.625 101.25 Z" fill="#b1e1ff" fill-opacity=".75"/><path d="M 74.625 101.25 L 284.95834 101.25 C 293.24261 101.25 299.95834 107.96573 299.95834 116.25 L 299.95834 229.00954 C 299.95834 237.29381 293.24261 244.00954 284.95834 244.00954 L 74.625 244.00954 C 66.34073 244.00954 59.625 237.29381 59.625 229.00954 L 59.625 116.25 C 59.625 107.96573 66.34073 101.25 74.625 101.25 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5" stroke-dasharray="4,4"/><text transform="translate(64.625 106.25)" fill="black"><tspan font-family="Arial" font-size="12" font-weight="bold" x="0" y="11" textLength="57.333984">Controller</tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="38.392578" textLength="184.83008">function InvoiceController {</tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="51.392578" textLength="145.22363">  this.pay = function…</tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="64.39258" textLength="158.42578">  this.total = function…</tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="77.39258" textLength="105.61719">  this.cost=2.5;</tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="90.39258" textLength="85.813965">  this.qty=1;</tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="103.39258" textLength="6.6010742">}</tspan></text><path d="M 182.79184 178.54641 L 393.12518 178.54641 C 401.40945 178.54641 408.12518 185.26214 408.12518 193.54641 L 408.12518 306.30595 C 408.12518 314.59022 401.40945 321.30595 393.12518 321.30595 L 182.79184 321.30595 C 174.50757 321.30595 167.79184 314.59022 167.79184 306.30595 L 167.79184 193.54641 C 167.79184 185.26214 174.50757 178.54641 182.79184 178.54641 Z" fill="#d7a5a5" fill-opacity=".75"/><path d="M 182.79184 178.54641 L 393.12518 178.54641 C 401.40945 178.54641 408.12518 185.26214 408.12518 193.54641 L 408.12518 306.30595 C 408.12518 314.59022 401.40945 321.30595 393.12518 321.30595 L 182.79184 321.30595 C 174.50757 321.30595 167.79184 314.59022 167.79184 306.30595 L 167.79184 193.54641 C 167.79184 185.26214 174.50757 178.54641 182.79184 178.54641 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5" stroke-dasharray="4,4"/><text transform="translate(172.79184 183.54641)" fill="black"><tspan font-family="Arial" font-size="11" font-weight="bold" x="0" y="10" textLength="33.010742">Scope</tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="35.359863" textLength="59.409668">invoice: </tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="48.359863" textLength="151.82471">  new InvoiceController</tspan></text><path d="M 266.29239 238.50893 L 476.62573 238.50893 C 484.91 238.50893 491.62573 245.22466 491.62573 253.50893 L 491.62573 366.26847 C 491.62573 374.55274 484.91 381.26847 476.62573 381.26847 L 266.29239 381.26847 C 258.00812 381.26847 251.29239 374.55274 251.29239 366.26847 L 251.29239 253.50893 C 251.29239 245.22466 258.00812 238.50893 266.29239 238.50893 Z" fill="#b1d6a2" fill-opacity=".75"/><path d="M 266.29239 238.50893 L 476.62573 238.50893 C 484.91 238.50893 491.62573 245.22466 491.62573 253.50893 L 491.62573 366.26847 C 491.62573 374.55274 484.91 381.26847 476.62573 381.26847 L 266.29239 381.26847 C 258.00812 381.26847 251.29239 374.55274 251.29239 366.26847 L 251.29239 253.50893 C 251.29239 245.22466 258.00812 238.50893 266.29239 238.50893 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5" stroke-dasharray="4,4"/><text transform="translate(256.29239 243.50893)" fill="black"><tspan font-family="Arial" font-size="11" font-weight="bold" x="0" y="10" textLength="7.336914">V</tspan><tspan font-family="Arial" font-size="11" font-weight="bold" x="7.1381836" y="10" textLength="53.77539">iew (DOM)</tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="35.359863" textLength="125.42041">&lt;div ng-controller=</tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="48.359863" textLength="217.83545">  &quot;InvoiceController as invoice&quot;&gt;</tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="61.359863" textLength="211.23438">  &lt;input ng-model=“invoice.qty&quot;&gt;</tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="74.359863" textLength="217.83545">  &lt;input ng-model=“invoice.cost&quot;&gt;</tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="87.359863" textLength="178.229">  {{invoice.total(&apos;USD&apos;)}} </tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="100.359863" textLength="125.42041">  &lt;button ng-click=</tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="113.35986" textLength="165.02686">         &quot;invoice.pay()&quot;&gt;</tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="126.35986" textLength="39.606445">&lt;/div&gt;</tspan></text><path d="M 210.25642 208.69232 C 210.25642 189.87912 220.6105 111.89187 175.87792 130.48983" marker-end="url(#FilledArrow_Marker)" stroke="navy" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M 432.0513 279.95528 C 411.57652 248.03652 306.77687 219.58576 260.33977 215.84197" marker-end="url(#FilledArrow_Marker)" stroke="navy" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M 67.615283 162.16546 C -56.18769 255.43179 204.28722 351.60098 308.33334 353.56412" marker-start="url(#FilledArrow_Marker_2)" stroke="navy" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M 75 170.21277 C -7.8669024 236.25706 150.55715 321.63986 256.8374 328.2106" marker-end="url(#FilledArrow_Marker)" stroke="navy" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M 68.594054 190.44432 C 40.007176 230.49019 165.59797 312.56917 265.89424 314.46155" marker-start="url(#FilledArrow_Marker_2)" stroke="navy" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M 125.00123 206.11984 C 132.72199 233.31789 174.22106 300.5346 266.83647 302.28206" marker-start="url(#FilledArrow_Marker_2)" stroke="navy" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></g></svg>