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

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

Issue 219213007: Remove .html extension from links (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 7 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
OLDNEW
1 <meta name="doc-family" content="apps"> 1 <meta name="doc-family" content="apps">
2 <h1>Build Apps with AngularJS</h1> 2 <h1>Build Apps with AngularJS</h1>
3 <!--Article written by Eric Bidelman--> 3 <!--Article written by Eric Bidelman-->
4 <p> 4 <p>
5 This guide gets you started building Chrome Apps 5 This guide gets you started building Chrome Apps
6 with the <a href="http://angularjs.org/">AngularJS</a> MVC framework. 6 with the <a href="http://angularjs.org/">AngularJS</a> MVC framework.
7 To illustrate Angular in action, 7 To illustrate Angular in action,
8 we'll be referencing an actual app built using the framework, 8 we'll be referencing an actual app built using the framework,
9 the Google Drive Uploader. 9 the Google Drive Uploader.
10 The <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/gdri ve">source code</a> 10 The <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/gdri ve">source code</a>
(...skipping 15 matching lines...) Expand all
26 <a href="http://www.html5rocks.com/en/tutorials/dnd/basics/">HTML Drag and Drop APIs</a>. 26 <a href="http://www.html5rocks.com/en/tutorials/dnd/basics/">HTML Drag and Drop APIs</a>.
27 It's a great example of building an app which talks 27 It's a great example of building an app which talks
28 to one of <a href="https://developers.google.com/apis-explorer/#p/">Google's API s</a>; 28 to one of <a href="https://developers.google.com/apis-explorer/#p/">Google's API s</a>;
29 in this case, the Google Drive API. 29 in this case, the Google Drive API.
30 </p> 30 </p>
31 31
32 <p class="note"> 32 <p class="note">
33 <strong>Note: </strong> 33 <strong>Note: </strong>
34 You can also build apps which talk to 3rd party APIs/services 34 You can also build apps which talk to 3rd party APIs/services
35 that are OAuth2-enabled. 35 that are OAuth2-enabled.
36 See <a href="app_identity.html#non">non-Google Account authentication</a>. 36 See <a href="app_identity#non">non-Google Account authentication</a>.
37 </p> 37 </p>
38 38
39 <p> 39 <p>
40 The Uploader uses OAuth2 to access the user's data. The 40 The Uploader uses OAuth2 to access the user's data. The
41 <a href="identity.html">chrome.identity API</a> 41 <a href="identityhtml">chrome.identity API</a>
42 handles fetching an OAuth token for the logged-in user, 42 handles fetching an OAuth token for the logged-in user,
43 so the hard work is done for us! 43 so the hard work is done for us!
44 Once we have a long-lived access token, 44 Once we have a long-lived access token,
45 the apps uses the 45 the apps uses the
46 <a href="https://developers.google.com/drive/get-started">Google Drive API</a> 46 <a href="https://developers.google.com/drive/get-started">Google Drive API</a>
47 to access the user's data. 47 to access the user's data.
48 </p> 48 </p>
49 49
50 <p> 50 <p>
51 Key features this app uses: 51 Key features this app uses:
52 </p> 52 </p>
53 53
54 <ul> 54 <ul>
55 <li>AngularJS's autodetection for 55 <li>AngularJS's autodetection for
56 <a href="contentSecurityPolicy.html">CSP</a></li> 56 <a href="contentSecurityPolicyhtml">CSP</a></li>
57 <li>Render a list of files fetched from the 57 <li>Render a list of files fetched from the
58 <a href="https://developers.google.com/drive/get-started">Google Drive A PI</a></li> 58 <a href="https://developers.google.com/drive/get-started">Google Drive A PI</a></li>
59 <li><a href="http://www.html5rocks.com/en/tutorials/file/filesystem/">HTML5 Filesystem API</a> 59 <li><a href="http://www.html5rocks.com/en/tutorials/file/filesystem/">HTML5 Filesystem API</a>
60 to store file icons offline</li> 60 to store file icons offline</li>
61 <li><a href="http://www.html5rocks.com/en/tutorials/dnd/basics/">HTML5 Drag and Drop</a> 61 <li><a href="http://www.html5rocks.com/en/tutorials/dnd/basics/">HTML5 Drag and Drop</a>
62 for importing/uploading new files from the desktop</li> 62 for importing/uploading new files from the desktop</li>
63 <li>XHR2 to load images, cross-domain</li> 63 <li>XHR2 to load images, cross-domain</li>
64 <li><a href="app_identity.html">chrome.identity API</a> 64 <li><a href="app_identityhtml">chrome.identity API</a>
65 for OAuth authorization</li> 65 for OAuth authorization</li>
66 <li>Chromeless frames to define the app's own navbar look and feel</li> 66 <li>Chromeless frames to define the app's own navbar look and feel</li>
67 </ul> 67 </ul>
68 68
69 <h2 id="second">Creating the manifest</h2> 69 <h2 id="second">Creating the manifest</h2>
70 70
71 <p> 71 <p>
72 All Chrome Apps require a <code>manifest.json</code> file 72 All Chrome Apps require a <code>manifest.json</code> file
73 which contains the information Chrome needs to launch the app. 73 which contains the information Chrome needs to launch the app.
74 The manifest contains relevant metadata and 74 The manifest contains relevant metadata and
(...skipping 26 matching lines...) Expand all
101 } 101 }
102 </pre> 102 </pre>
103 103
104 <p> 104 <p>
105 The most important parts of this manifest are the "oauth2" and "permissions" sec tions. 105 The most important parts of this manifest are the "oauth2" and "permissions" sec tions.
106 </p> 106 </p>
107 107
108 <p> 108 <p>
109 The "oauth2" section defines the required parameters by OAuth2 to do its magic. 109 The "oauth2" section defines the required parameters by OAuth2 to do its magic.
110 To create a "client_id", follow the instructions in 110 To create a "client_id", follow the instructions in
111 <a href="app_identity.html#client_id">Get your client id</a>. 111 <a href="app_identityhtml#client_id">Get your client id</a>.
112 The "scopes" list the authorization scopes 112 The "scopes" list the authorization scopes
113 that the OAuth token will be valid for (for example, the APIs the app wants to a ccess). 113 that the OAuth token will be valid for (for example, the APIs the app wants to a ccess).
114 </p> 114 </p>
115 115
116 <p> 116 <p>
117 The "permissions" section includes URLs that the app will access via XHR2. 117 The "permissions" section includes URLs that the app will access via XHR2.
118 The URL prefixes are required in order for Chrome 118 The URL prefixes are required in order for Chrome
119 to know which cross-domain requests to allow. 119 to know which cross-domain requests to allow.
120 </p> 120 </p>
121 121
(...skipping 201 matching lines...) Expand 10 before | Expand all | Expand 10 after
323 &lt;/li> 323 &lt;/li>
324 &lt;/ul> 324 &lt;/ul>
325 &lt;/section> 325 &lt;/section>
326 </pre> 326 </pre>
327 327
328 <h3 id="csp">A word on Content Security Policy</h3> 328 <h3 id="csp">A word on Content Security Policy</h3>
329 329
330 <p> 330 <p>
331 Unlike many other JS MVC frameworks, 331 Unlike many other JS MVC frameworks,
332 Angular v1.1.0+ requires no tweaks to work within a strict 332 Angular v1.1.0+ requires no tweaks to work within a strict
333 <a href="contentSecurityPolicy.html">CSP</a>. 333 <a href="contentSecurityPolicyhtml">CSP</a>.
334 It just works, out of the box! 334 It just works, out of the box!
335 </p> 335 </p>
336 336
337 <p> 337 <p>
338 However, if you're using an older version 338 However, if you're using an older version
339 of Angular between v1.0.1 and v1.1.0, 339 of Angular between v1.0.1 and v1.1.0,
340 you'll need tell Angular to run in a "content security mode". 340 you'll need tell Angular to run in a "content security mode".
341 This is done by including the 341 This is done by including the
342 <a href="http://docs.angularjs.org/api/ng.directive:ngCsp">ngCsp</a> 342 <a href="http://docs.angularjs.org/api/ng.directive:ngCsp">ngCsp</a>
343 directive alongside <a href="http://docs.angularjs.org/api/ng.directive:ngApp">n gApp</a>: 343 directive alongside <a href="http://docs.angularjs.org/api/ng.directive:ngApp">n gApp</a>:
(...skipping 406 matching lines...) Expand 10 before | Expand all | Expand 10 after
750 $scope.fetchDocs(); 750 $scope.fetchDocs();
751 }); 751 });
752 }); 752 });
753 }); 753 });
754 754
755 return gdocs; 755 return gdocs;
756 }); 756 });
757 </pre> 757 </pre>
758 758
759 <p class="backtotop"><a href="#top">Back to top</a></p> 759 <p class="backtotop"><a href="#top">Back to top</a></p>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698