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><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="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="12" 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="Courier" font-size="12" units-per-em="1000" underline-position="-144.04297" underline-thickness="91.796875" slope="0" x-height="462.40234" cap-height="594.72656" ascent="753.90625" descent="-246.09375" font-weight="bold"><font-face-src><font-face-name name="Courier-Bold"/></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><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></defs><g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1"><title>controller</title><rect fill="white" width="756" height="553"/><g><title>Layer 1</title><g><xl:use xl:href="#id40_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id42_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id25_Graphic" filter="url(#Shadow)"/></g><line x1="373.33337" y1="262.00003" x2="566.66656" y2="401.41696" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="1,4"/><path d="M 152.66666 126.49046 L 363 126.49046 C 371.28427 126.49046 378 133.20619 378 141.49046 L 378 254.25 C 378 262.53427 371.28427 269.25 363 269.25 L 152.66666 269.25 C 144.38239 269.25 137.66666 262.53427 137.66666 254.25 L 137.66666 141.49046 C 137.66666 133.20619 144.38239 126.49046 152.66666 126.49046 Z" fill="#b1e1ff" fill-opacity=".75"/><path d="M 152.66666 126.49046 L 363 126.49046 C 371.28427 126.49046 378 133.20619 378 141.49046 L 378 254.25 C 378 262.53427 371.28427 269.25 363 269.25 L 152.66666 269.25 C 144.38239 269.25 137.66666 262.53427 137.66666 254.25 L 137.66666 141.49046 C 137.66666 133.20619 144.38239 126.49046 152.66666 126.49046 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5" stroke-dasharray="4,4"/><text transform="translate(142.66666 131.49046)" 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="12" font-weight="500" x="0" y="25.392578" textLength="64.810547">function </tspan><tspan font-family="Courier" font-size="12" font-weight="bold" x="64.810547" y="25.392578" textLength="43.20703">MyCtrl</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="108.01758" y="25.392578" textLength="72.01172">($scope) {</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="39.392578" textLength="115.21875">  $scope.action </tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="53.392578" textLength="129.62109">    = function() {</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="67.39258" textLength="158.42578">      // do something;</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="81.39258" textLength="43.20703">    };</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="95.39258" textLength="93.615234">  $scope.name</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="109.39258" textLength="100.816406">    = &apos;world&apos;;</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="123.39258" textLength="7.201172">}</tspan></text><path d="M 260.8335 203.78687 L 471.16684 203.78687 C 479.4511 203.78687 486.16684 210.5026 486.16684 218.78687 L 486.16684 331.54641 C 486.16684 339.83068 479.4511 346.5464 471.16684 346.5464 L 260.8335 346.5464 C 252.54923 346.5464 245.8335 339.83068 245.8335 331.54641 L 245.8335 218.78687 C 245.8335 210.5026 252.54923 203.78687 260.8335 203.78687 Z" fill="#d7a5a5" fill-opacity=".75"/><path d="M 260.8335 203.78687 L 471.16684 203.78687 C 479.4511 203.78687 486.16684 210.5026 486.16684 218.78687 L 486.16684 331.54641 C 486.16684 339.83068 479.4511 346.5464 471.16684 346.5464 L 260.8335 346.5464 C 252.54923 346.5464 245.8335 339.83068 245.8335 331.54641 L 245.8335 218.78687 C 245.8335 210.5026 252.54923 203.78687 260.8335 203.78687 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5" stroke-dasharray="4,4"/><text transform="translate(250.8335 208.78687)" fill="black"><tspan font-family="Arial" font-size="12" font-weight="bold" x="0" y="11" textLength="36.011719">Scope</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="25.392578" textLength="7.201172">{</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="39.392578" textLength="115.21875">  name: &apos;world&apos;,</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="53.392578" textLength="129.62109">  action: function</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="67.39258" textLength="7.201172">}</tspan></text><path d="M 344.33405 263.74939 L 554.6674 263.74939 C 562.95166 263.74939 569.6674 270.46512 569.6674 278.74939 L 569.6674 391.50893 C 569.6674 399.7932 562.95166 406.50893 554.6674 406.50893 L 344.33405 406.50893 C 336.04978 406.50893 329.33405 399.7932 329.33405 391.50893 L 329.33405 278.74939 C 329.33405 270.46512 336.04978 263.74939 344.33405 263.74939 Z" fill="#b1d6a2" fill-opacity=".75"/><path d="M 344.33405 263.74939 L 554.6674 263.74939 C 562.95166 263.74939 569.6674 270.46512 569.6674 278.74939 L 569.6674 391.50893 C 569.6674 399.7932 562.95166 406.50893 554.6674 406.50893 L 344.33405 406.50893 C 336.04978 406.50893 329.33405 399.7932 329.33405 391.50893 L 329.33405 278.74939 C 329.33405 270.46512 336.04978 263.74939 344.33405 263.74939 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5" stroke-dasharray="4,4"/><text transform="translate(334.33405 268.74939)" fill="black"><tspan font-family="Arial" font-size="12" font-weight="bold" x="0" y="11" textLength="8.0039062">V</tspan><tspan font-family="Arial" font-size="12" font-weight="bold" x="7.7871094" y="11" textLength="58.664062">iew (DOM)</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="39.392578" textLength="144.02344">&lt;div ng-controller=&quot;</tspan><tspan font-family="Courier" font-size="12" font-weight="bold" x="144.02344" y="39.392578" textLength="43.20703">MyCtrl</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="187.23047" y="39.392578" textLength="14.402344">&quot;&gt;</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="53.392578" textLength="72.01172">  Hello {{</tspan><tspan font-family="Courier" font-size="12" font-weight="bold" x="72.01172" y="53.392578" textLength="28.804688">name</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="100.816406" y="53.392578" textLength="21.603516">}}!</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="67.39258" textLength="144.02344">  &lt;button ng-click=&quot;</tspan><tspan font-family="Courier" font-size="12" font-weight="bold" x="144.02344" y="67.39258" textLength="57.609375">action()</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="201.63281" y="67.39258" textLength="14.402344">&quot;&gt;</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="81.39258" textLength="43.20703">    OK</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="95.39258" textLength="72.01172">  &lt;button&gt;</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="109.39258" textLength="43.20703">&lt;/div&gt;</tspan></text><line x1="143" y1="264.58319" x2="336.33334" y2="404.00012" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="1,4"/><path d="M 504.33334 296.16675 C 504.33334 246.83344 502.3333 209.33333 435 164 C 372.42082 121.86752 279.32152 110.254924 248.82553 137.72547" marker-end="url(#FilledArrow_Marker)" stroke="navy" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M 289.66666 215.33333 C 331.66666 199.33333 352.33337 180.00003 347 158.66667 C 342.175 139.36666 313.34185 123.340505 294.56127 142.18071" marker-end="url(#FilledArrow_Marker)" stroke="navy" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M 206.99997 171.33333 C 162.33331 175.33333 146.33333 183.33333 147.33377 211.33333 C 148.30489 238.51453 159.01272 255.64356 256.60674 258.45188" marker-end="url(#FilledArrow_Marker)" stroke="navy" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M 239 222 C 250.33333 220 250.33333 230.66667 249.66666 235.16679 C 249.22915 238.12002 251.9499 241.57548 256.69836 243.41374" marker-end="url(#FilledArrow_Marker)" stroke="navy" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g id="id40_Graphic"><path d="M 143.33333 292.72916 C 143.33333 304.8581 165.62179 314.66666 193.16667 314.66666 C 220.71154 314.66666 243 304.8581 243 292.72916 C 243 282.39302 226.64869 273.692 204.70009 271.42454 C 206.50107 267.52196 209.46914 262.93412 214.14152 260.66666 C 205.13863 260.66666 196.23241 266.0456 190.14976 270.84458 C 164.01616 271.52984 143.33333 281.07488 143.33333 292.72916 Z" fill="#f3ea91"/><path d="M 143.33333 292.72916 C 143.33333 304.8581 165.62179 314.66666 193.16667 314.66666 C 220.71154 314.66666 243 304.8581 243 292.72916 C 243 282.39302 226.64869 273.692 204.70009 271.42454 C 206.50107 267.52196 209.46914 262.93412 214.14152 260.66666 C 205.13863 260.66666 196.23241 266.0456 190.14976 270.84458 C 164.01616 271.52984 143.33333 281.07488 143.33333 292.72916 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(163.28333 279.06666)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="1.8725925" y="11" textLength="56.021484">Imperative</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="6.8677097" y="25" textLength="46.03125">behavior</tspan></text></g><path d="M 422.33334 314.66666 C 422.33334 294.66666 419.66666 264.66666 413.66666 258.6666 C 408.15765 253.15743 406.86381 244.35445 375.72752 242.879" marker-end="url(#FilledArrow_Marker)" stroke="navy" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g id="id42_Graphic"><path d="M 439.66653 194.96343 C 439.66653 183.39599 422.298 174.04152 400.83337 174.04152 C 379.36873 174.04152 362.0002 183.39599 362.0002 194.96343 C 362.0002 204.82106 374.74215 213.11926 391.84582 215.28175 C 390.4424 219.00366 388.1295 223.37911 384.4885 225.5416 C 391.5041 225.5416 398.44435 220.41167 403.18433 215.83486 C 423.54922 215.18133 439.66653 206.07817 439.66653 194.96343 Z" fill="#f3ea91"/><path d="M 439.66653 194.96343 C 439.66653 183.39599 422.298 174.04152 400.83337 174.04152 C 379.36873 174.04152 362.0002 183.39599 362.0002 194.96343 C 362.0002 204.82106 374.74215 213.11926 391.84582 215.28175 C 390.4424 219.00366 388.1295 223.37911 384.4885 225.5416 C 391.5041 225.5416 398.44435 220.41167 403.18433 215.83486 C 423.54922 215.18133 439.66653 206.07817 439.66653 194.96343 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(378.65016 181.76653)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x=".17246977" y="11" textLength="47.35547">scope is </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x=".83164946" y="25" textLength="42.703125">the glue</tspan></text></g><path d="M 477 338 C 449.6667 353.33331 357.66668 350.66666 336.33334 328 C 317.22705 307.69922 313.36097 294.08382 321.38248 271.10805" marker-end="url(#FilledArrow_Marker)" stroke="navy" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="372.00006" y1="130.50082" x2="565.33313" y2="269.91772" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="1,4"/><line x1="141.66647" y1="130.74977" x2="334.99982" y2="270.16675" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="1,4"/><g id="id25_Graphic"><path d="M 565.33313 255.58858 C 565.33313 244.02114 541.33025 234.66667 511.66662 234.66667 C 482.003 234.66667 458.00012 244.02114 458.00012 255.58858 C 458.00012 265.4462 475.60917 273.74441 499.24605 275.9069 C 497.30654 279.62881 494.11016 284.00426 489.0784 286.16675 C 498.77378 286.16675 508.36506 281.03682 514.9156 276.46001 C 543.05938 275.80648 565.33313 266.70332 565.33313 255.58858 Z" fill="#f3ea91"/><path d="M 565.33313 255.58858 C 565.33313 244.02114 541.33025 234.66667 511.66662 234.66667 C 482.003 234.66667 458.00012 244.02114 458.00012 255.58858 C 458.00012 265.4462 475.60917 273.74441 499.24605 275.9069 C 497.30654 279.62881 494.11016 284.00426 489.0784 286.16675 C 498.77378 286.16675 508.36506 281.03682 514.9156 276.46001 C 543.05938 275.80648 565.33313 266.70332 565.33313 255.58858 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(479.10007 242.39168)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="2.5548342" y="11" textLength="60.023438">Declarative</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="20.563623" y="25" textLength="24.00586">view</tspan></text></g></g></g></svg>