angular/angular.js

View on GitHub
images/docs/tutorial/di_sequence.svg

Summary

Maintainability
Test Coverage
<?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>2011-05-10 23:30:21 +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><linearGradient x1="0" x2="1" id="Gradient" 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" xl:href="#Gradient" gradientTransform="translate(621.5 83.0463) rotate(90) scale(121.645)"/><font-face font-family="Helvetica" font-size="10" 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="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 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><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><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="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="#fff92f"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient_2" xl:href="#Gradient_2" gradientTransform="translate(47.5 132.869) rotate(90) scale(22)"/><linearGradient id="Obj_Gradient_3" xl:href="#Gradient" gradientTransform="translate(623 228.222) rotate(90) scale(87.2524)"/><font-face font-family="Helvetica" font-size="10" 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><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_2" viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="#17ff1b"><g><path d="M 4.8 0 L 0 -1.8 L 0 1.8 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><linearGradient id="Obj_Gradient_4" xl:href="#Gradient_2" gradientTransform="translate(99 246.751) rotate(90) scale(46)"/><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_3" viewBox="-1 -3 6 6" markerWidth="6" markerHeight="6" color="black"><g><path d="M 3.2 0 L 0 -1.2 L 0 1.2 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><linearGradient id="Obj_Gradient_5" xl:href="#Gradient_2" gradientTransform="translate(50.5 316.5) rotate(90) scale(22)"/><font-face font-family="Courier New" font-size="10" panose-1="2 7 3 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="41.015625" slope="0" x-height="422.85156" cap-height="571.28906" ascent="832.51953" descent="-300.29297" font-weight="500"><font-face-src><font-face-name name="CourierNewPSMT"/></font-face-src></font-face><font-face font-family="Courier New" font-size="12" 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><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_4" viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="black"><g><path d="M 4.8 0 L 0 -1.8 L 0 1.8 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_5" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#6dff83"><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="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><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_6" viewBox="-5 -3 6 6" markerWidth="6" markerHeight="6" color="black"><g><path d="M -3.8399998 0 L 0 1.4399999 L 0 -1.4399999 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>Canvas 1</title><rect fill="white" width="756" height="553"/><g><title>Layer 1</title><g><xl:use xl:href="#id572_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id583_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id420_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id419_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id427_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id192_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id465_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id524_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id479_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id480_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id485_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id553_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id560_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id561_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id562_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id563_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id564_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id566_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id568_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id569_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id570_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id575_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id577_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id579_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id559_Graphic" filter="url(#Shadow)"/></g><g id="id572_Graphic"><rect x="500" y="66.2656" width="239" height="318.734" stroke="#6dff6b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><ellipse cx="621.5" cy="143.8688" rx="108.500173" ry="60.822597" fill="url(#Obj_Gradient)"/><ellipse cx="621.5" cy="143.8688" rx="108.500173" ry="60.822597" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(589.847 98.51615)" fill="black"><tspan font-family="Helvetica" font-size="10" font-weight="bold" x="3.7981797" y="10" textLength="55.55664">Root Scope</tspan></text><g id="id583_Graphic"><path d="M 583.85 134 L 656.65 134 C 665.2612 134 672.25 148.71494 672.25 166.84585 C 672.25 184.97676 665.2612 199.6917 656.65 199.6917 L 583.85 199.6917 C 575.2388 199.6917 568.25 184.97676 568.25 166.84585 C 568.25 148.71494 575.2388 134 583.85 134" fill="white"/><path d="M 583.85 134 L 656.65 134 C 665.2612 134 672.25 148.71494 672.25 166.84585 C 672.25 184.97676 665.2612 199.6917 656.65 199.6917 L 583.85 199.6917 C 575.2388 199.6917 568.25 184.97676 568.25 166.84585 C 568.25 148.71494 575.2388 134 583.85 134" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(583.65 139)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="bold" x="30.6" y="11" textLength="12">DI</tspan></text></g><g id="id420_Graphic"><rect x="280.5" y="230.002" width="197" height="115.998" stroke="#ff0c0f" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><g id="id419_Graphic"><rect x="287.5" y="236.783" width="184" height="69.718" fill="white"/><rect x="287.5" y="236.783" width="184" height="69.718" stroke="#ff0c1b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><text transform="translate(293.5 253.627)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="174.02832">function PhoneListCtrl($xhr){</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="19" textLength="30.004883">  ...</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="30" textLength="6.0009766">}</tspan></text><text transform="translate(333 312.696)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="6.9853516" y="18" textLength="78.029297">Controller</tspan></text><g id="id427_Graphic"><rect x="16" y="63.498" width="239" height="318.734" stroke="#f9ff29" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><text transform="translate(603 353.1832)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="9.9873047" y="18" textLength="49.02539">Model</tspan></text><line x1="10" y1="526.002" x2="31.105147" y2="526.6828" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><rect x="49" y="519.002" width="156" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(54 520.62885)" 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="id192_Graphic"><rect x="23.5" y="132.869" width="48" height="22" fill="url(#Obj_Gradient_2)"/><rect x="23.5" y="132.869" width="48" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(28.5 138.369)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="36.00586">&lt;html&gt;</tspan></text></g><text transform="translate(87.5 353.347)" fill="black"><tspan font-family="Helvetica" font-size="18" font-weight="500" x="6.9814453" y="18" textLength="10.995117">T</tspan><tspan font-family="Helvetica" font-size="18" font-weight="500" x="15.981445" y="18" textLength="64.03711">emplate</tspan></text><ellipse cx="623" cy="271.8482" rx="77.000123" ry="43.62627" fill="url(#Obj_Gradient_3)"/><ellipse cx="623" cy="271.8482" rx="77.000123" ry="43.62627" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(581.837 247.70425)" fill="black"><tspan font-family="Helvetica" font-size="10" font-weight="500" x="0" y="10" textLength="89.49219">PhoneListCtrl scope</tspan></text><line x1="72" y1="143.86899" x2="502.59995" y2="143.86884" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><text transform="translate(590.5 282.7982)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="78.012695">phones: Array</tspan></text><line x1="317" y1="527.002" x2="339.1" y2="527.002" marker-end="url(#FilledArrow_Marker_2)" stroke="#17ff1b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><rect x="356" y="519.002" width="117" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(361 520.62885)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="100.066406"> Scope Inheritance</tspan></text><line x1="8" y1="507" x2="745" y2="506" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g id="id465_Graphic"><rect x="29" y="246.751" width="140" height="46" fill="url(#Obj_Gradient_4)"/><rect x="29" y="246.751" width="140" height="46" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(34 258.751)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="126.02051">&lt;body ng:controller =</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="19" textLength="108.01758">  &quot;PhoneListCtrl&quot;&gt;</tspan></text></g><line x1="169.49999" y1="270.22625" x2="277.10024" y2="270.9516" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><g id="id524_Graphic"><rect x="300" y="84.498" width="156" height="46" stroke="#fbc872" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><text transform="translate(307.75 84.1329)" fill="black"><tspan font-family="Helvetica" font-size="10" font-weight="bold" x="13.251465" y="10" textLength="129.49707">Service Factory Repository</tspan></text><text transform="translate(307.25 107.31)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="24.003906">$xhr</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="19" textLength="48.007812">$browser</tspan></text><line x1="570" y1="527" x2="594.3" y2="527.00125" marker-end="url(#FilledArrow_Marker_3)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/><rect x="612.5" y="519.002" width="132.5" height="17.2537" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(617.5 520.62885)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="118.746094"> Dependency Injection</tspan></text><g id="id479_Graphic"><rect x="23.5" y="316.5" width="54" height="22" fill="url(#Obj_Gradient_5)"/><rect x="23.5" y="316.5" width="54" height="22" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(28.5 322)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="42.006836">&lt;/html&gt;</tspan></text></g><g id="id480_Graphic"><ellipse cx="621.0625" cy="181.742" rx="36.93756" ry="15.500025" fill="white"/><ellipse cx="621.0625" cy="181.742" rx="36.93756" ry="15.500025" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(596.5125 169.742)" fill="black"><tspan font-family="Helvetica" font-size="10" font-weight="bold" x="6.7570312" y="10" textLength="38.364258">Service </tspan><tspan font-family="Helvetica" font-size="10" font-weight="bold" x="1.48359375" y="22" textLength="46.132812">Instances</tspan></text></g><text transform="translate(43 412.998)" fill="black"><tspan font-family="Helvetica" font-size="10" font-weight="500" x="0" y="10" textLength="196.75293">Service factory functions are registered with </tspan><tspan font-family="Helvetica" font-size="10" font-weight="500" x="0" y="22" textLength="121.40625">angular&apos;s service repository</tspan></text><text transform="translate(44 459.501)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="10" textLength="66.010742">ng:autobind</tspan><tspan font-family="Helvetica" font-size="10" font-weight="500" x="66.010742" y="10" textLength="126.4209"> triggers angular&apos;s bootstrap </tspan><tspan font-family="Helvetica" font-size="10" font-weight="500" x="0" y="23" textLength="233.47168">sequence, which includes template compilation, and </tspan><tspan font-family="Helvetica" font-size="10" font-weight="500" x="0" y="35" textLength="224.59473">creation of the root scope and dependency injector</tspan></text><text transform="translate(335 408.01)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="500" x="0" y="10" textLength="78.012695">ng:controller</tspan><tspan font-family="Helvetica" font-size="10" font-weight="500" x="78.012695" y="10" textLength="78.36426"> directive creates </tspan><tspan font-family="Helvetica" font-size="10" font-weight="500" x="0" y="23" textLength="156.76758">new child scope augmented by the </tspan><tspan font-family="Helvetica" font-size="10" font-weight="500" x="0" y="35" textLength="103.935547">PhoneListCtrl controller</tspan></text><g id="id485_Graphic"><text transform="translate(114 130.7537)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="bold" x="2.8935547" y="10" textLength="79.21289">ng:autobind</tspan></text></g><g id="id553_Graphic"><text transform="translate(181.5 256.127)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="bold" x="0" y="10" textLength="93.615234">ng:controller</tspan></text></g><line x1="570.33637" y1="148.65941" x2="468.12052" y2="111.41621" marker-end="url(#FilledArrow_Marker_4)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="472" y1="271.72024" x2="535.60005" y2="271.77403" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="622.4829" y1="227.72297" x2="622.33486" y2="215.08931" marker-end="url(#FilledArrow_Marker_5)" stroke="#6dff83" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><g id="id560_Graphic"><ellipse cx="23" cy="421.168" rx="13.000021" ry="11.0000176" fill="#81ffff"/><ellipse cx="23" cy="421.168" rx="13.000021" ry="11.0000176" stroke="#65f9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(17.6 412.668)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="500" x="1.5069336" y="14" textLength="7.786133">1</tspan></text></g><g id="id561_Graphic"><ellipse cx="156" cy="158.644" rx="13.000021" ry="11.0000176" fill="#81ffff"/><ellipse cx="156" cy="158.644" rx="13.000021" ry="11.0000176" stroke="#65f9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(150.6 150.144)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="500" x="1.5069336" y="14" textLength="7.786133">2</tspan></text></g><g id="id562_Graphic"><ellipse cx="22" cy="473.337" rx="13.000021" ry="11.0000176" fill="#81ffff"/><ellipse cx="22" cy="473.337" rx="13.000021" ry="11.0000176" stroke="#65f9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(16.6 464.837)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="500" x="1.5069336" y="14" textLength="7.786133">2</tspan></text></g><g id="id563_Graphic"><ellipse cx="526" cy="199" rx="13.000021" ry="11.0000176" fill="#81ffff"/><ellipse cx="526" cy="199" rx="13.000021" ry="11.0000176" stroke="#65f9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(520.6 190.5)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="500" x="1.5069336" y="14" textLength="7.786133">4</tspan></text></g><g id="id564_Graphic"><ellipse cx="309.5" cy="421.178" rx="13.000021" ry="11.0000176" fill="#81ffff"/><ellipse cx="309.5" cy="421.178" rx="13.000021" ry="11.0000176" stroke="#65f9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(304.1 412.678)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="500" x="1.5069336" y="14" textLength="7.786133">3</tspan></text></g><text transform="translate(337 461)" fill="black"><tspan font-family="Helvetica" font-size="10" font-weight="500" x="0" y="10" textLength="122.85156">Dependency injector identifi</tspan><tspan font-family="Helvetica" font-size="10" font-weight="500" x="122.85156" y="10" textLength="13.339844">es </tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="136.19141" y="10" textLength="24.003906">$xhr</tspan><tspan font-family="Helvetica" font-size="10" font-weight="500" x="160.19531" y="10" textLength="2.7783203"> </tspan><tspan font-family="Helvetica" font-size="10" font-weight="500" x="0" y="23" textLength="161.41602">service as PhoneListCtrl controller&apos;s </tspan><tspan font-family="Helvetica" font-size="10" font-weight="500" x="0" y="35" textLength="75.615234">only dependency</tspan></text><g id="id566_Graphic"><ellipse cx="311.5" cy="475.168" rx="13.000021" ry="11.0000176" fill="#81ffff"/><ellipse cx="311.5" cy="475.168" rx="13.000021" ry="11.0000176" stroke="#65f9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(306.1 466.668)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="500" x="1.5069336" y="14" textLength="7.786133">4</tspan></text></g><text transform="translate(569.5 403.306)" fill="black"><tspan font-family="Helvetica" font-size="10" font-weight="500" x="0" y="10" textLength="54.458008">DI checks if </tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="54.458008" y="10" textLength="24.003906">$xhr</tspan><tspan font-family="Helvetica" font-size="10" font-weight="500" x="78.461914" y="10" textLength="91.708984"> service has already </tspan><tspan font-family="Helvetica" font-size="10" font-weight="500" x="0" y="23" textLength="166.23047">been instantiated, and if not uses the </tspan><tspan font-family="Helvetica" font-size="10" font-weight="500" x="0" y="35" textLength="144.50195">factory function from the service </tspan><tspan font-family="Helvetica" font-size="10" font-weight="500" x="0" y="47" textLength="138.94043">factory repository to construct it</tspan></text><g id="id568_Graphic"><ellipse cx="544" cy="417.474" rx="13.000021" ry="11.0000176" fill="#81ffff"/><ellipse cx="544" cy="417.474" rx="13.000021" ry="11.0000176" stroke="#65f9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(538.6 408.974)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="500" x="1.5069336" y="14" textLength="7.786133">5</tspan></text></g><g id="id569_Graphic"><ellipse cx="544" cy="126.222" rx="13.000021" ry="11.0000176" fill="#81ffff"/><ellipse cx="544" cy="126.222" rx="13.000021" ry="11.0000176" stroke="#65f9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(538.6 117.722)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="500" x="1.5069336" y="14" textLength="7.786133">5</tspan></text></g><g id="id570_Graphic"><ellipse cx="497.5" cy="247.783" rx="13.000021" ry="11.0000176" fill="#81ffff"/><ellipse cx="497.5" cy="247.783" rx="13.000021" ry="11.0000176" stroke="#65f9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(492.1 239.283)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="500" x="1.5069336" y="14" textLength="7.786133">6</tspan></text></g><line x1="573.1769" y1="191.86917" x2="469.98" y2="246.72703" marker-end="url(#FilledArrow_Marker_3)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/><g id="id575_Graphic"><rect x="253.75" y="8.97961" width="248.25" height="46" fill="white"/><rect x="253.75" y="8.97961" width="248.25" height="46" stroke="#ff0c1b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(258.75 15.47961)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="234.03809">angular.service(&apos;$xhr&apos;, function(...) {</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="19" textLength="18.00293">...</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="30" textLength="12.001953">})</tspan></text></g><line x1="377.94294" y1="73.018016" x2="377.91392" y2="55.47961" marker-start="url(#FilledArrow_Marker_6)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g id="id577_Graphic"><ellipse cx="233" cy="241.002" rx="13.000021" ry="11.0000176" fill="#81ffff"/><ellipse cx="233" cy="241.002" rx="13.000021" ry="11.0000176" stroke="#65f9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(227.6 232.502)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="500" x="1.5069336" y="14" textLength="7.786133">3</tspan></text></g><text transform="translate(567.375 460.842)" fill="black"><tspan font-family="Helvetica" font-size="10" font-weight="500" x="0" y="10" textLength="121.17676">DI provides the instance of </tspan><tspan font-family="Courier New" font-size="10" font-weight="500" x="121.17676" y="10" textLength="24.003906">$xhr</tspan><tspan font-family="Helvetica" font-size="10" font-weight="500" x="145.18066" y="10" textLength="2.7783203"> </tspan><tspan font-family="Helvetica" font-size="10" font-weight="500" x="0" y="23" textLength="168.96484">service to the PhoneListCtrl controller </tspan><tspan font-family="Helvetica" font-size="10" font-weight="500" x="0" y="35" textLength="49.46289">constructor</tspan><tspan font-family="Helvetica" font-size="10" font-weight="500" x="48.916016" y="35" textLength="2.7783203">.</tspan></text><g id="id579_Graphic"><ellipse cx="543.875" cy="475.01" rx="13.000021" ry="11.0000176" fill="#81ffff"/><ellipse cx="543.875" cy="475.01" rx="13.000021" ry="11.0000176" stroke="#65f9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(538.475 466.51)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="500" x="1.5069336" y="14" textLength="7.786133">6</tspan></text></g><text transform="translate(397 107.31)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="36.00586">$route</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="19" textLength="18.00293">...</tspan></text><g id="id559_Graphic"><ellipse cx="402" cy="66.1449" rx="13.000021" ry="11.0000176" fill="#81ffff"/><ellipse cx="402" cy="66.1449" rx="13.000021" ry="11.0000176" stroke="#65f9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(396.6 57.6449)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="500" x="1.5069336" y="14" textLength="7.786133">1</tspan></text></g></g></g></svg>