| OLD | NEW |
| 1 <h1 id="lab_3_model_view_controller">Create MVC</h1> | 1 <h1 id="lab_3_model_view_controller">Create MVC</h1> |
| 2 | 2 |
| 3 <p>Whenever your application grows beyond a single script with a few dozen lines
, | 3 <p>Whenever your application grows beyond a single script with a few dozen lines
, |
| 4 it gets harder and harder to manage without a good separation | 4 it gets harder and harder to manage without a good separation |
| 5 of roles among app components. | 5 of roles among app components. |
| 6 One of the most common models for structuring a complex application, | 6 One of the most common models for structuring a complex application, |
| 7 no matter what language, | 7 no matter what language, |
| 8 is the Model-View-Controller (MVC) and its variants, | 8 is the Model-View-Controller (MVC) and its variants, |
| 9 like Model-View-Presentation (MVP).</p> | 9 like Model-View-Presentation (MVP).</p> |
| 10 | 10 |
| 11 <p>There are several frameworks to help apply | 11 <p>There are several frameworks to help apply |
| 12 <a href="app_frameworks.html">MVC concepts</a> | 12 <a href="app_frameworks">MVC concepts</a> |
| 13 to a Javascript application, and most of them, | 13 to a Javascript application, and most of them, |
| 14 as long as they are CSP compliant, can be used in a Chrome App. | 14 as long as they are CSP compliant, can be used in a Chrome App. |
| 15 In this lab, | 15 In this lab, |
| 16 we'll add an MVC model using both pure JavaScript and | 16 we'll add an MVC model using both pure JavaScript and |
| 17 the <a href="http://angularjs.org/">AngularJS</a> framework. | 17 the <a href="http://angularjs.org/">AngularJS</a> framework. |
| 18 Most of the AngularJS code from this section was copied, | 18 Most of the AngularJS code from this section was copied, |
| 19 with small changes, from the AngularJS Todo tutorial.</p> | 19 with small changes, from the AngularJS Todo tutorial.</p> |
| 20 | 20 |
| 21 <p class="note"><b>Note:</b> | 21 <p class="note"><b>Note:</b> |
| 22 Chrome Apps don't enforce any specific framework or programming style. | 22 Chrome Apps don't enforce any specific framework or programming style. |
| (...skipping 375 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 398 <h3 id="check2">Check the results</h3> | 398 <h3 id="check2">Check the results</h3> |
| 399 | 399 |
| 400 <p> | 400 <p> |
| 401 Check the results by reloading the app: open the app, right-click and select Rel
oad App.</li> | 401 Check the results by reloading the app: open the app, right-click and select Rel
oad App.</li> |
| 402 </p> | 402 </p> |
| 403 | 403 |
| 404 <h2 id="takeaways_">Takeaways</h2> | 404 <h2 id="takeaways_">Takeaways</h2> |
| 405 | 405 |
| 406 <ul> | 406 <ul> |
| 407 <li><p>Chrome Apps are | 407 <li><p>Chrome Apps are |
| 408 <a href="offline_apps.html">offline first</a>, | 408 <a href="offline_apps">offline first</a>, |
| 409 so the recommended way to include third-party scripts is to download | 409 so the recommended way to include third-party scripts is to download |
| 410 and package them inside your app.</p></li> | 410 and package them inside your app.</p></li> |
| 411 <li><p>You can use any framework you want, | 411 <li><p>You can use any framework you want, |
| 412 as long as it complies with Content Security Policies | 412 as long as it complies with Content Security Policies |
| 413 and other restrictions that Chrome Apps are enforced to follow.</p></li> | 413 and other restrictions that Chrome Apps are enforced to follow.</p></li> |
| 414 <li><p>MVC frameworks make your life easier. | 414 <li><p>MVC frameworks make your life easier. |
| 415 Use them, specially if you want to build a non-trivial application.</p></li> | 415 Use them, specially if you want to build a non-trivial application.</p></li> |
| 416 </ul> | 416 </ul> |
| 417 | 417 |
| 418 <h2 id="you_should_also_read">You should also read</h2> | 418 <h2 id="you_should_also_read">You should also read</h2> |
| 419 | 419 |
| 420 <ul> | 420 <ul> |
| 421 <li><p><a href="angular_framework.html">Build Apps with AngularJS</a> tutorial</
p></li> | 421 <li><p><a href="angular_framework">Build Apps with AngularJS</a> tutorial</p></l
i> |
| 422 <li><p><a href="http://angularjs.org/">AngularJS Todo</a> tutorial</p></li> | 422 <li><p><a href="http://angularjs.org/">AngularJS Todo</a> tutorial</p></li> |
| 423 </ul> | 423 </ul> |
| 424 | 424 |
| 425 <h2 id="what_39_s_next_">What's next?</h2> | 425 <h2 id="what_39_s_next_">What's next?</h2> |
| 426 | 426 |
| 427 <p>In <a href="app_codelab5_data.html">4 - Save and Fetch Data</a>, | 427 <p>In <a href="app_codelab5_data">4 - Save and Fetch Data</a>, |
| 428 you will modify your Todo list app so that Todo items are saved.</p> | 428 you will modify your Todo list app so that Todo items are saved.</p> |
| OLD | NEW |