OLD | NEW |
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 Loading... |
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 Loading... |
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 Loading... |
323 </li> | 323 </li> |
324 </ul> | 324 </ul> |
325 </section> | 325 </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 Loading... |
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> |
OLD | NEW |