| 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 |