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 |