images/docs/guide/about_controller.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 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-12 20:34:05 +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(343.5 94) rotate(90) scale(91)"/><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="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_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(45 26) rotate(90) scale(25)"/><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_3" xl:href="#Gradient" gradientTransform="translate(343.5 11) rotate(90) scale(55.999)"/><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><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_4" xl:href="#Gradient_3" gradientTransform="translate(78 173.751) rotate(90) scale(55.999)"/><linearGradient id="Obj_Gradient_5" xl:href="#Gradient_2" gradientTransform="translate(76 340.5) rotate(90) scale(18)"/><linearGradient id="Obj_Gradient_6" xl:href="#Gradient_2" gradientTransform="translate(47.5 281) rotate(90) scale(25)"/><linearGradient id="Obj_Gradient_7" xl:href="#Gradient_3" gradientTransform="translate(82.5 117.999) rotate(90) scale(43.001)"/><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker_2" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="#65ff5a"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><linearGradient id="Obj_Gradient_8" xl:href="#Gradient_3" gradientTransform="translate(56.5 241) rotate(90) scale(25)"/><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="Arrow_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="none" stroke="currentColor" stroke-width="1"/></g></marker><font-face font-family="Courier New" font-size="10" panose-1="2 7 6 9 2 2 5 9 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="-1200" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-style="italic" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldItalicMT"/></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><linearGradient id="Obj_Gradient_9" xl:href="#Gradient" gradientTransform="translate(200 419) rotate(90) scale(20)"/><linearGradient id="Obj_Gradient_a" xl:href="#Gradient_2" gradientTransform="translate(200 386) rotate(90) scale(20)"/></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="#id612_Graphic" filter="url(#Shadow)"/><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="#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)"/><xl:use xl:href="#id611_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id423_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id615_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id616_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id626_Graphic" filter="url(#Shadow)"/></g><g id="id612_Graphic"><ellipse cx="343.5" cy="139.5" rx="70.500113" ry="45.500073" fill="url(#Obj_Gradient)"/><ellipse cx="343.5" cy="139.5" rx="70.500113" ry="45.500073" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(292.1 112.65)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="17.392188" y="11" textLength="71.34961">MyController </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="34.387305" y="25" textLength="34.02539">Scope</tspan></text></g><g id="id105_Graphic"><rect x="318" y="340.5" width="64" height="18" fill="#fefffc"/><rect x="318" y="340.5" width="64" height="18" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(323 341)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="500" x="7.9345703" y="14" textLength="38.13086">Model</tspan></text></g><g id="id4_Graphic"><rect x="20" y="26" width="50" height="25" fill="url(#Obj_Gradient_2)"/><rect x="20" y="26" width="50" height="25" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(25 33)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="1.9970703" y="8" textLength="36.00586"><html></tspan></text></g><g id="id6_Graphic"><ellipse cx="343.5" cy="38.9995" rx="68.00011" ry="27.999545" fill="url(#Obj_Gradient_3)"/><ellipse cx="343.5" cy="38.9995" rx="68.00011" ry="27.999545" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(294.1 24.39985)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="18.046484" y="11" textLength="62.70703">Root Scope</tspan></text></g><line x1="70.5" y1="38.542672" x2="265.10054" y2="38.868318" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><g id="id55_Graphic"><rect x="29" y="173.751" width="98" height="55.999" fill="url(#Obj_Gradient_4)"/><rect x="29" y="173.751" width="98" height="55.999" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(34 178.751)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="42.006836"><input </tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="19" textLength="78.012695"> name="foo" </tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="30" textLength="6.0009766">></tspan></text></g><g id="id67_Graphic"><path d="M 315.75 148 L 375.25 148 C 382.288 148 388 152.48 388 158 C 388 163.52 382.288 168 375.25 168 L 315.75 168 C 308.712 168 303 163.52 303 158 C 303 152.48 308.712 148 315.75 148" fill="white"/><path d="M 315.75 148 L 375.25 148 C 382.288 148 388 152.48 388 158 C 388 163.52 382.288 168 375.25 168 L 315.75 168 C 308.712 168 303 163.52 303 158 C 303 152.48 308.712 148 315.75 148" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(316.5 151)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="4.3935547" y="11" textLength="49.21289">foo: "bar"</tspan></text></g><line x1="21" y1="367.75" x2="684" y2="367" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g id="id107_Graphic"><rect x="38" y="340.5" width="76" height="18" fill="url(#Obj_Gradient_5)"/><rect x="38" y="340.5" width="76" height="18" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(43 341)" 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 27)" 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><g id="id607_Graphic"><rect x="20" y="281" width="55" height="25" fill="url(#Obj_Gradient_6)"/><rect x="20" y="281" width="55" height="25" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(25 288)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="1.496582" y="8" textLength="42.006836"></html></tspan></text></g><line x1="127.49344" y1="193.65563" x2="295.7531" y2="166.13603" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><g id="id609_Graphic"><text transform="translate(140 191.249)" 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 id="id611_Graphic"><rect x="531" y="340.5" width="80" height="18" fill="#fefffc"/><rect x="531" y="340.5" width="80" height="18" stroke="#ff3535" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(536 341)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="500" x="4.6552734" y="14" textLength="60.689453">Controller</tspan></text></g><rect x="489" y="20" width="161" height="76" fill="white"/><rect x="489" y="20" width="161" height="76" stroke="#ff0c1b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(495.5 25.5)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="144.02344">function MyController(){</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="19" textLength="114.018555"> this.foo = 'bar';</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="30" textLength="150.02441"> this.save = function(){</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="41" textLength="138.02246"> //do something nice</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="52" textLength="18.00293"> }</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="63" textLength="6.0009766">}</tspan></text><g id="id423_Graphic"><rect x="29" y="117.999" width="107" height="43.001" fill="url(#Obj_Gradient_7)"/><rect x="29" y="117.999" width="107" height="43.001" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(34 122.9995)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="36.00586"><body </tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="19" textLength="90.01465"> ng:controller=</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="30" textLength="96.015625"> "MyController"></tspan></text></g><line x1="136.5" y1="139.49961" x2="262.59996" y2="139.49986" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="343.4697" y1="93.49998" x2="343.45908" y2="77.399005" marker-end="url(#FilledArrow_Marker_2)" stroke="#65ff5a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><g id="id615_Graphic"><rect x="29" y="241" width="55" height="25" fill="url(#Obj_Gradient_8)"/><rect x="29" y="241" width="55" height="25" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(34 248)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="42.006836"></body></tspan></text></g><g id="id616_Graphic"><text transform="translate(162 127.499)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="1.9936523" y="8" textLength="78.012695">ng:controller</tspan></text></g><line x1="574" y1="58.5" x2="569.5" y2="58" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="488.5298" y1="87.274336" x2="414.93987" y2="113.88037" marker-end="url(#Arrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="1,4"/><g id="id626_Graphic"><text transform="translate(432 112.249)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="8" textLength="48.007812">AngularJS </tspan><tspan font-family="Courier New" font-size="10" font-style="italic" font-weight="bold" x="48.007812" y="8" textLength="42.006836">applies</tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="90.01465" y="8" textLength="72.01172"> controller </tspan><tspan font-family="Courier New" font-size="10" font-weight="bold" x="0" y="19" textLength="150.02441">function to scope object.</tspan></text></g><rect x="126" y="380" width="448" height="101" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(126 386)" 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="200" cy="429" rx="20.000032" ry="10.000016" fill="url(#Obj_Gradient_9)"/><ellipse cx="200" cy="429" rx="20.000032" ry="10.000016" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(240 422)" 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="180" y="386" width="40" height="20" fill="url(#Obj_Gradient_a)"/><rect x="180" y="386" width="40" height="20" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(185 389)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="2.991211" y="11" textLength="24.017578"><...></tspan></text><text transform="translate(240 389)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="60.017578">DOM Node</tspan></text><text transform="translate(240 455)" 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 182.8 452 L 219.2 452 C 223.5056 452 227 456.48 227 462 C 227 467.52 223.5056 472 219.2 472 L 182.8 472 C 178.4944 472 175 467.52 175 462 C 175 456.48 178.4944 452 182.8 452" fill="white"/><path d="M 182.8 452 L 219.2 452 C 223.5056 452 227 456.48 227 462 C 227 467.52 223.5056 472 219.2 472 L 182.8 472 C 178.4944 472 175 467.52 175 462 C 175 456.48 178.4944 452 182.8 452" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="364" y1="429.5" x2="400.064" y2="429.5" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><text transform="translate(421.624 422.12685)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="142.06055"> Implicit Scope Declaration</tspan></text><text transform="translate(429 389)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="97.38281">Controller function</tspan></text><rect x="364" y="386" width="52" height="20" fill="white"/><rect x="364" y="386" width="52" height="20" stroke="#ff1c22" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g></g></svg>