images/docs/Diagrams.svg/Canvas_8.svg
<?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>2016-04-12 13:18:31 +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><filter id="Shadow_2" 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=".4" result="flood"/><feComposite in="flood" in2="offset" operator="in"/></filter><filter id="Shadow_3" filterUnits="userSpaceOnUse"><feOffset in="SourceAlpha" result="offset" dx="0" dy="2"/><feFlood flood-color="black" flood-opacity=".4" result="flood"/><feComposite in="flood" in2="offset" operator="in"/></filter><font-face font-family="Helvetica" font-size="18" 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><font-face font-family="Helvetica" font-size="18" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="-666.66667" x-height="539.55078" cap-height="719.72656" ascent="770.01953" descent="-229.98047" font-style="italic" font-weight="bold"><font-face-src><font-face-name name="Helvetica-BoldOblique"/></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="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" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#666"/><stop offset=".45238096" stop-color="#8c8c8c"/><stop offset="1" stop-color="black"/></linearGradient><linearGradient id="Obj_Gradient" xl:href="#Gradient" gradientTransform="translate(111.82056 47.206556) rotate(92.8369) scale(15.1055)"/><linearGradient id="Obj_Gradient_2" xl:href="#Gradient" gradientTransform="translate(88.89985 62.75) rotate(-90.000015) scale(15.1148)"/><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><font-face font-family="Courier" font-size="18" 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="Optima" font-size="18" panose-1="2 0 11 3 0 0 0 2 0 4" units-per-em="1000" underline-position="-100" underline-thickness="50" slope="0" x-height="526" cap-height="723" ascent="960.99854" descent="-261.99341" font-weight="bold"><font-face-src><font-face-name name="Optima-ExtraBlack"/></font-face-src></font-face><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker" viewBox="-1 -2 4 4" markerWidth="4" markerHeight="4" color="#f50000" opacity=".5"><g><path d="M 1.9199999 0 L 0 -.71999996 L 0 .71999996 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_2" viewBox="-3 -2 4 4" markerWidth="4" markerHeight="4" color="#f50000" opacity=".5"><g><path d="M -1.9200001 0 L 0 .72000003 L 0 -.72000003 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_3" viewBox="-1 -2 5 4" markerWidth="5" markerHeight="4" color="#0088c6" opacity=".49"><g><path d="M 2.613333 0 L 0 -.9799999 L 0 .9799999 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_4" viewBox="-4 -2 6 4" markerWidth="6" markerHeight="4" color="#0088c6" opacity=".49"><g><path d="M -2.613333 0 L 0 .9799999 L 0 -.9799999 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>Standard App</title><rect fill="white" width="576" height="733"/><g><title>Layer 1</title><g><xl:use xl:href="#id1_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id11_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id31_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id3_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id4_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id9_Graphic" filter="url(#Shadow_2)"/><xl:use xl:href="#id10_Graphic" filter="url(#Shadow_2)"/><xl:use xl:href="#id12_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id29_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id28_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id27_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id26_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id25_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id24_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id20_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id143_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id147_Graphic" filter="url(#Shadow_3)"/><xl:use xl:href="#id22_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id144_Graphic" filter="url(#Shadow)"/></g><g id="id1_Graphic"><rect x="73.75" y="39.75" width="459" height="278" fill="white"/><rect x="73.75" y="39.75" width="459" height="278" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><g id="id11_Graphic"><rect x="79.4239" y="76.75" width="444.457" height="234" fill="#d3ebd4"/><rect x="79.4239" y="76.75" width="444.457" height="234" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(84.4239 81.75)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="0" y="18" textLength="61.02246">MyApp </tspan><tspan font-family="Helvetica" font-size="18" font-style="italic" font-weight="bold" x="61.02246" y="18" textLength="79.998047">(Chrome)</tspan></text></g><g id="id31_Graphic"><rect x="144.544" y="127.75" width="372.166" height="171" fill="white"/><rect x="144.544" y="127.75" width="372.166" height="171" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(149.544 132.75)" fill="black"><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="11" textLength="295.24805"><ng:include src="$route.current.template"</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="25" textLength="309.65039"> scope="$route.current.scope" /></tspan></text></g><g id="id3_Graphic"><rect x="73.7499" y="39.75" width="459" height="29" fill="#999"/><rect x="73.7499" y="39.75" width="459" height="29" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><g id="id4_Graphic"><rect x="127.27" y="47.75" width="397.316" height="16" fill="white"/><rect x="127.27" y="47.75" width="397.316" height="16" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(132.27 48.75)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="170.08594">http://server/index.html#account</tspan></text></g><g id="id9_Graphic"><path d="M 102.083295 57.340913 L 102.38531 51.246165 L 112.021926 51.723695 L 112.244725 47.227575 L 120.659196 55.20656 L 111.49711 62.314563 L 111.71991 57.818443 Z" fill="url(#Obj_Gradient)"/><path d="M 102.083295 57.340913 L 102.38531 51.246165 L 112.021926 51.723695 L 112.244725 47.227575 L 120.659196 55.20656 L 111.49711 62.314563 L 111.71991 57.818443 Z" stroke="#191919" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><g id="id10_Graphic"><path d="M 97.6244 51.6352 L 97.6244 58.749996 L 92.1753 58.749998 L 92.1753 62.75 L 80.1753 55.192602 L 92.1753 47.6352 L 92.1753 51.6352 Z" fill="url(#Obj_Gradient_2)"/><path d="M 97.6244 51.6352 L 97.6244 58.749996 L 92.1753 58.749998 L 92.1753 62.75 L 80.1753 55.192602 L 92.1753 47.6352 L 92.1753 51.6352 Z" stroke="#191919" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><g id="id12_Graphic"><rect x="155.076" y="168.75" width="353.158" height="123" fill="#ffc99c"/><rect x="155.076" y="168.75" width="353.158" height="123" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(160.076 173.75)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="0" y="18" textLength="140.08008">Account Settings </tspan><tspan font-family="Helvetica" font-size="18" font-style="italic" font-weight="bold" x="140.08008" y="18" textLength="67.0166">(Partial)</tspan></text></g><text transform="translate(85.9137 110.75)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="bold" x="0" y="11" textLength="61.341797">Navigation</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="25" textLength="43.359375">Account</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="39" textLength="43.359375">Settings</tspan></text><g id="id29_Graphic"><rect x="167.37" y="204.75" width="145.63" height="16" fill="white"/><rect x="167.37" y="204.75" width="145.63" height="16" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(172.37 205.75)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="60.029297">John Smith</tspan></text></g><g id="id28_Graphic"><rect x="167.37" y="224.75" width="145.63" height="16" fill="white"/><rect x="167.37" y="224.75" width="145.63" height="16" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(172.37 225.75)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="64.03711">123 Main St</tspan></text></g><g id="id27_Graphic"><rect x="167.37" y="244.75" width="65.25" height="16" fill="white"/><rect x="167.37" y="244.75" width="65.25" height="16" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(172.37 245.75)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="54.029297">Any Place</tspan></text></g><g id="id26_Graphic"><rect x="237.293" y="244.75" width="27" height="16" fill="white"/><rect x="237.293" y="244.75" width="27" height="16" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(242.293 245.75)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="16.669922">US</tspan></text></g><g id="id25_Graphic"><rect x="269.5" y="244.75" width="43.5" height="16" fill="white"/><rect x="269.5" y="244.75" width="43.5" height="16" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(274.5 245.75)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="33.36914">12345</tspan></text></g><g id="id24_Graphic"><rect x="162.921" y="264.75" width="48.7271" height="16" fill="#ccc"/><rect x="162.921" y="264.75" width="48.7271" height="16" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(167.921 265.75)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="5.6877688" y="11" textLength="27.351562">Save</tspan></text></g><g id="id20_Graphic"><rect x="73.7499" y="339.75" width="459" height="317.5" fill="#d3ebd4"/><rect x="73.7499" y="339.75" width="459" height="317.5" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(78.7499 344.75)" fill="black"><tspan font-family="Courier" font-size="18" font-weight="500" x="0" y="18" textLength="54.00879">$root</tspan><tspan font-family="Helvetica" font-size="18" font-weight="500" x="54.00879" y="18" textLength="56.039062"> Scope</tspan></text></g><text transform="translate(320.565 206.25)" fill="black"><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="11" textLength="151.22461"><input name='name' /></tspan></text><text transform="translate(217.75 266.75)" fill="black"><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="11" textLength="280.8457"><button ng-click='save()'>Save</button></tspan></text><text transform="translate(45.51599 216.75) rotate(-90)" fill="black"><tspan font-family="Optima" font-size="18" font-weight="bold" x="0" y="17" textLength="32.994">Bro</tspan><tspan font-family="Optima" font-size="18" font-weight="bold" x="32.634" y="17" textLength="42.66">wser</tspan></text><text transform="translate(45.51599 548.25) rotate(-90)" fill="black"><tspan font-family="Optima" font-size="18" font-weight="bold" x="0" y="17" textLength="43.326">Runt</tspan><tspan font-family="Optima" font-size="18" font-weight="bold" x="43.506" y="17" textLength="33.318">ime</tspan></text><g id="id143_Graphic"><rect x="360.044" y="422.25" width="163.836" height="56" fill="white"/><rect x="360.044" y="422.25" width="163.836" height="56" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(365.044 427.25)" fill="black"><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="11" textLength="86.41406">$location: {</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="25" textLength="151.22461"> hashPath: 'account'</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="39" textLength="7.201172">}</tspan></text></g><path d="M 360.044 455.85002 C 337.36222 466.64592 332.86242 465.86326 318.95444 458.28759" marker-end="url(#FilledArrow_Marker)" stroke="#f50000" stroke-opacity=".5" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/><path d="M 451.5877 64.215414 C 541.3034 72.994794 527.76086 97.75 528.75 260.75 C 529.5957 400.0959 520.22537 399.30618 501.47088 413.16745" marker-end="url(#FilledArrow_Marker)" stroke="#f50000" stroke-opacity=".5" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/><g id="id147_Graphic"><path d="M 216.58337 368.2114 L 218.91663 372.4386 L 188.56853 389.18967 L 191.02619 393.64224 L 174.2925 394.312 L 183.77761 380.50991 L 186.23527 384.96248 Z" fill="black" fill-opacity=".1"/><path d="M 216.58337 368.2114 L 218.91663 372.4386 L 188.56853 389.18967 L 191.02619 393.64224 L 174.2925 394.312 L 183.77761 380.50991 L 186.23527 384.96248 Z" stroke="black" stroke-opacity=".75" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><path d="M 135.5245 172.97583 C 123.065984 189.77951 101.86 226.36875 101.86 280.75 C 101.860053 357.75 129.98223 393.82678 129.98223 393.82678" marker-start="url(#FilledArrow_Marker_2)" stroke="#f50000" stroke-opacity=".5" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/><rect x="85.9137" y="498" width="437.967" height="147.25" fill="#ffc99c"/><rect x="85.9137" y="498" width="437.967" height="147.25" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(90.9137 503)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="0" y="18" textLength="112.06055">Partial Scope:</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="33" textLength="136.822266">class AccountCntl {</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="47" textLength="122.41992"> AccountCntl() {</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="75" textLength="43.20703"> ...</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="89" textLength="21.603516"> }</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="131" textLength="7.201172">}</tspan></text><text transform="translate(112.425 557.625)" fill="black"><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="11" textLength="172.82812">this.name = 'John Smith'</tspan></text><text transform="translate(104.84 603.875)" fill="black"><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="11" textLength="50.408203">save() </tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="25" textLength="36.00586">{...}</tspan></text><path d="M 411.40604 280.75 C 341.74974 292 341.75 323.25 341.75 469.25 C 341.75006 611.14375 343.60206 617.732 203.25594 617.8756" marker-end="url(#FilledArrow_Marker_3)" stroke="#0088c6" stroke-opacity=".49" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/><path d="M 385.10076 223.67587 C 326.33246 242.8375 330.75 283.76855 330.75 421 C 330.75005 549.60547 333.27173 563.0848 306.53378 564.4712" marker-end="url(#FilledArrow_Marker_3)" marker-start="url(#FilledArrow_Marker_4)" stroke="#0088c6" stroke-opacity=".49" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/><path d="M 167.082 685.75 C 167.082 685.75 128.80641 685.75 107.57542 685.75" marker-end="url(#FilledArrow_Marker)" stroke="#f50000" stroke-opacity=".5" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/><path d="M 448.46725 685.75 C 435.05704 685.75 413.91496 685.75 400.50475 685.75" marker-end="url(#FilledArrow_Marker_3)" marker-start="url(#FilledArrow_Marker_4)" stroke="#0088c6" stroke-opacity=".49" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/><text transform="translate(181.785 679.25)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x=".21582031" y="11" textLength="11.326172">W</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="11.102539" y="11" textLength="22.68164">atch</tspan></text><text transform="translate(475.71 679.25)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x=".484375" y="11" textLength="40.03125">Binding</tspan></text><g id="id22_Graphic"><rect x="217.75" y="347.375" width="298.96" height="38.25" fill="white"/><rect x="217.75" y="347.375" width="298.96" height="38.25" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(222.75 352.375)" fill="black"><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="11" textLength="280.8457">/account -> AccountCntl; Account.html</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="25" textLength="288.04688">/settings -> SettingsCntl; Settings.html</tspan></text></g><g id="id144_Graphic"><rect x="85.9137" y="394.312" width="220.947" height="95.625" fill="white"/><rect x="85.9137" y="394.312" width="220.947" height="95.625" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(90.9137 399.312)" fill="black"><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="11" textLength="57.609375">$route {</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="25" textLength="86.41406"> current: {</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="39" textLength="208.83398"> template: 'Account.html',</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="53" textLength="201.63281"> scope: new AccountCntl()</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="67" textLength="21.603516"> }</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="81" textLength="7.201172">}</tspan></text></g></g></g></svg>