Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(702)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/common/extensions/docs/templates/articles/app_codelab3_mvc.html

Issue 219213007: Remove .html extension from links (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html ('K') | « chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html ('k') | chrome/common/extensions/docs/templates/articles/app_codelab5_data.html » ('j') | chrome/common/extensions/docs/templates/articles/app_codelab5_data.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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&#39;t enforce any specific framework or programming style. 22 Chrome Apps don&#39;t enforce any specific framework or programming style.
23 </p> 23 </p>
24 24
25 <h2 id="simple">Create a simple view</h2> 25 <h2 id="simple">Create a simple view</h2>
26 26
27 <h3 id="basic-mvc">Add MVC basics</h3> 27 <h3 id="basic-mvc">Add MVC basics</h3>
28 28
29 <p>If using AngularJS, download the 29 <p>If using AngularJS, download the
30 <a href="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js">An gular script</a> 30 <a href="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js">An gular script</a>
31 and save it as 31 and save it as
32 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab3_mvc /angularjs/simpleview/angular.min.js">angular.min.js</a>.</p> 32 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab3_mvc /angularjs/simpleview/angular.min.js">angular.min.js</a>.</p>
33 33
34 <p>If using JavaScript, 34 <p>If using JavaScript,
35 you will need to add a very simple controller with basic MVC functionalities: 35 you will need to add a very simple controller with basic MVC functionalities:
36 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab3_mvc /javascript/simpleview/controller.js">JavaScript controller.js</a></p> 36 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab3_mvc /javascript/simpleview/controller.js">JavaScript controller.js</a></p>
37 37
38 <h3 id="update-view">Update view</h3> 38 <h3 id="update-view">Update view</h3>
39 39
40 <p>Change the <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/m aster/lab3_mvc/angularjs/simpleview/index.html">AngularJS index.html</a> or 40 <p>Change the <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/m aster/lab3_mvc/angularjs/simpleview/index">AngularJS index</a> or
mkearney1 2014/04/09 19:43:29 Need to make sure links work to GitHub samples wit
mkearney1 2014/04/09 19:43:29 Keep .html here as it refers to a filename for a s
41 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab3_mvc /javascript/simpleview/index.html">JavaScript index.html</a> to use a simple sam ple: 41 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab3_mvc /javascript/simpleview/index">JavaScript index</a> to use a simple sample:
mkearney1 2014/04/09 19:43:29 Need to make sure links work to GitHub samples wit
mkearney1 2014/04/09 19:43:29 Keep .html here as it refers to a filename for a s
42 </p> 42 </p>
43 43
44 <tabs data-group="source"> 44 <tabs data-group="source">
45 45
46 <header tabindex="0" data-value="angular">Angular</header> 46 <header tabindex="0" data-value="angular">Angular</header>
47 <header tabindex="0" data-value="js">JavaScript</header> 47 <header tabindex="0" data-value="js">JavaScript</header>
48 48
49 <content> 49 <content>
50 <pre data-filename="index.html"> 50 <pre data-filename="index">
mkearney1 2014/04/09 19:43:29 Keep .html here as it refers to a filename for a s
51 &lt;!doctype html&gt; 51 &lt;!doctype html&gt;
52 &lt;html ng-app ng-csp&gt; 52 &lt;html ng-app ng-csp&gt;
53 &lt;head&gt; 53 &lt;head&gt;
54 &lt;script src=&quot;angular.min.js&quot;&gt;&lt;/script&gt; 54 &lt;script src=&quot;angular.min.js&quot;&gt;&lt;/script&gt;
55 &lt;link rel="stylesheet" href="todo.css"&gt; 55 &lt;link rel="stylesheet" href="todo.css"&gt;
56 &lt;/head&gt; 56 &lt;/head&gt;
57 &lt;body&gt; 57 &lt;body&gt;
58 &lt;h2&gt;Todo&lt;/h2&gt; 58 &lt;h2&gt;Todo&lt;/h2&gt;
59 &lt;div&gt; 59 &lt;div&gt;
60 &lt;ul&gt; 60 &lt;ul&gt;
61 &lt;li&gt; 61 &lt;li&gt;
62 &#123;&#123;todoText&#125;&#125; 62 &#123;&#123;todoText&#125;&#125;
63 &lt;/li&gt; 63 &lt;/li&gt;
64 &lt;/ul&gt; 64 &lt;/ul&gt;
65 &lt;input type=&quot;text&quot; ng-model=&quot;todoText&quot; size="30" 65 &lt;input type=&quot;text&quot; ng-model=&quot;todoText&quot; size="30"
66 placeholder=&quot;type your todo here&quot;&gt; 66 placeholder=&quot;type your todo here&quot;&gt;
67 &lt;/div&gt; 67 &lt;/div&gt;
68 &lt;/body&gt; 68 &lt;/body&gt;
69 &lt;/html&gt; 69 &lt;/html&gt;
70 </pre> 70 </pre>
71 </content> 71 </content>
72 <content> 72 <content>
73 <pre data-filename="index.html"> 73 <pre data-filename="index">
mkearney1 2014/04/09 19:43:29 Keep .html here as it refers to a filename for a s
74 &lt;!doctype html&gt; 74 &lt;!doctype html&gt;
75 &lt;html&gt; 75 &lt;html&gt;
76 &lt;head&gt; 76 &lt;head&gt;
77 &lt;link rel=&quot;stylesheet&quot; href=&quot;todo.css&quot;&gt; 77 &lt;link rel=&quot;stylesheet&quot; href=&quot;todo.css&quot;&gt;
78 &lt;/head&gt; 78 &lt;/head&gt;
79 &lt;body&gt; 79 &lt;body&gt;
80 &lt;h2&gt;Todo&lt;/h2&gt; 80 &lt;h2&gt;Todo&lt;/h2&gt;
81 &lt;div&gt; 81 &lt;div&gt;
82 &lt;ul&gt; 82 &lt;ul&gt;
83 &lt;li id=&quot;todoText&quot;&gt; 83 &lt;li id=&quot;todoText&quot;&gt;
(...skipping 228 matching lines...) Expand 10 before | Expand all | Expand 10 after
312 312
313 updateCounters(model); 313 updateCounters(model);
314 314
315 }); 315 });
316 </pre> 316 </pre>
317 </content> 317 </content>
318 </tabs> 318 </tabs>
319 319
320 <h3 id="index">Update view</h3> 320 <h3 id="index">Update view</h3>
321 321
322 <p>Change the <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/m aster/lab3_mvc/angularjs/withcontroller/index.html">AngularJS index.html</a> or 322 <p>Change the <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/m aster/lab3_mvc/angularjs/withcontroller/index">AngularJS index</a> or
mkearney1 2014/04/09 19:43:29 Test that link works without .html to Github repo
mkearney1 2014/04/09 19:43:29 Keep .html here as it refers to a filename in a sa
323 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab3_mvc /javascript/withcontroller/index.html">JavaScript index.html</a>: 323 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab3_mvc /javascript/withcontroller/index">JavaScript index</a>:
mkearney1 2014/04/09 19:43:29 Again, test link works without .html to Github rep
mkearney1 2014/04/09 19:43:29 Keep .html here as it refers to a filename in a sa
324 </p> 324 </p>
325 325
326 <tabs data-group="source"> 326 <tabs data-group="source">
327 327
328 <header tabindex="0" data-value="angular">Angular</header> 328 <header tabindex="0" data-value="angular">Angular</header>
329 <header tabindex="0" data-value="js">JavaScript</header> 329 <header tabindex="0" data-value="js">JavaScript</header>
330 330
331 <content> 331 <content>
332 <pre data-filename="index.html"> 332 <pre data-filename="index">
mkearney1 2014/04/09 19:43:29 Keep .html here as it refers to a filename in a sa
333 &lt;html ng-app ng-csp&gt; 333 &lt;html ng-app ng-csp&gt;
334 &lt;head&gt; 334 &lt;head&gt;
335 &lt;script src=&quot;angular.min.js&quot;&gt;&lt;/script&gt; 335 &lt;script src=&quot;angular.min.js&quot;&gt;&lt;/script&gt;
336 &lt;script src=&quot;controller.js&quot;&gt;&lt;/script&gt; 336 &lt;script src=&quot;controller.js&quot;&gt;&lt;/script&gt;
337 &lt;link rel=&quot;stylesheet&quot; href=&quot;todo.css&quot;&gt; 337 &lt;link rel=&quot;stylesheet&quot; href=&quot;todo.css&quot;&gt;
338 &lt;/head&gt; 338 &lt;/head&gt;
339 &lt;body&gt; 339 &lt;body&gt;
340 &lt;h2&gt;Todo&lt;/h2&gt; 340 &lt;h2&gt;Todo&lt;/h2&gt;
341 &lt;div ng-controller=&quot;TodoCtrl&quot;&gt; 341 &lt;div ng-controller=&quot;TodoCtrl&quot;&gt;
342 &lt;span&gt;&#123;&#123;remaining()&#125;&#125; of &#123;&#123;todos.lengt h&#125;&#125; remaining&lt;/span&gt; 342 &lt;span&gt;&#123;&#123;remaining()&#125;&#125; of &#123;&#123;todos.lengt h&#125;&#125; remaining&lt;/span&gt;
343 [ &lt;a href=&quot;&quot; ng-click=&quot;archive()&quot;&gt;archive&lt;/a& gt; ] 343 [ &lt;a href=&quot;&quot; ng-click=&quot;archive()&quot;&gt;archive&lt;/a& gt; ]
344 &lt;ul&gt; 344 &lt;ul&gt;
345 &lt;li ng-repeat=&quot;todo in todos&quot;&gt; 345 &lt;li ng-repeat=&quot;todo in todos&quot;&gt;
346 &lt;input type=&quot;checkbox&quot; ng-model=&quot;todo.done&quot;&gt; 346 &lt;input type=&quot;checkbox&quot; ng-model=&quot;todo.done&quot;&gt;
347 &lt;span class=&quot;done-&#123;&#123;todo.done&#125;&#125;&quot;&gt;& #123;&#123;todo.text&#125;&#125;&lt;/span&gt; 347 &lt;span class=&quot;done-&#123;&#123;todo.done&#125;&#125;&quot;&gt;& #123;&#123;todo.text&#125;&#125;&lt;/span&gt;
348 &lt;/li&gt; 348 &lt;/li&gt;
349 &lt;/ul&gt; 349 &lt;/ul&gt;
350 &lt;form ng-submit=&quot;addTodo()&quot;&gt; 350 &lt;form ng-submit=&quot;addTodo()&quot;&gt;
351 &lt;input type=&quot;text&quot; ng-model=&quot;todoText&quot; size=&quot ;30&quot; 351 &lt;input type=&quot;text&quot; ng-model=&quot;todoText&quot; size=&quot ;30&quot;
352 placeholder=&quot;add new todo here&quot;&gt; 352 placeholder=&quot;add new todo here&quot;&gt;
353 &lt;input class=&quot;btn-primary&quot; type=&quot;submit&quot; value=&q uot;add&quot;&gt; 353 &lt;input class=&quot;btn-primary&quot; type=&quot;submit&quot; value=&q uot;add&quot;&gt;
354 &lt;/form&gt; 354 &lt;/form&gt;
355 &lt;/div&gt; 355 &lt;/div&gt;
356 &lt;/body&gt; 356 &lt;/body&gt;
357 &lt;/html&gt; 357 &lt;/html&gt;
358 </pre> 358 </pre>
359 </content> 359 </content>
360 <content> 360 <content>
361 <pre data-filename="index.html"> 361 <pre data-filename="index">
mkearney1 2014/04/09 19:43:29 Keep .html here as it refers to a filename in a sa
362 &lt;!doctype html&gt; 362 &lt;!doctype html&gt;
363 &lt;html&gt; 363 &lt;html&gt;
364 &lt;head&gt; 364 &lt;head&gt;
365 &lt;link rel=&quot;stylesheet&quot; href=&quot;todo.css&quot;&gt; 365 &lt;link rel=&quot;stylesheet&quot; href=&quot;todo.css&quot;&gt;
366 &lt;/head&gt; 366 &lt;/head&gt;
367 &lt;body&gt; 367 &lt;body&gt;
368 &lt;h2&gt;Todo&lt;/h2&gt; 368 &lt;h2&gt;Todo&lt;/h2&gt;
369 &lt;div&gt; 369 &lt;div&gt;
370 &lt;span&gt;&lt;span id=&quot;remaining&quot;&gt;&lt;/span&gt; of &lt;span id=&quot;length&quot;&gt;&lt;/span&gt; remaining&lt;/span&gt; 370 &lt;span&gt;&lt;span id=&quot;remaining&quot;&gt;&lt;/span&gt; of &lt;span id=&quot;length&quot;&gt;&lt;/span&gt; remaining&lt;/span&gt;
371 [ &lt;a href=&quot;&quot; id=&quot;archive&quot;&gt;archive&lt;/a&gt; ] 371 [ &lt;a href=&quot;&quot; id=&quot;archive&quot;&gt;archive&lt;/a&gt; ]
(...skipping 26 matching lines...) Expand all
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>
OLDNEW
« chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html ('K') | « chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html ('k') | chrome/common/extensions/docs/templates/articles/app_codelab5_data.html » ('j') | chrome/common/extensions/docs/templates/articles/app_codelab5_data.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698