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 576 733" width="48pc" height="733pt" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata> Produced by OmniGraffle 6.5.2 <dc:date>2011-05-12 18:22:24 +0000</dc:date></metadata><defs><filter id="Shadow" filterUnits="userSpaceOnUse"><feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="1.308"/><feOffset in="blur" result="offset" dx="0" dy="2"/><feFlood flood-color="black" flood-opacity=".5" result="flood"/><feComposite in="flood" in2="offset" operator="in"/></filter><font-face font-family="Helvetica" font-size="14" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500"><font-face-src><font-face-name name="Helvetica"/></font-face-src></font-face><linearGradient x1="0" x2="1" id="Gradient" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff92f"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient" xl:href="#Gradient" gradientTransform="translate(46 57) rotate(90) scale(25)"/><font-face font-family="Helvetica" font-size="12" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500"><font-face-src><font-face-name name="Helvetica"/></font-face-src></font-face><linearGradient x1="0" x2="1" id="Gradient_2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="white"/><stop offset=".5" stop-color="#91ea96"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient_2" xl:href="#Gradient_2" gradientTransform="translate(416 19) rotate(90) scale(103)"/><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><font-face font-family="Helvetica" font-size="12" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="532.22656" cap-height="719.72656" ascent="770.01953" descent="-229.98047" font-weight="bold"><font-face-src><font-face-name name="Helvetica-Bold"/></font-face-src></font-face><linearGradient id="Obj_Gradient_3" xl:href="#Gradient_2" gradientTransform="translate(194 310.5) rotate(90) scale(20)"/><linearGradient id="Obj_Gradient_4" xl:href="#Gradient" gradientTransform="translate(194 277.5) rotate(90) scale(20)"/><linearGradient x1="0" x2="1" id="Gradient_3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f5ff35"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient_5" xl:href="#Gradient_3" gradientTransform="translate(79 91.001) rotate(90) scale(55.999)"/><linearGradient id="Obj_Gradient_6" xl:href="#Gradient" gradientTransform="translate(78 232.5) rotate(90) scale(18)"/><font-face font-family="Courier New" font-size="10" panose-1="2 7 6 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="0" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldMT"/></font-face-src></font-face><linearGradient id="Obj_Gradient_7" xl:href="#Gradient" gradientTransform="translate(48.5 161) rotate(90) scale(25)"/></defs><g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1"><title>Canvas 1</title><rect fill="white" width="576" height="733"/><g><title>Layer 1</title><g><xl:use xl:href="#id105_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id4_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id6_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id37_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id55_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id67_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id107_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id108_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id607_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id609_Graphic" filter="url(#Shadow)"/></g><g id="id105_Graphic"><rect x="374" y="232.5" width="91" height="18" fill="#fefffc"/><rect x="374" y="232.5" width="91" height="18" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(379 233)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="500" x="4.7036133" y="14" textLength="71.592773">Data Model</tspan></text></g><g id="id4_Graphic"><rect x="21" y="57" width="50" height="25" fill="url(#Obj_Gradient)"/><rect x="21" y="57" width="50" height="25" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(26 62.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="1.6572266" y="11" textLength="36.685547">&lt;html&gt;</tspan></text></g><g id="id6_Graphic"><ellipse cx="416" cy="70.5" rx="68.00011" ry="51.500082" fill="url(#Obj_Gradient_2)"/><ellipse cx="416" cy="70.5" rx="68.00011" ry="51.500082" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(366.6 39.45)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="10.0396484" y="11" textLength="82.054688">AngularJS Scope </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="32.05918" y="25" textLength="34.68164">Object</tspan></text></g><line x1="71.5" y1="69.5689" x2="337.60044" y2="70.287882" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><g id="id37_Graphic"><rect x="120" y="271.5" width="263" height="128.5" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><text transform="translate(120 277.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="bold" x="9.495117" y="11" textLength="26.009766">Key:</tspan></text><ellipse cx="194" cy="320.5" rx="20.000032" ry="10.000016" fill="url(#Obj_Gradient_3)"/><ellipse cx="194" cy="320.5" rx="20.000032" ry="10.000016" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(234 313.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="78.720703">AngularJS Scope</tspan></text><rect x="174" y="277.5" width="40" height="20" fill="url(#Obj_Gradient_4)"/><rect x="174" y="277.5" width="40" height="20" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(179 280.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="2.991211" y="11" textLength="24.017578">&lt;...&gt;</tspan></text><text transform="translate(234 280.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="60.017578">DOM Node</tspan></text><g id="id55_Graphic"><rect x="30" y="91.001" width="98" height="55.999" fill="url(#Obj_Gradient_5)"/><rect x="30" y="91.001" width="98" height="55.999" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(35 96.001)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="36.363281">&lt;input </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="25" textLength="72.228516">  name=&quot;foo&quot; </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="39" textLength="78.56836">  value=&quot;bar&quot; &gt;</tspan></text></g><g id="id67_Graphic"><path d="M 393.75 85.75 L 453.25 85.75 C 460.288 85.75 466 90.23 466 95.75 C 466 101.27 460.288 105.75 453.25 105.75 L 393.75 105.75 C 386.712 105.75 381 101.27 381 95.75 C 381 90.23 386.712 85.75 393.75 85.75" fill="white"/><path d="M 393.75 85.75 L 453.25 85.75 C 460.288 85.75 466 90.23 466 95.75 C 466 101.27 460.288 105.75 453.25 105.75 L 393.75 105.75 C 386.712 105.75 381 101.27 381 95.75 C 381 90.23 386.712 85.75 393.75 85.75" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(394.5 88.75)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="4.3935547" y="11" textLength="49.21289">foo: &quot;bar&quot;</tspan></text></g><text transform="translate(234 346.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="82.710938">Scope Property</tspan></text><path d="M 176.8 343.5 L 213.2 343.5 C 217.5056 343.5 221 347.98 221 353.5 C 221 359.02 217.5056 363.5 213.2 363.5 L 176.8 363.5 C 172.4944 363.5 169 359.02 169 353.5 C 169 347.98 172.4944 343.5 176.8 343.5" fill="white"/><path d="M 176.8 343.5 L 213.2 343.5 C 217.5056 343.5 221 347.98 221 353.5 C 221 359.02 217.5056 363.5 213.2 363.5 L 176.8 363.5 C 172.4944 363.5 169 359.02 169 353.5 C 169 347.98 172.4944 343.5 176.8 343.5" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="21" y1="259.75" x2="484" y2="257" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g id="id107_Graphic"><rect x="40" y="232.5" width="76" height="18" fill="url(#Obj_Gradient_6)"/><rect x="40" y="232.5" width="76" height="18" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(45 233)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="500" x="4.5966797" y="14" textLength="8.551758">T</tspan><tspan font-family="Helvetica" font-size="14" font-weight="500" x="11.59668" y="14" textLength="49.80664">emplate</tspan></text></g><g id="id108_Graphic"><text transform="translate(117 58)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="1.9946289" y="8" textLength="66.010742">ng:autobind</tspan></text></g><line x1="173" y1="385" x2="209.064" y2="385" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><text transform="translate(230.624 377.62685)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="142.06055"> Implicit Scope Declaration</tspan></text><g id="id607_Graphic"><rect x="21" y="161" width="55" height="25" fill="url(#Obj_Gradient_7)"/><rect x="21" y="161" width="55" height="25" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(26 166.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="2.4902344" y="11" textLength="40.019531">&lt;/html&gt;</tspan></text></g><line x1="128.498865" y1="115.65971" x2="371.14307" y2="99.283115" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><g id="id609_Graphic"><text transform="translate(155 115.5)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="150.02441">AngularJS creates model as </tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="19" textLength="150.02441">property on scope object.</tspan></text></g></g></g></svg>