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

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

Issue 12221067: Move Chrome Apps Codelab docs to developer.chrome.com (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: fixed references to github, accordingly to the new github angularjs subdirectories; added a link to… Created 7 years, 10 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 | Annotate | Revision Log
OLDNEW
(Empty)
1 <h1 id="lab_3_model_view_controller">Lab 3 - Model-View-Controller</h1>
2
3 <p>Whenever your application grows beyond a single script with a few dozen lines , it gets
4 harder and harder to manage without a good separation of roles among app compone nts. One of the most common
5 models for structuring a complex application, no matter what language, is the Mo del-View-Controller (MVC) and
6 its variants, like Model-View-Presentation (MVP).</p>
7
8 <p>There are several frameworks to help apply <a href="http://developer.chrome.c om/trunk/apps/app_frameworks.html">MVC concepts</a> to a Javascript application, and most of them,
9 as long as they are CSP compliant, can be used in a Chrome App. We will use the <a href="http://angularjs.org/">AngularJS</a> framework in parts of this tutoria l, with a special focus on the framework in this section.</p>
10
11 <h2 id="you_should_also_read">You should also read</h2>
12
13 <ul>
14 <li><p><a href="http://developer.chrome.com/apps/angular_framework.html">Build A pps with AngularJS</a> tutorial</p></li>
mkearney1 2013/02/12 22:22:11 This link is broken. You probably just need #angul
Renato Mangini (chromium) 2013/02/13 22:55:33 Done.
15 <li><p><a href="http://angularjs.org/">AngularJS Todo</a> tutorial</p></li>
16 </ul>
17
18 <p class="note"><b>Note:</b> Chrome apps don&#39;t enforce any specific framewo rk or programming style. This section and additional parts of this tutorial use the AngularJS framework. Most of the code from this section was copied, with sma ll changes, from the AngularJS Todo tutorial. </p>
19
20 <h2 id="create_a_simple_view_using_angularjs">Create a simple view using Angular JS</h2>
21
22 <ol>
23 <li><p>Download the <a href="http://ajax.googleapis.com/ajax/libs/angularjs/1.0. 2/angular.min.js">Angular script</a> and save it as <a href="https://github.com/ GoogleChrome/chrome-app-codelab/blob/master/lab3_mvc/angularjs/simpleview/angula r.min.js">angular.min.js</a>.</p></li>
24 <li><p>Change your <a href="https://github.com/GoogleChrome/chrome-app-codelab/b lob/master/lab3_mvc/angularjs/simpleview/index.html">index.html</a> to use a sim ple Angular sample:
25 <pre>
26 &lt;html ng-app ng-csp&gt;
27 &lt;head&gt;
28 &lt;script src=&quot;angular.min.js&quot;&gt;&lt;/script&gt;
29 &lt;link rel=&quot;stylesheet&quot; href=&quot;todo.css&quot;&gt;
30 &lt;/head&gt;
31 &lt;body&gt;
32 &lt;h2&gt;Todo&lt;/h2&gt;
33 &lt;div&gt;
34 &lt;ul&gt;
35 &lt;li&gt;
36 &#123;&#123;todoText&#125;&#125;
37 &lt;/li&gt;
38 &lt;/ul&gt;
39 &lt;input type=&quot;text&quot; ng-model=&quot;todoText&quot; size=&quot; 30&quot;
40 placeholder=&quot;type your todo here&quot;&gt;
41 &lt;/div&gt;
42 &lt;/body&gt;
43 &lt;/html&gt;
44 </pre></p></li>
45 <li><p>Add a simple stylesheet: <a href="https://github.com/GoogleChrome/chrome- app-codelab/blob/master/lab3_mvc/angularjs/simpleview/todo.css">todo.css</a>
46 <pre>
47 body {
48 font-family: &quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif;
49 }
50
51 ul {
52 list-style: none;
53 }
54
55 button, input[type=submit] {
56 background-color: #0074CC;
57 background-image: linear-gradient(top, #08C, #05C);
58 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
59 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
60 color: white;
61 }
62
63 .done-true {
64 text-decoration: line-through;
65 color: grey;
66 }
67 </pre></li><li>Check the results by reloading the app: open the app, right-click and select Reload App.</li>
68 </ol>
69
70 <p class="note"><b>Note:</b> The ng-csp directive tells Angular to run in a &qu ot;content security mode&quot;. You don&#39;t need this directive when using Ang ular v1.1.0+. We&#39;ve included it here so that the sample works regardless of the Angular version in use.</p>
71
72 <h2 id="add_a_controller">Add a Controller</h2>
73
74 The previous sample, although interesting, is not exactly useful. Let&#39;s tran sform it into a real Todo list, instead of a simple Todo item. We will create a controller (controller.js) and make some small changes in the index.html:
75
76 <ol>
77 <li>Add the <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/mas ter/lab3_mvc/angularjs/withcontroller/controller.js">controller.js</a> file:
78 <pre>
79 function TodoCtrl($scope) {
80 $scope.todos = [
81 {text:&#39;learn angular&#39;, done:true},
82 {text:&#39;build an angular Chrome packaged app&#39;, done:false}];
83
84 $scope.addTodo = function() {
85 $scope.todos.push({text:$scope.todoText, done:false});
86 $scope.todoText = &#39;&#39;;
87 };
88
89 $scope.remaining = function() {
90 var count = 0;
91 angular.forEach($scope.todos, function(todo) {
92 count += todo.done ? 0 : 1;
93 });
94 return count;
95 };
96
97 $scope.archive = function() {
98 var oldTodos = $scope.todos;
99 $scope.todos = [];
100 angular.forEach(oldTodos, function(todo) {
101 if (!todo.done) $scope.todos.push(todo);
102 });
103 };
104 }
105 </pre></p></li><li><p>Change <a href="https://github.com/GoogleChrome/chrome-app -codelab/blob/master/lab3_mvc/angularjs/withcontroller/index.html">index.html</a > file:
106 <pre>
107 &lt;html ng-app ng-csp&gt;
108 &lt;head&gt;
109 &lt;script src=&quot;angular.min.js&quot;&gt;&lt;/script&gt;
110 &lt;script src=&quot;controller.js&quot;&gt;&lt;/script&gt;
111 &lt;link rel=&quot;stylesheet&quot; href=&quot;todo.css&quot;&gt;
112 &lt;/head&gt;
113 &lt;body&gt;
114 &lt;h2&gt;Todo&lt;/h2&gt;
115 &lt;div ng-controller=&quot;TodoCtrl&quot;&gt;
116 &lt;span&gt;&#123;&#123;remaining()&#125;&#125; of &#123;&#123;todos.lengt h&#125;&#125; remaining&lt;/span&gt;
117 [ &lt;a href=&quot;&quot; ng-click=&quot;archive()&quot;&gt;archive&lt;/a& gt; ]
118 &lt;ul&gt;
119 &lt;li ng-repeat=&quot;todo in todos&quot;&gt;
120 &lt;input type=&quot;checkbox&quot; ng-model=&quot;todo.done&quot;&gt;
121 &lt;span class=&quot;done-&#123;&#123;todo.done&#125;&#125;&quot;&gt;& #123;&#123;todo.text&#125;&#125;&lt;/span&gt;
122 &lt;/li&gt;
123 &lt;/ul&gt;
124 &lt;form ng-submit=&quot;addTodo()&quot;&gt;
125 &lt;input type=&quot;text&quot; ng-model=&quot;todoText&quot; size=&quot ;30&quot;
126 placeholder=&quot;add new todo here&quot;&gt;
127 &lt;input class=&quot;btn-primary&quot; type=&quot;submit&quot; value=&q uot;add&quot;&gt;
128 &lt;/form&gt;
129 &lt;/div&gt;
130 &lt;/body&gt;
131 &lt;/html&gt;
132 </pre></p></li>
133 <li><p>Check the results by reloading the app: open the app, right-click and sel ect Reload App.</p></li>
134 </ol>
135
136 <p>Note how the data, stored in an array inside the controller, binds to the vie w and is automatically updated when it is changed by the controller.</p>
137
138 <h1 id="takeaways_">Takeaways:</h1>
139
140 <ul>
141 <li><p>Chrome apps are offline first, so the recommended way to include third-pa rty scripts is to download and package them inside your app.</p></li>
mkearney1 2013/02/12 22:22:11 Make "offline first" a link to #offline_apps.html.
Renato Mangini (chromium) 2013/02/13 22:55:33 Done.
142 <li><p>You can use any framework you want, as long as it complies with Content S ecurity Policies and other restrictions that Chrome apps are enforced to follow. </p></li>
143 <li><p>MVC frameworks make your life easier. Use them, specially if you want to build a non-trivial application.</p></li>
144 </ul>
145
146 <h1 id="what_39_s_next_">What&#39;s next?</h1>
147
148 <p>Eventually in <a href="app_codelab4_testing.html">lab4_testing</a>, you will test your app.
149 Right now this lab is a work-in-progress. <a href="https://docs.google.com/a/goo gle.com/forms/d/1x3309vpp-KTiHqZWOCQhjVrIWxkm0wEBp2IWMG2ywbU/viewform?id=1x3309v pp-KTiHqZWOCQhjVrIWxkm0wEBp2IWMG2ywbU">Please let us know what you need to test your apps</a>.
mkearney1 2013/02/12 22:22:11 Remove sentence on feedback. You might want to als
Renato Mangini (chromium) 2013/02/13 22:55:33 Done.
150 You can then skip ahead to <a href="app_codelab5_data.html">lab5_data</a>.</p>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698