images/docs/Diagrams.svg/Canvas_angular___usage.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.3030978"/><feOffset in="blur" result="offset" dx="3" dy="3"/><feFlood flood-color="black" flood-opacity=".5" result="flood"/><feComposite in="flood" in2="offset" operator="in" result="color"/><feMerge><feMergeNode in="color"/><feMergeNode in="SourceGraphic"/></feMerge></filter><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="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><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="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></defs><g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1"><title><angular/> usage</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="#id4_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id6_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id8_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id9_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id10_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id23_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id33_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id34_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id152_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id153_Graphic" filter="url(#Shadow)"/></g><g id="id1_Graphic"><rect x="34.625" y="40" width="506.75" height="219" fill="#fff2cc"/><rect x="34.625" y="40" width="506.75" height="219" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><g id="id4_Graphic"><rect x="81.625" y="99" width="354.75" height="56" fill="#c7e3f3"/></g><g id="id6_Graphic"><rect x="110.625" y="101" width="311.75" height="13" fill="#50abdc"/></g><g id="id8_Graphic"><rect x="96.625" y="116" width="208" height="13" fill="#a9d9a9"/></g><g id="id9_Graphic"><rect x="96.625" y="130" width="133" height="13" fill="#a9d9a9"/></g><g id="id10_Graphic"><rect x="81.625" y="156.5" width="450.75" height="56" fill="#ffcacc"/></g><g id="id23_Graphic"><rect x="220.625" y="118" width="67.25" height="9" fill="#4aab50"/></g><g id="id33_Graphic"><rect x="94.625" y="186" width="429.5" height="13" fill="#ff5c65"/></g><g id="id34_Graphic"><rect x="34.625" y="280" width="506.75" height="413" fill="white"/><rect x="34.625" y="280" width="506.75" height="413" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><g filter="url(#Shadow_2)"><rect x="48.125" y="314" width="482" height="35" fill="#fff2cc"/><rect x="48.125" y="314" width="482" height="35" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(53.125 319)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="bold" x="0" y="11" textLength="40.007812">Scope:</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="40.007812" y="11" textLength="345.11719"> Outter most scope which holds services and properties such as '</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="385.125" y="11" textLength="43.20703">people</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="428.33203" y="11" textLength="28.980469">' and </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="25" textLength="2.2910156">'</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="2.2910156" y="25" textLength="36.00586">email</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="38.296875" y="25" textLength="5.625">'.</tspan></text></g><g filter="url(#Shadow_2)"><rect x="48.125" y="487" width="482" height="65" fill="#c7e3f3"/><rect x="48.125" y="487" width="482" height="65" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(53.125 492)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="bold" x="0" y="11" textLength="73.335938">Child Scope:</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="73.335938" y="11" textLength="378.86719"> in this case the ng-repeat directive triggers the creation of new scopes </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="25" textLength="457.51172">one for each item in an iterator expression. It than assigns the 'person' to each scope. </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="39" textLength="439.56445">The scopes inherit from parent scopes so anything declared at higher scope is still </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="53" textLength="40.013672">visible. </tspan></text></g><g filter="url(#Shadow_2)"><rect x="48.125" y="429.75" width="482" height="51.25" fill="#50abdc"/><rect x="48.125" y="429.75" width="482" height="51.25" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(53.125 434.75)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="bold" x="0" y="11" textLength="61.365234">Directives:</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="61.365234" y="11" textLength="222.08789"> instructing the compiler to perform specifi</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="283.45312" y="11" textLength="176.0918">c actions. In this case a repeater </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="25" textLength="123.01172">iterates over the list of '</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="123.01172" y="25" textLength="43.20703">people</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="166.21875" y="25" textLength="183.05273">' looking for the person with specifi</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="349.27148" y="25" textLength="44.677734">c email. </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="393.73828" y="25" textLength="55.341797">The DOM </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="39" textLength="318.8379">element is then replicated to match the number of elements.</tspan></text></g><g filter="url(#Shadow_2)"><rect x="48.125" y="558" width="482" height="27" fill="#a9d9a9"/><rect x="48.125" y="558" width="482" height="27" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(53.125 563)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="bold" x="0" y="11" textLength="46.669922">Markup:</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="46.669922" y="11" textLength="353.50781"> evaluates expression in the closest scope and inserts it into DOM.</tspan></text></g><g filter="url(#Shadow_2)"><rect x="48.125" y="591.5" width="482" height="27" fill="#4aab50"/><rect x="48.125" y="591.5" width="482" height="27" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(53.125 596.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="bold" x="0" y="11" textLength="33.333984">Filter:</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="33.333984" y="11" textLength="165.41602"> Markup may include optional fi</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="198.75" y="11" textLength="232.10742">lter to transform value before it is displayed.</tspan></text></g><g filter="url(#Shadow_2)"><rect x="48.125" y="355" width="482" height="35" fill="#ffd767"/><rect x="48.125" y="355" width="482" height="35" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(53.125 360)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="bold" x="0" y="11" textLength="43.98047">Input W</tspan><tspan font-family="Helvetica" font-size="12" font-weight="bold" x="43.875" y="11" textLength="32.660156">idget:</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="76.535156" y="11" textLength="50.98828"> binds to '</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="127.52344" y="11" textLength="36.00586">email</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="163.5293" y="11" textLength="292.48242">' in its scope. Changing scope changes the widget and </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="25" textLength="57.351562">vice versa.</tspan></text></g><g filter="url(#Shadow_2)"><rect x="48.125" y="396.5" width="482" height="27" fill="#d08d05"/><rect x="48.125" y="396.5" width="482" height="27" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(53.125 401.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="bold" x="0" y="11" textLength="8.0039062">V</tspan><tspan font-family="Helvetica" font-size="12" font-weight="bold" x="7.3476562" y="11" textLength="47.33789">alidator:</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="54.685547" y="11" textLength="387.5625"> an input widget may have optional validator to notify user of wrong input.</tspan></text></g><g filter="url(#Shadow_2)"><rect x="48.125" y="625" width="482" height="27" fill="#ffcacc"/><rect x="48.125" y="625" width="482" height="27" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(53.125 630)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="bold" x="0" y="11" textLength="11.326172">W</tspan><tspan font-family="Helvetica" font-size="12" font-weight="bold" x="11.220703" y="11" textLength="32.660156">idget:</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="43.88086" y="11" textLength="3.3339844"> </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="46.558594" y="11" textLength="359.49023">Allows the execution of custom code which can transform the DOM.</tspan></text></g><g id="id152_Graphic"><rect x="176.875" y="73" width="299.5" height="13" fill="#ffd767"/></g><g id="id153_Graphic"><rect x="318.375" y="75" width="142" height="9" fill="#d08d05"/></g><g filter="url(#Shadow_2)"><rect x="48.125" y="658" width="482" height="27" fill="#ff5c65"/><rect x="48.125" y="658" width="482" height="27" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(53.125 663)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="bold" x="0" y="11" textLength="54.673828">Nested W</tspan><tspan font-family="Helvetica" font-size="12" font-weight="bold" x="54.56836" y="11" textLength="39.333984">idgets:</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="93.902344" y="11" textLength="259.48828"> widgets can be nested for added expressivness.</tspan></text></g></g><g><title>Text</title><g><xl:use xl:href="#id141_Graphic" filter="url(#Shadow)"/></g><text transform="translate(42.125 44)" fill="black"><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="11" textLength="43.20703"><html></tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="25" textLength="57.609375"> <body></tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="39" textLength="432.0703"> Find by email: <input name="email" ng-validate="email"/></tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="53" textLength="57.609375"> <ul></tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="67" textLength="388.86328"> <li ng-repeat="person in people.$filter(email)"></tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="81" textLength="273.64453"> {{ person.last | uppercase }},</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="95" textLength="194.43164"> {{ person.first }},</tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="109" textLength="79.21289"> </li></tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="123" textLength="295.24805"> <ng:switch on="$location.hashPath"></tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="137" textLength="345.65625"> <div ng-switch-when="home">Welcome</div></tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="151" textLength="482.47852"> <ng:include ng-switch-when="account" src="'account.html'"/></tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="165" textLength="129.62109"> </ng:switch></tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="179" textLength="64.810547"> </ul></tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="193" textLength="64.810547"> </body></tspan><tspan font-family="Courier" font-size="12" font-weight="500" x="0" y="207" textLength="50.408203"></html></tspan></text><g id="id141_Graphic"><text transform="translate(44.125 286.26599)" fill="black"><tspan font-family="Optima" font-size="18" font-weight="bold" x="0" y="17" textLength="10.332">L</tspan><tspan font-family="Optima" font-size="18" font-weight="bold" x="9.792" y="17" textLength="54.666">egend</tspan></text></g></g></g></svg>