Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

docs(misc/downloading): update content - include missing modules #14746

Closed
wants to merge 1 commit into from
Closed

docs(misc/downloading): update content - include missing modules #14746

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 97 additions & 61 deletions docs/content/misc/downloading.ngdoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,22 @@
@name Downloading
@description

# Including angular scripts from the Google CDN
The quickest way to get started is to point your html `<script>` tag to a Google CDN URL.
# Including Angular scripts from the Google CDN
The quickest way to get started is to point your html `<script>` tag to a
[Google CDN](https://developers.google.com/speed/libraries/#angularjs) URL.
This way, you don't have to download anything or maintain a local copy.

There are two types of angular script URLs you can point to, one for development and one for
There are two types of Angular script URLs you can point to, one for development and one for
production:

* __angular.js__ — This is the human-readable, non-minified version, suitable for web
development.
* __angular.js__ — This is the human-readable, non-minified version, suitable for web development.
* __angular.min.js__ — This is the minified version, which we strongly suggest you use in
production.
production.

To point your code to an angular script on the Google CDN server, use the following template. This
To point your code to an angular script on the Google CDN server, use the following template. This
example points to the minified version 1.5.6:

```
```html
<!doctype html>
<html ng-app>
<head>
Expand All @@ -29,58 +29,94 @@ example points to the minified version 1.5.6:
</html>
```

Note that only versions 1.0.1 and above are available on the CDN, if you need an earlier version
you can use the <http://code.angularjs.org/> URL which was the previous recommended location for
hosted code source. If you're still using the angular server you should switch to the CDN version
for even faster loading times.
<div class="alert alert-info">
Note that only versions 1.0.1 and above are available on the CDN. If you need an earlier version
(which you shouldn't) you can use the https://code.angularjs.org/ URL, which was the previous
recommended location for hosted code source. If you're still using the Angular server you should
switch to the CDN version for even faster loading times.
</div>

<br />
# Downloading and hosting angular files locally
This option is for those who want to work with angular offline, or those who want to host the
angular files on their own servers.

If you navigate to <http://code.angularjs.org/>, you'll see a directory listing with all of the
angular versions since we started releasing versioned build artifacts (quite late in the project
lifetime). Each directory contains all artifacts that we released for a particular version.
Download the version you want and have fun.

Each directory under <http://code.angularjs.org/> includes the following set of files:

* __`angular.js`__ — This file is non-obfuscated, non-minified, and human-readable by
opening it in any editor or browser. In order to get better error messages during development, you
should always use this non-minified angular script.

* __`angular.min.js`__ — This is a minified and obfuscated version of
`angular.js` created with the Closure compiler. Use this version for production in order
to minimize the size of the application that is downloaded by your user's browser.

* __`angular.zip`__ — This is a zip archive that contains all of the files released
for this angular version. Use this file to get everything in a single download.

* __`angular-mocks.js`__ — This file contains an implementation of mocks that makes
testing angular apps even easier. Your unit/integration test harness should load this file after
`angular.js` is loaded.

* __`angular-scenario.js`__ — This file is a very nifty JavaScript file that allows you
to write and execute end-to-end tests for angular applications.

* __`angular-loader.min.js`__ — Module loader for Angular modules. If you are loading multiple script files containing
Angular modules, you can load them asynchronously and in any order as long as you load this file first. Often the
contents of this file are copy&pasted into the `index.html` to avoid even the initial request to `angular-loader.min.js`.
See [angular-seed](https://github.com/angular/angular-seed/blob/master/app/index-async.html) for an example of usage.

* __Additional Angular modules:__ optional modules with additional functionality. These files should be loaded
after the core `angular.js` file:
* __`angular-animate.js`__ - Enable animation support
* __`angular-cookies.js`__ - A convenient wrapper for reading and writing browser cookies
* __`angular-resource.js`__ - Interaction support with RESTful services via the $resource service
* __`angular-route.js`__ - Routing and deeplinking services and directives for angular apps
* __`angular-sanitize.js`__ - Functionality to sanitize HTML
* __`angular-touch.js`__ - Touch events and other helpers for touch-enabled devices


* __`docs`__ — this directory contains all the files that compose the
<http://docs.angularjs.org/> documentation app. These files are handy to see the older version of
our docs, or even more importantly, view the docs offline.

* __`i18n`__ - this directory contains locale specific `ngLocale` angular modules to override the defaults
defined in the `ng` module.
This option is for those who want to work with Angular offline, or those who want to host the
Angular files on their own servers.

If you navigate to https://code.angularjs.org/, you'll see a directory listing with all of the
Angular versions since we started releasing versioned build artifacts. Each directory contains all
artifacts that we released for a particular version. Download the version you want and have fun.

<div class="alert alert-warning">
You can ignore directories starting with `2.` (e.g. `2.0.0-beta.17`) — they are not related to
AngularJS. They contain build artifacts from [Angular 2](https://angular.io) versions.
</div>

<br />
Each directory under https://code.angularjs.org/ includes a set of files that comprise the
corresponding version. All JavaScript files (except for `angular-mocks` which is only used during
development) come in two flavors — one suitable for development, the other for production:

* __`<filename>.js`__ — These files are non-obfuscated, non-minified, and human-readable by opening
them in any editor or browser. In order to get better error messages during development, you
should always use these non-minified scripts.

* __`<filename>.min.js`__ — These are minified and obfuscated versions, created with the
[Closure compiler](https://developers.google.com/closure/compiler/). Use these versions for
production in order to minimize the size of the application that is downloaded by your user's
browser.

* __`<filename>.min.js.map`__ — These are
[sourcemap files](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/). You can
serve them alongside the `.min.js` files in order to be able to debug the minified code (e.g. on a
production deployment) more easily, but without impacting performance.

<br />
The set of files included in each version directory are:

* __`angular.zip`__ — This is a zip archive that contains all of the files released for this Angular
version. Use this file to get everything in a single download.

* __`angular.js`__ — The core Angular framework. This is all you need to get your Angular app
running.

* __`angular-csp.css`__ — You only need this file if you are using
[CSP (Content Security Policy)](https://developer.mozilla.org/en/Security/CSP). See
{@link directive:ngCsp here} for more info.

* __`angular-mocks.js`__ — This file contains an implementation of mocks that makes testing angular
apps even easier. Your unit/integration test harness should load this file after `angular.js` is
loaded.

* __`angular-loader.js`__ — Module loader for Angular modules. If you are loading multiple
Copy link
Contributor

@Narretz Narretz Jun 9, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, you need to load the loader and then angular.js before any other module files, as many of them rely on angular.* helpers.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left it as it was previously (probably outdated as the rest of the content 😃).

TBH, I've never used the loader. So, does it mean you need to load the loader (synchronously), then angular.js (synchronously), then other modules (asynchronously and in any order) ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I think so. See #9140 (comment)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see. I'll add a note, but angular-seed needs fixing too.
(Although I think its index-async is already broken for soe reason. It's been sitting on my todo list for a while to take a deeper look - I guess it's time 😃)

script files containing Angular modules, you can load them asynchronously and in any order as long
as you load this file first. Often the contents of this file are copy&pasted into the `index.html`
to avoid even the initial request to `angular-loader[.min].js`.
See [angular-seed](https://github.com/angular/angular-seed/blob/master/app/index-async.html) for
an example of usage.

* __Additional Angular modules:__ Optional modules with additional functionality. These files
should be loaded after the core `angular[.min].js` file:
* __`angular-animate.js`__ — Enable animation support. ({@link module:ngAnimate API docs})
* __`angular-aria.js`__ — Make your apps [accessible](http://www.w3.org/TR/wai-aria/) to users of
assistive technologies. ({@link module:ngAria API docs})
* __`angular-cookies.js`__ — A convenient wrapper for reading and writing browser cookies.
({@link module:ngCookies API docs})
<!-- * __`angular-message-format.js`__ — ({@link module:ngMessageFormat API docs}) -->
* __`angular-messages.js`__ — Enhanced support for displaying validation messages.
({@link module:ngMessages API docs})
* __`angular-parse-ext.js`__ — Allow Unicode characters in identifiers inside Angular expressions.
({@link module:ngParseExt API docs})
* __`angular-resource.js`__ — Easy interaction with RESTful services.
({@link module:ngResource API docs})
* __`angular-route.js`__ — Routing and deep-linking services and directives for Angular apps.
({@link module:ngRoute API docs})
* __`angular-sanitize.js`__ — Functionality to sanitize HTML. ({@link module:ngSanitize API docs})
* __`angular-touch.js`__ — Touch events and other helpers for touch-enabled devices.
({@link module:ngTouch API docs})


* __`docs/`__ — This directory contains all the files that compose the https://docs.angularjs.org/
documentation app. These files are handy to see the older versions of our docs, or even more
importantly, view the docs offline.

* __`i18n/`__ - This directory contains [locale specific](https://docs.angularjs.org/guide/i18n)
`ngLocale` Angular modules to override the defaults defined in the main `ng` module.