docs(CHANGELOG.md): add changes for 1.6.7

refactor($rootScope): simplify $emit stopPropagation handling
See https://github.com/angular/angular.js/pull/16293#discussion_r147960028 Closes #16339
2017-11-24 18:44:04 +01:00 · 2017-11-24 09:27:31 +01:00 · 2017-11-23 18:44:54 +01:00 · 2017-11-23 18:44:46 +01:00 · 2017-11-22 13:25:58 +01:00 · 2017-11-17 12:39:59 +01:00
749 changed files with 28414 additions and 26624 deletions
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "docs-angularjs-org-9p2"
+  }
+}
@@ -1,27 +1,37 @@
-***Note*: for support questions, please use one of these channels: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports.**
+<!--
+IF YOU DON'T FILL OUT THE FOLLOWING INFORMATION WE MIGHT CLOSE YOUR ISSUE WITHOUT INVESTIGATION
+-->

-**Do you want to request a *feature* or report a *bug*?**
+<!--
+- For *SUPPORT QUESTIONS*, use one of the
+[support channels](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#question).
+- Before submitting, please **SEARCH GITHUB** for a similar issue or PR. -->

+**I'm submitting a ...**
+<!-- (check one with "x") -->
+- [ ] bug report
+- [ ] feature request
+- [ ] other <!--(Please do not submit support requests here - see above)-->

+**Current behavior:**
+<!-- Describe how the bug manifests / how the current features are insufficient. -->

-**What is the current behavior?**
+**Expected / new behavior:**
+<!-- Describe what the behavior would be without the bug / how the feature would improve AngularJS -->

+**Minimal reproduction of the problem with instructions:**
+<!--
+If the current behavior is a bug or you can illustrate your feature request better with an example,
+please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
+https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:yBpEi4).
+-->

+**AngularJS version:** 1.x.y
+<!-- Check whether this is still an issue in the most recent stable or in the snapshot AngularJS
+version (https://code.angularjs.org/snapshot/) -->

-**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (template: http://plnkr.co/edit/tpl:yBpEi4).**
+**Browser:** [all | Chrome XX | Firefox XX | Edge XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
+<!-- All browsers where this could be reproduced (and Operating System if relevant) -->

-
-
-**What is the expected behavior?**
-
-
-
-**What is the motivation / use case for changing the behavior?**
-
-
-
-**Which versions of Angular, and which browser / OS are affected by this issue? Did this work in previous versions of Angular? Please also test with the latest stable and snapshot (https://code.angularjs.org/snapshot/) versions.**
-
-
-
-**Other information (e.g. stacktraces, related issues, suggestions how to fix)**
+**Anything else:**
+<!-- e.g. stacktraces, related issues, suggestions how to fix -->
@@ -1,3 +1,4 @@
+<!-- General PR submission guidelines https://github.com/angular/angular.js/CONTRIBUTING.md#submit-pr -->
 **What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)**


@@ -15,9 +16,9 @@


 **Please check if the PR fulfills these requirements**
- [ ] The commit message follows our guidelines: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit-message-format
- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
+- [ ] The commit message follows our [guidelines](../DEVELOPERS.md#commits)
+- [ ] Fix/Feature: [Docs](../DEVELOPERS.md#documentation) have been added/updated
+- [ ] Fix/Feature: Tests have been added; existing tests pass

 **Other information**:

@@ -9,7 +9,7 @@ performance/temp*.html
 *~
 *.swp
 angular.js.tmproj
-/node_modules/
+node_modules/
 bower_components/
 angular.xcodeproj
 .idea
@@ -0,0 +1,29 @@
+Andres Ornelas <aornelas@google.com>
+Caitlin Potter <caitpotter88@gmail.com>
+Caitlin Potter <caitpotter88@gmail.com> <snowball@defpixel.com>
+Di Peng <pengdi@google.com>
+Di Peng <pengdi@google.com> <pengdi@go.wustl.edu>
+Georgios Kalpakas <kalpakas.g@gmail.com>
+Georgios Kalpakas <kalpakas.g@gmail.com> <g.kalpakas@hotmail.com>
+Julie Ralph <ju.ralph@gmail.com>
+Lucas Galfaso <lgalfaso@gmail.com>
+Martin Staffa <mjstaffa@gmail.com>
+Martin Staffa <mjstaffa@gmail.com> <mjstaffa@googlemail.com>
+Matias Niemelä <matias@yearofmoo.com>
+Michał Gołębiowski-Owczarek <m.goleb@gmail.com>
+Misko Hevery <misko@hevery.com>
+Misko Hevery <misko@hevery.com> <misko@google.com>
+Igor Minar <igor@angularjs.org>
+Igor Minar <igor@angularjs.org> <iiminar@gmail.com>
+Igor Minar <igor@angularjs.org> <iminar@google.com>
+Igor Minar <igor@angularjs.org> <iminar@dhcp-172-19-37-154.mtv.corp.google.com>
+Pawel Kozlowski <pkozlowski.opensource@gmail.com>
+Peter Bacon Darwin <pete@bacondarwin.com>
+Rodric Haddad <rody@rodyhaddad.com>
+Shahar Talmi <shahar.talmi@gmail.com>
+Shahar Talmi <shahar.talmi@gmail.com> <shahart@wix.com>
+Shyam Seshadri <shyamseshadri@google.com>
+Shyam Seshadri <shyamseshadri@google.com> <shyamseshadri@gmail.com>
+Vojta Jina <vojta.jina@gmail.com>
+Vojta Jina <vojta.jina@gmail.com> <vojta@gemin-i.org>
+Vojta Jina <vojta.jina@gmail.com> <vojta@google.com>
@@ -4,58 +4,102 @@ node_js:
  - '6'

 cache:
+  yarn: true
  directories:
-    - node_modules
    - bower_components
-    - docs/bower_components

 branches:
  except:
-    - /^g3_.*$/
+    - "/^g3_.*$/"

 env:
  matrix:
    - JOB=ci-checks
-    - JOB=unit BROWSER_PROVIDER=saucelabs
-    - JOB=docs-e2e BROWSER_PROVIDER=saucelabs
+    - JOB=unit-core BROWSER_PROVIDER=saucelabs
+    - JOB=unit-jquery BROWSER_PROVIDER=saucelabs
+    - JOB=docs-app BROWSER_PROVIDER=saucelabs
    - JOB=e2e TEST_TARGET=jqlite BROWSER_PROVIDER=saucelabs
    - JOB=e2e TEST_TARGET=jquery BROWSER_PROVIDER=saucelabs
  global:
-    - CXX=g++-4.8  # node 4 likes the G++ v4.8 compiler
    - SAUCE_USERNAME=angular-ci
    - SAUCE_ACCESS_KEY=9b988f434ff8-fbca-8aa4-4ae3-35442987
    - LOGS_DIR=/tmp/angular-build/logs
    - BROWSER_PROVIDER_READY_FILE=/tmp/browsersprovider-tunnel-ready
-
-# node 4 likes the G++ v4.8 compiler
-# see https://docs.travis-ci.com/user/languages/javascript-with-nodejs#Node.js-v4-(or-io.js-v3)-compiler-requirements
-addons:
-  apt:
-    sources:
-      - ubuntu-toolchain-r-test
-    packages:
-      - g++-4.8
+    - secure: oTBjhnOKhs0qDSKTf7fE4f6DYiNDPycvB7qfSF5QRIbJK/LK/J4UtFwetXuXj79HhUZG9qnoT+5e7lPaiaMlpsIKn9ann7ffqFWN1E8TMtpJF+AGigx3djYElwfgf5nEnFUFhwjFzvbfpZNnxVGgX5YbIZpe/WUbHkP4ffU0Wks=

 before_install:
-  - curl -o- -L https://raw.githubusercontent.com/yarnpkg/yarn/2a0afc73210c7a82082585283e518eeb88ca19ae/scripts/install-latest.sh | bash -s -- --version 0.17.9
-  - export PATH=$HOME/.yarn/bin:$PATH
+  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 0.27.5
+  - export PATH="$HOME/.yarn/bin:$PATH"

 before_script:
-  - du -sh ./node_modules ./bower_components/ ./docs/bower_components/ || true
-  - ./scripts/travis/before_build.sh
+  - du -sh ./node_modules ./bower_components/ || true
+  - "./scripts/travis/before_build.sh"

 script:
-  - ./scripts/travis/build.sh
+  - "./scripts/travis/build.sh"

 after_script:
-  - ./scripts/travis/tear_down_browser_provider.sh
-  - ./scripts/travis/print_logs.sh
+  - "./scripts/travis/tear_down_browser_provider.sh"
+  - "./scripts/travis/print_logs.sh"

 notifications:
  webhooks:
    urls:
      - https://webhooks.gitter.im/e/d2120f3f2bb39a4531b2
      - http://104.197.9.155:8484/hubot/travis/activity #hubot-server
-    on_success: always  # options: [always|never|change] default: always
-    on_failure: always  # options: [always|never|change] default: always
-    on_start: always    # default: false
+    on_success: always # options: [always|never|change] default: always
+    on_failure: always # options: [always|never|change] default: always
+    on_start: always # default: false
+
+jobs:
+  include:
+    - stage: deploy
+      # Don't deploy from PRs and only from our default branches.
+      # This is a Travis-specific boolean language: https://docs.travis-ci.com/user/conditional-builds-stages-jobs#Specifying-conditions
+      # The deployment logic for pushed branches is further defined in scripts\travis\build.sh
+      if: type != pull_request and branch =~ ^(v1\.\d+\.x|master)$
+      env:
+        - JOB=deploy
+      before_script: skip
+      script:
+        # Export the variables into the current process
+        - . ./scripts/travis/build.sh
+        - "echo DEPLOY_DOCS: $DEPLOY_DOCS, DEPLOY_CODE: $DEPLOY_CODE"
+      after_script: skip
+      # Work around the 10min Travis timeout so the code.angularjs firebase+gcs code deploy can complete
+      # Only run the keep_alive once (before_deploy is run for each provider)
+      before_deploy: |
+        if ! [ "$BEFORE_DEPLOY_RUN" ]; then
+          export BEFORE_DEPLOY_RUN=1;
+
+          function keep_alive() {
+            while true; do
+              echo -en "\a"
+              sleep 10
+            done
+          }
+          keep_alive &
+        fi
+      deploy:
+        - provider: firebase
+          # the upload folder for firebase is configured in /firebase.json
+          skip_cleanup: true
+          token:
+            secure: $FIREBASE_TOKEN
+          on:
+            repo: angular/angular.js
+            all_branches: true
+            condition: "$DEPLOY_DOCS == true"
+        - provider: gcs
+          skip_cleanup: true
+          access_key_id: GOOGLDB7W2J3LFHICF3R
+          secret_access_key:
+            secure: tHIFdSq55qkyZf9zT/3+VkhUrTvOTMuswxXU3KyWaBrSieZqG0UnUDyNm+n3lSfX95zEl/+rJAWbfvhVSxZi13ndOtvRF+MdI1cvow2JynP0aDSiPffEvVrZOmihD6mt2SlMfhskr5FTduQ69kZG6DfLcve1PPDaIwnbOv3phb8=
+          bucket: code-angularjs-org-338b8.appspot.com
+          local-dir: uploadCode
+          detect_encoding: true # detects gzip compression
+          on:
+            repo: angular/angular.js
+            all_branches: true
+            condition: "$DEPLOY_CODE == true"
+
@@ -3,85 +3,101 @@
 We'd love for you to contribute to our source code and to make AngularJS even better than it is
 today! Here are the guidelines we'd like you to follow:

- - [Code of Conduct](#coc)
- - [Question or Problem?](#question)
- - [Issues and Bugs](#issue)
- - [Feature Requests](#feature)
- - [Submission Guidelines](#submit)
- - [Coding Rules](#rules)
- - [Commit Message Guidelines](#commit)
- - [Signing the CLA](#cla)
- - [Further Info](#info)
+* [Code of Conduct](#coc)
+* [Questions and Problems](#question)
+* [Issues and Bugs](#issue)
+* [Feature Requests](#feature)
+* [Improving Documentation](#docs)
+* [Issue Submission Guidelines](#submit)
+* [Pull Request Submission Guidelines](#submit-pr)
+* [Signing the CLA](#cla)

 ## <a name="coc"></a> Code of Conduct

-Help us keep Angular open and inclusive. Please read and follow our [Code of Conduct][coc].
+Help us keep AngularJS open and inclusive. Please read and follow our [Code of Conduct][coc].

-## <a name="question"></a> Got a Question or Problem?
+## <a name="requests"></a> Questions, Bugs, Features

-If you have questions about how to use AngularJS, please direct these to the [Google Group][groups]
-discussion list or [StackOverflow][stackoverflow]. We are also available on [IRC][irc] and
-[Gitter][gitter].
+### <a name="question"></a> Got a Question or Problem?

-## <a name="issue"></a> Found an Issue?
+Do not open issues for general support questions as we want to keep GitHub issues for bug reports
+and feature requests. You've got much better chances of getting your question answered on dedicated
+support platforms, the best being [Stack Overflow][stackoverflow].

-If you find a bug in the source code or a mistake in the documentation, you can help us by
-submitting an issue to our [GitHub Repository][github]. Even better you can submit a Pull Request
-with a fix.
+Stack Overflow is a much better place to ask questions since:

-**Localization Issues:** Angular.js uses the [Google Closure I18N library] to generate
-its own I18N files (the ngLocale module). This means that any changes to these files would be lost
-the next time that we import the library.
+- there are thousands of people willing to help on Stack Overflow
+- questions and answers stay available for public viewing so your question / answer might help
+  someone else
+- Stack Overflow's voting system assures that the best answers are prominently visible.
+
+To save your and our time, we will systematically close all issues that are requests for general
+support and redirect people to the section you are reading right now.
+
+Other channels for support are:
+- the [Google Group][groups] discussion list
+- the [AngularJS IRC][irc]
+- the [AngularJS Gitter][gitter]
+
+### <a name="issue"></a> Found an Issue or Bug?
+
+If you find a bug in the source code, you can help us by submitting an issue to our
+[GitHub Repository][github]. Even better, you can submit a Pull Request with a fix.
+
+**Please see the [Submission Guidelines](#submit) below.**
+
+**Special Note for Localization Issues:** AngularJS uses the [Google Closure I18N library] to
+generate its own I18N files (the ngLocale module). This means that any changes to these files
+would be lost the next time that we import the library.
 Since the Closure library i18n data is itself auto-generated from the data of the
 [Common Locale Data Repository (CLDR)] project, errors in the data should
 be reported there. See also the [Closure guide to i18n changes].

-**Please see the [Submission Guidelines](#submit) below.**
+### <a name="feature"></a> Missing a Feature?

-## <a name="feature"></a> Want a Feature?
+You can request a new feature by submitting an issue to our [GitHub Repository][github-issues].

-You can request a new feature by submitting an issue to our [GitHub Repository][github].  If you
-would like to implement a new feature then consider what kind of change it is:
+If you would like to implement a new feature then consider what kind of change it is:

-* **Major Changes** that you wish to contribute to the project should be discussed first on our
-  [dev mailing list][angular-dev] or [IRC][irc] so that we can better coordinate our efforts,
-  prevent duplication of work, and help you to craft the change so that it is successfully accepted
-  into the project.
-* **Small Changes** can be crafted and submitted to the [GitHub Repository][github] as a Pull
-  Request.
+* **Major Changes** that you wish to contribute to the project should be discussed first in an
+  [GitHub issue][github-issues] that clearly outlines the changes and benefits of the feature.
+* **Small Changes** can directly be crafted and submitted to the [GitHub Repository][github]
+  as a Pull Request. See the section about [Pull Request Submission Guidelines](#submit-pr), and
+  for detailed information the [core development documentation][developers].

+### <a name="docs"></a> Want a Doc Fix?

-## <a name="docs"></a> Want a Doc Fix?
+Should you have a suggestion for the documentation, you can open an issue and outline the problem
+or improvement you have - however, creating the doc fix yourself is much better!

 If you want to help improve the docs, it's a good idea to let others know what you're working on to
 minimize duplication of effort. Create a new issue (or comment on a related existing one) to let
 others know what you're working on.

+If you're making a small change (typo, phrasing) don't worry about filing an issue first. Use the
+friendly blue "Improve this doc" button at the top right of the doc page to fork the repository
+in-place and make a quick change on the fly. The commit message is preformatted to the right type
+and scope, so you only have to add the description.
+
 For large fixes, please build and test the documentation before submitting the PR to be sure you
 haven't accidentally introduced any layout or formatting issues. You should also make sure that your
-commit message starts with "docs" and follows the **[Commit Message Guidelines](#commit)** outlined
-below.
+commit message follows the **[Commit Message Guidelines][developers.commits]**.

-If you're just making a small change, don't worry about filing an issue first. Use the friendly blue
-"Improve this doc" button at the top right of the doc page to fork the repository in-place and make
-a quick change on the fly. When naming the commit, it is advised to follow the commit message
-guidelines below, by starting the commit message with **docs** and referencing the filename. Since
-this is not obvious and some changes are made on the fly, this is not strictly necessary and we will
-understand if this isn't done the first few times.
-
-## <a name="submit"></a> Submission Guidelines
-
-### Submitting an Issue
+## <a name="submit"></a> Issue Submission Guidelines
 Before you submit your issue search the archive, maybe your question was already answered.

 If your issue appears to be a bug, and hasn't been reported, open a new issue. Help us to maximize
 the effort we can spend fixing issues and adding new features, by not reporting duplicate issues.
-Providing the following information will increase the chances of your issue being dealt with
-quickly:
+
+The "[new issue][github-new-issue]" form contains a number of prompts that you should fill out to
+make it easier to understand and categorize the issue.
+
+In general, providing the following information will increase the chances of your issue being dealt
+with quickly:

 * **Overview of the Issue** - if an error is being thrown a non-minified stack trace helps
 * **Motivation for or Use Case** - explain why this is a bug for you
-* **Angular Version(s)** - is it a regression?
+* **AngularJS Version(s)** - is it a regression?
 * **Browsers and Operating System** - is this a problem with all browsers or only specific ones?
 * **Reproduce the Error** - provide a live example (using [Plunker][plunker] or
  [JSFiddle][jsfiddle]) or an unambiguous set of steps.
@@ -89,41 +105,43 @@ quickly:
 * **Suggest a Fix** - if you can't fix the bug yourself, perhaps you can point to what might be
  causing the problem (line of code or commit)

-Here is a great example of a well defined issue: https://github.com/angular/angular.js/issues/5069
+Here is a great example of a well defined issue: https://github.com/angular/angular.js/issues/5069.

 **If you get help, help others. Good karma rulez!**

-### Submitting a Pull Request
+## <a name="submit-pr"></a> Pull Request Submission Guidelines
 Before you submit your pull request consider the following guidelines:

 * Search [GitHub](https://github.com/angular/angular.js/pulls) for an open or closed Pull Request
  that relates to your submission. You don't want to duplicate effort.
-* Please sign our [Contributor License Agreement (CLA)](#cla) before sending pull
-  requests. We cannot accept code without this.
+* Create the [development environment][developers.setup]
 * Make your changes in a new git branch:

    ```shell
    git checkout -b my-fix-branch master
    ```

-* Create your patch, **including appropriate test cases**.
-* Follow our [Coding Rules](#rules).
-* Run the full Angular test suite, as described in the [developer documentation][dev-doc],
-  and ensure that all tests pass.
+* Create your patch commit, **including appropriate test cases**.
+* Follow our [Coding Rules][developers.rules].
+* If the changes affect public APIs, change or add relevant [documentation][developers.documentation].
+* Run the AngularJS [unit][developers.tests-unit] and [E2E test][developers.tests-e2e] suites, and ensure that all tests
+  pass. It is generally sufficient to run the tests only on Chrome, as our Travis integration will
+  run the tests on all supported browsers.
+* Run `yarn grunt eslint` to check that you have followed the automatically enforced coding rules
 * Commit your changes using a descriptive commit message that follows our
-  [commit message conventions](#commit) and passes our commit message presubmit hook
-  (`validate-commit-msg.js`). Adherence to the [commit message conventions](#commit) is required,
-  because release notes are automatically generated from these messages.
+  [commit message conventions][developers.commits]. Adherence to the
+  [commit message conventions][developers.commits] is required, because release notes are
+  automatically generated from these messages.

    ```shell
    git commit -a
    ```
  Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.

-* Build your changes locally to ensure all the tests pass:
+* Before creating the Pull Request, package and run all tests a last time:

    ```shell
-    grunt test
+    yarn grunt test
    ```

 * Push your branch to GitHub:
@@ -132,24 +150,30 @@ Before you submit your pull request consider the following guidelines:
    git push origin my-fix-branch
    ```

-In GitHub, send a pull request to `angular:master`.
-If we suggest changes, then:
+* In GitHub, send a pull request to `angular.js:master`. This will trigger the check of the
+[Contributor License Agreement](#cla) and the Travis integration.

-* Make the required updates.
-* Re-run the Angular test suite to ensure tests are still passing.
-* Commit your changes to your branch (e.g. `my-fix-branch`).
-* Push the changes to your GitHub repository (this will update your Pull Request).
+* If you find that the Travis integration has failed, look into the logs on Travis to find out
+if your changes caused test failures, the commit message was malformed etc. If you find that the
+tests failed or times out for unrelated reasons, you can ping a team member so that the build can be
+restarted.

-If the PR gets too outdated we may ask you to rebase and force push to update the PR:
+* If we suggest changes, then:

-```shell
-git rebase master -i
-git push origin my-fix-branch -f
-```
+  * Make the required updates.
+  * Re-run the AngularJS test suite to ensure tests are still passing.
+  * Commit your changes to your branch (e.g. `my-fix-branch`).
+  * Push the changes to your GitHub repository (this will update your Pull Request).

-_WARNING: Squashing or reverting commits and force-pushing thereafter may remove GitHub comments
-on code that were previously made by you or others in your commits. Avoid any form of rebasing
-unless necessary._
+    You can also amend the initial commits and force push them to the branch.
+
+    ```shell
+    git rebase master -i
+    git push origin my-fix-branch -f
+    ```
+
+    This is generally easier to follow, but seperate commits are useful if the Pull Request contains
+    iterations that might be interesting to see side-by-side.

 That's it! Thank you for your contribution!

@@ -182,135 +206,41 @@ from the main (upstream) repository:
    git pull --ff upstream master
    ```

-## <a name="rules"></a> Coding Rules
+## <a name="cla"></a> Signing the Contributor License Agreement (CLA)

-To ensure consistency throughout the source code, keep these rules in mind as you are working:
-
-* All features or bug fixes **must be tested** by one or more [specs][unit-testing].
-* All public API methods **must be documented** with ngdoc, an extended version of jsdoc (we added
-  support for markdown and templating via @ngdoc tag). To see how we document our APIs, please check
-  out the existing ngdocs and see [this wiki page][ngDocs].
-* With the exceptions listed below, we follow the rules contained in
-  [Google's JavaScript Style Guide][js-style-guide]:
-    * **Do not use namespaces**: Instead,  wrap the entire angular code base in an anonymous closure and
-      export our API explicitly rather than implicitly.
-    * Wrap all code at **100 characters**.
-    * Instead of complex inheritance hierarchies, we **prefer simple objects**. We use prototypal
-      inheritance only when absolutely necessary.
-    * We **love functions and closures** and, whenever possible, prefer them over objects.
-    * To write concise code that can be better minified, we **use aliases internally** that map to the
-      external API. See our existing code to see what we mean.
-    * We **don't go crazy with type annotations** for private internal APIs unless it's an internal API
-      that is used throughout AngularJS. The best guidance is to do what makes the most sense.
-
-## <a name="commit"></a> Git Commit Guidelines
-
-We have very precise rules over how our git commit messages can be formatted.  This leads to **more
-readable messages** that are easy to follow when looking through the **project history**.  But also,
-we use the git commit messages to **generate the AngularJS change log**.
-
-The commit message formatting can be added using a typical git workflow or through the use of a CLI
-wizard ([Commitizen](https://github.com/commitizen/cz-cli)). To use the wizard, run `yarn run commit`
-in your terminal after staging your changes in git.
-
-### Commit Message Format
-Each commit message consists of a **header**, a **body** and a **footer**.  The header has a special
-format that includes a **type**, a **scope** and a **subject**:
-
-```
-<type>(<scope>): <subject>
-<BLANK LINE>
-<body>
-<BLANK LINE>
-<footer>
-```
-
-The **header** is mandatory and the **scope** of the header is optional.
-
-Any line of the commit message cannot be longer 100 characters! This allows the message to be easier
-to read on GitHub as well as in various git tools.
-
-### Revert
-If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit.
-In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
-
-### Type
-Must be one of the following:
-
-* **feat**: A new feature
-* **fix**: A bug fix
-* **docs**: Documentation only changes
-* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing
-  semi-colons, etc)
-* **refactor**: A code change that neither fixes a bug nor adds a feature
-* **perf**: A code change that improves performance
-* **test**: Adding missing or correcting existing tests
-* **chore**: Changes to the build process or auxiliary tools and libraries such as documentation
-  generation
-
-### Scope
-The scope could be anything specifying place of the commit change. For example `$location`,
-`$browser`, `$compile`, `$rootScope`, `ngHref`, `ngClick`, `ngView`, etc...
-
-You can use `*` when the change affects more than a single scope.
-
-### Subject
-The subject contains succinct description of the change:
-
-* use the imperative, present tense: "change" not "changed" nor "changes"
-* don't capitalize first letter
-* no dot (.) at the end
-
-### Body
-Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
-The body should include the motivation for the change and contrast this with previous behavior.
-
-### Footer
-The footer should contain any information about **Breaking Changes** and is also the place to
-[reference GitHub issues that this commit closes][closing-issues].
-
-**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines.
-The rest of the commit message is then used for this.
-
-A detailed explanation can be found in this [document][commit-message-format].
-
-## <a name="cla"></a> Signing the CLA
-
-Please sign our Contributor License Agreement (CLA) before sending pull requests. For any code
-changes to be accepted, the CLA must be signed. It's a quick process, we promise!
+Upon submmitting a Pull Request, a friendly bot will ask you to sign our CLA if you haven't done
+so before. Unfortunately, this is necessary for documentation changes, too.
+It's a quick process, we promise!

 * For individuals we have a [simple click-through form][individual-cla].
 * For corporations we'll need you to
  [print, sign and one of scan+email, fax or mail the form][corporate-cla].

-## <a name="info"></a> Further Information
-You can find out more detailed information about contributing in the
-[AngularJS documentation][contributing].


-
-[Google Closure I18N library]: https://github.com/google/closure-library/tree/master/closure/goog/i18n
-[angular-dev]: https://groups.google.com/forum/?fromgroups#!forum/angular-dev
-[closing-issues]: https://help.github.com/articles/closing-issues-via-commit-messages/
+[Closure guide to i18n changes]: https://github.com/google/closure-library/wiki/Internationalization-%28i18n%29-changes-in-Closure-Library
 [coc]: https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md
-[commit-message-format]: https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#
-[contribute]: http://docs.angularjs.org/misc/contribute
-[contributing]: http://docs.angularjs.org/misc/contribute
+[Common Locale Data Repository (CLDR)]: http://cldr.unicode.org
 [corporate-cla]: http://code.google.com/legal/corporate-cla-v1.0.html
-[dev-doc]: https://docs.angularjs.org/guide
+[developers]: DEVELOPERS.md
+[developers.commits]: DEVELOPERS.md#commits
+[developers.documentation]: DEVELOPERS.md#documentation
+[developers.rules]: DEVELOPERS.md#rules
+[developers.setup]: DEVELOPERS.md#setup
+[developers.tests-e2e]: DEVELOPERS.md#e2e-tests
+[developers.tests-unit]: DEVELOPERS.md#unit-tests
+[github-issues]: https://github.com/angular/angular.js/issues
+[github-new-issue]: https://github.com/angular/angular.js/issues/new
 [github]: https://github.com/angular/angular.js
 [gitter]: https://gitter.im/angular/angular.js
+[Google Closure I18N library]: https://github.com/google/closure-library/tree/master/closure/goog/i18n
 [groups]: https://groups.google.com/forum/?fromgroups#!forum/angular
 [individual-cla]: http://code.google.com/legal/individual-cla-v1.0.html
 [irc]: http://webchat.freenode.net/?channels=angularjs&uio=d4
-[js-style-guide]: https://google.github.io/styleguide/javascriptguide.xml
 [jsfiddle]: http://jsfiddle.net/
-[list]: https://groups.google.com/forum/?fromgroups#!forum/angular
-[ngDocs]: https://github.com/angular/angular.js/wiki/Writing-AngularJS-Documentation
+[karma-browserstack]: https://github.com/karma-runner/karma-browserstack-launcher
+[karma-saucelabs]: https://github.com/karma-runner/karma-sauce-launcher
 [plunker]: http://plnkr.co/edit
 [stackoverflow]: http://stackoverflow.com/questions/tagged/angularjs
-[unit-testing]: https://docs.angularjs.org/guide/unit-testing
-[Common Locale Data Repository (CLDR)]: http://cldr.unicode.org
-[Closure guide to i18n changes]: https://github.com/google/closure-library/wiki/Internationalization-%28i18n%29-changes-in-Closure-Library

 [![Analytics](https://ga-beacon.appspot.com/UA-8594346-11/angular.js/CONTRIBUTING.md?pixel)](https://github.com/igrigorik/ga-beacon)
@@ -0,0 +1,486 @@
+# Developing AngularJS
+
+* [Development Setup](#setup)
+* [Coding Rules](#rules)
+* [Commit Message Guidelines](#commits)
+* [Writing Documentation](#documentation)
+
+## <a name="setup"> Development Setup
+
+This document describes how to set up your development environment to build and test AngularJS, and
+explains the basic mechanics of using `git`, `node`, `yarn`, `grunt`, and `bower`.
+
+### Installing Dependencies
+
+Before you can build AngularJS, you must install and configure the following dependencies on your
+machine:
+
+* [Git](http://git-scm.com/): The [Github Guide to
+  Installing Git][git-setup] is a good source of information.
+
+* [Node.js v6.x (LTS)](http://nodejs.org): We use Node to generate the documentation, run a
+  development web server, run tests, and generate distributable files. Depending on your system,
+  you can install Node either from source or as a pre-packaged bundle.
+
+  We recommend using [nvm](https://github.com/creationix/nvm) (or
+  [nvm-windows](https://github.com/coreybutler/nvm-windows))
+  to manage and install Node.js, which makes it easy to change the version of Node.js per project.
+
+* [Yarn](https://yarnpkg.com): We use Yarn to install our Node.js module dependencies
+  (rather than using npm). See the detailed [installation instructions][yarn-install].
+
+* [Java](http://www.java.com): We minify JavaScript using
+  [Closure Tools](https://developers.google.com/closure/), which require Java (version 7 or higher)
+  to be installed and included in your
+  [PATH](http://docs.oracle.com/javase/tutorial/essential/environment/paths.html) variable.
+
+* [Grunt](http://gruntjs.com): We use Grunt as our build system. We're using it as a local dependency,
+  but you can also add the grunt command-line tool globally (with `yarn global add grunt-cli`), which allows
+  you to leave out the `yarn` prefix for all our grunt commands.
+
+### Forking AngularJS on Github
+
+To contribute code to AngularJS, you must have a GitHub account so you can push code to your own
+fork of AngularJS and open Pull Requests in the [GitHub Repository][github].
+
+To create a Github account, follow the instructions [here](https://github.com/signup/free).
+Afterwards, go ahead and [fork](http://help.github.com/forking) the
+[main AngularJS repository][github].
+
+
+### Building AngularJS
+
+To build AngularJS, you clone the source code repository and use Grunt to generate the non-minified
+and minified AngularJS files:
+
+```shell
+# Clone your Github repository:
+git clone https://github.com/<github username>/angular.js.git
+
+# Go to the AngularJS directory:
+cd angular.js
+
+# Add the main AngularJS repository as an upstream remote to your repository:
+git remote add upstream "https://github.com/angular/angular.js.git"
+
+# Install node.js dependencies:
+yarn install
+
+# Build AngularJS (which will install `bower` dependencies automatically):
+yarn grunt package
+```
+
+**Note:** If you're using Windows, you must use an elevated command prompt (right click, run as
+Administrator). This is because `yarn grunt package` creates some symbolic links.
+
+The build output is in the `build` directory. It consists of the following files and
+directories:
+
+* `angular-<version>.zip` — The complete zip file, containing all of the release build
+artifacts.
+
+* `angular.js` / `angular.min.js` — The regular and minified core AngularJS script file.
+
+* `angular-*.js` / `angular-*.min.js` — All other AngularJS module script files.
+
+* `docs/` — A directory that contains a standalone version of the docs
+  (same as served in `docs.angularjs.org`).
+
+### <a name="local-server"></a> Running a Local Development Web Server
+
+To debug code, run end-to-end tests, and serve the docs, it is often useful to have a local
+HTTP server. For this purpose, we have made available a local web server based on Node.js.
+
+1. To start the web server, run:
+   ```shell
+   yarn grunt webserver
+   ```
+
+2. To access the local server, enter the following URL into your web browser:
+   ```text
+   http://localhost:8000/
+   ```
+   By default, it serves the contents of the AngularJS project directory.
+
+3. To access the locally served docs, visit this URL:
+   ```text
+   http://localhost:8000/build/docs/
+   ```
+
+### <a name="unit-tests"></a> Running the Unit Test Suite
+
+We write unit and integration tests with Jasmine and execute them with Karma. To run all of the
+tests once on Chrome run:
+
+```shell
+yarn grunt test:unit
+```
+
+To run the tests on other browsers (Chrome, ChromeCanary, Firefox and Safari are pre-configured) use:
+
+```shell
+yarn grunt test:unit --browsers=Chrome,Firefox
+```
+
+**Note:** there should be _no spaces between browsers_. `Chrome, Firefox` is INVALID.
+
+If you have a Saucelabs or Browserstack account, you can also run the unit tests on these services
+via our pre-defined customLaunchers.
+
+For example, to run the whole unit test suite:
+
+```shell
+# Browserstack
+yarn grunt test:unit --browsers=BS_Chrome,BS_Firefox,BS_Safari,BS_IE_9,BS_IE_10,BS_IE_11,BS_EDGE,BS_iOS_8,BS_iOS_9,BS_iOS_10
+# Saucelabs
+yarn grunt test:unit --browsers=BS_Chrome,BS_Firefox,BS_Safari,BS_IE_9,BS_IE_10,BS_IE_11,BS_EDGE,BS_iOS_8,BS_iOS_9,BS_iOS_10
+```
+
+Running these commands requires you to set up [Karma Browserstack][karma-browserstack] or
+[Karma-Saucelabs][karma-saucelabs], respectively.
+
+During development, however, it's more productive to continuously run unit tests every time the
+source or test files change. To execute tests in this mode run:
+
+1. To start the Karma server, capture Chrome browser and run unit tests, run:
+
+   ```shell
+   yarn grunt autotest
+   ```
+
+2. To capture more browsers, open this URL in the desired browser (URL might be different if you
+   have multiple instance of Karma running, read Karma's console output for the correct URL):
+
+   ```text
+   http://localhost:9876/
+   ```
+
+3. To re-run tests just change any source or test file.
+
+
+To learn more about all of the preconfigured Grunt tasks run:
+
+```shell
+yarn grunt --help
+```
+
+
+### <a name="e2e-tests"></a> Running the End-to-end Test Suite
+
+AngularJS's end to end tests are run with Protractor. Simply run:
+
+```shell
+yarn grunt test:e2e
+```
+
+This will start the webserver and run the tests on Chrome.
+
+## <a name="rules"></a> Coding Rules
+
+To ensure consistency throughout the source code, keep these rules in mind as you are working:
+
+* All features or bug fixes **must be tested** by one or more [specs][unit-testing].
+* All public API methods **must be documented** with ngdoc, an extended version of jsdoc (we added
+  support for markdown and templating via @ngdoc tag). To see how we document our APIs, please check
+  out the existing source code and see the section about [writing documentation](#documentation)
+* With the exceptions listed below, we follow the rules contained in
+  [Google's JavaScript Style Guide][js-style-guide]:
+    * **Do not use namespaces**: Instead,  wrap the entire AngularJS code base in an anonymous
+      closure and export our API explicitly rather than implicitly.
+    * Wrap all code at **100 characters**.
+    * Instead of complex inheritance hierarchies, we **prefer simple objects**. We use prototypal
+      inheritance only when absolutely necessary.
+    * We **love functions and closures** and, whenever possible, prefer them over objects.
+    * To write concise code that can be better minified, we **use aliases internally** that map to
+      the external API. See our existing code to see what we mean.
+    * We **don't go crazy with type annotations** for private internal APIs unless it's an internal
+      API that is used throughout AngularJS. The best guidance is to do what makes the most sense.
+
+### Specific topics
+
+#### Provider configuration
+
+When adding configuration (options) to [providers][docs.provider], we follow a special pattern.
+
+- for each option, add a `method` that ...
+  - works as a getter and returns the current value when called without argument
+  - works as a setter and returns itself for chaining when called with argument
+  - for boolean options, uses the naming scheme `<option>Enabled([enabled])`
+- non-primitive options (e.g. objects) should be copied or the properties assigned explicitly to a
+  new object so that the configuration cannot be changed during runtime.
+
+For a boolean config example, see [`$compileProvider#debugInfoEnabled`][code.debugInfoEnabled]
+
+For an object config example, see [`$location.html5Mode`][code.html5Mode]
+
+#### Throwing errors
+
+User-facing errors should be thrown with [`minErr`][code.minErr], a special error function that provides
+errors ids, templated error messages, and adds a link to a detailed error description.
+
+The `$compile:badrestrict` error is a good example for a well-defined `minErr`:
+[code][code.badrestrict] and [description][docs.badrestrict].
+
+
+## <a name="commits"></a> Git Commit Guidelines
+
+We have very precise rules over how our git commit messages can be formatted.  This leads to **more
+readable messages** that are easy to follow when looking through the **project history**.  But also,
+we use the git commit messages to **generate the AngularJS change log**.
+
+The commit message formatting can be added using a typical git workflow or through the use of a CLI
+wizard ([Commitizen](https://github.com/commitizen/cz-cli)). To use the wizard, run `yarn run commit`
+in your terminal after staging your changes in git.
+
+### Commit Message Format
+Each commit message consists of a **header**, a **body** and a **footer**.  The header has a special
+format that includes a **type**, a **scope** and a **subject**:
+
+```
+<type>(<scope>): <subject>
+<BLANK LINE>
+<body>
+<BLANK LINE>
+<footer>
+```
+
+The **header** is mandatory and the **scope** of the header is optional.
+
+Any line of the commit message cannot be longer 100 characters! This allows the message to be easier
+to read on GitHub as well as in various git tools.
+
+### Revert
+If the commit reverts a previous commit, it should begin with `revert: `, followed by the header
+of the reverted commit.
+In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit
+being reverted.
+A commit with this format is automatically created by the [`git revert`][git-revert] command.
+
+### Type
+Must be one of the following:
+
+* **feat**: A new feature
+* **fix**: A bug fix
+* **docs**: Documentation only changes
+* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing
+  semi-colons, etc)
+* **refactor**: A code change that neither fixes a bug nor adds a feature
+* **perf**: A code change that improves performance
+* **test**: Adding missing or correcting existing tests
+* **chore**: Changes to the build process or auxiliary tools and libraries such as documentation
+  generation
+
+### Scope
+The scope could be anything specifying place of the commit change. For example `$location`,
+`$browser`, `$compile`, `$rootScope`, `ngHref`, `ngClick`, `ngView`, etc...
+
+You can use `*` when the change affects more than a single scope.
+
+### Subject
+The subject contains succinct description of the change:
+
+* use the imperative, present tense: "change" not "changed" nor "changes"
+* don't capitalize first letter
+* no dot (.) at the end
+
+### Body
+Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
+The body should include the motivation for the change and contrast this with previous behavior.
+
+### Footer
+The footer should contain any information about **Breaking Changes** and is also the place to
+[reference GitHub issues that this commit closes][closing-issues].
+
+**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines.
+The rest of the commit message is then used for this.
+
+A detailed explanation can be found in this [document][commit-message-format].
+
+## <a name="documentation"></a> Writing Documentation
+
+The AngularJS project uses a form of [jsdoc](http://usejsdoc.org/) called ngdoc for all of its code
+documentation.
+
+This means that all the docs are stored inline in the source code and so are kept in sync as it
+changes.
+
+There is also extra content (the developer guide, error pages, the tutorial,
+and misceallenous pages) that live inside the AngularJS repository as markdown files.
+
+This means that since we generate the documentation from the source code, we can easily provide
+version-specific documentation by simply checking out a version of AngularJS and running the build.
+
+Extracting the source code documentation, processing and building the docs is handled by the
+documentation generation tool [Dgeni][dgeni].
+
+### Building and viewing the docs locally
+The docs can be built from scratch using grunt:
+
+```shell
+yarn grunt docs
+```
+
+This defers the doc-building task to `gulp`.
+
+Note that the docs app is using the local build files to run. This means you might first have to run
+the build:
+
+```shell
+yarn grunt build
+```
+
+(This is also necessary if you are making changes to minErrors).
+
+To view the docs, see [Running a Local Development Web Server](#local-server).
+
+### Writing jsdoc
+The ngdoc utility has basic support for many of the standard jsdoc directives.  But in particular it
+is interested in the following block tags:
+
+* `@name name` - the name of the ngdoc document
+* `@param {type} name description` - describes a parameter of a function
+* `@returns {type} description` - describes what a function returns
+* `@requires` - normally indicates that a JavaScript module is required; in an Angular service it is
+  used to describe what other services this service relies on
+* `@property` - describes a property of an object
+* `@description` - used to provide a description of a component in markdown
+* `@link` - specifies a link to a URL or a type in the API reference.
+  Links to the API have the following structure:
+
+  * the module namespace, followed by `.` (optional, default `ng`)
+  * the `@ngdoc` type (see below), followed by `:` (optional, automatically inferred)
+  * the name
+  * the method, property, or anchor (optional)
+  * the display name
+
+  For example: `{@link ng.type:$rootScope.Scope#$new Scope.$new()}`.
+
+* `@example` - specifies an example. This can be a simple code block, or a
+  [runnable example](#the-example-tag).
+* `@deprecated` - specifies that the following code is deprecated and should not be used.
+  In The AngularJS docs, there are two specific patterns which can be used to further describe
+  the deprecation: `sinceVersion="<version>"` and `removeVersion="<version>"`
+
+The `type` in `@param` and `@returns` must be wrapped in `{}` curly braces, e.g. `{Object|Array}`.
+Parameters can be made optional by *either* appending a `=` to the type, e.g. `{Object=}`, *or* by
+putting the `[name]` in square brackets.
+Default values are only possible with the second syntax by appending `=<value>` to the parameter
+name, e.g. `@param {boolean} [ownPropsOnly=false]`.
+
+Descriptions can contain markdown formatting.
+
+#### AngularJS-specific jsdoc directives
+
+In addition to the standard jsdoc tags, there are a number that are specific to the Angular
+code-base:
+
+* `@ngdoc` - specifies the type of thing being documented. See below for more detail.
+* `@eventType emit|broadcast` - specifies whether the event is emitted or broadcast
+* `@usage` - shows how to use a `function` or `directive`. Is usually automatically generated.
+* `@knownIssue` - adds info about known quirks, problems, or limitations with the API, and possibly,
+  workarounds. This section is not for bugs.
+
+The following are specific to directives:
+
+* `@animations` - specifies the animations a directive supports
+* `@multiElement` - specifies if a directive can span over multiple elements
+* `@priority` - specifies a directive's priority
+* `@restrict` - is extracted to show the usage of a directive. For example, for [E]lement,
+  [A]ttribute, and [C]lass, use `@restrict ECA`
+* `@scope` - specifies that a directive will create a new scope
+
+### The `@ngdoc` Directive
+This directive helps to specify the template used to render the item being documented.  For instance,
+a directive would have different properties to a filter and so would be documented differently.  The
+commonly used types are:
+
+* `overview` - a general page (guide, api index)
+* `provider` - AngularJS provider, such as `$compileProvider` or `$httpProvider`.
+* `service` - injectable AngularJS service, such as `$compile` or `$http`.
+* `object` - well defined object (often exposed as a service)
+* `function` - function that will be available to other methods (such as a helper function within
+  the ng module)
+* `method` - method on an object/service/controller
+* `property` - property on an object/service/controller
+* `event` -  AngularJS event that will propagate through the `$scope` tree.
+* `directive` - AngularJS  directive
+* `filter` - AngularJS filter
+* `error` - minErr error description
+
+### General documentation with Markdown
+
+Any text in tags can contain markdown syntax for formatting. Generally, you can use any markdown
+feature.
+
+#### Headings
+
+Only use *h2* headings and lower, as the page title is set in *h1*. Also make sure you follow the
+heading hierarchy. This ensures correct table of contents are created.
+
+#### Code blocks
+In line code can be specified by enclosing the code in back-ticks (\`).
+A block of multi-line code can be enclosed in triple back-ticks (\`\`\`) but it is formatted better
+if it is enclosed in &lt;pre&gt;...&lt;/pre&gt; tags and the code lines themselves are indented.
+
+### Writing runnable (live) examples and e2e tests
+It is possible to embed examples in the documentation along with appropriate e2e tests. These
+examples and scenarios will be converted to runnable code within the documentation.  So it is
+important that they work correctly.  To ensure this, all these e2e scenarios are run as part of the
+automated Travis tests.
+
+If you are adding an example with an e2e test, you should [run the test locally](#e2e-tests) first
+to ensure it passes. You can change `it(...)` to `fit(...)` to run only your test,
+but make sure you change it back to `it(...)` before committing.
+
+#### The `<example>` tag
+This tag identifies a block of HTML that will define a runnable example. It can take the following
+attributes:
+
+* `animations` - if set to `true` then this example uses ngAnimate.
+* `deps` - Semicolon-separated list of additional angular module files to be loaded,
+  e.g. `angular-animate.js`
+* `name` - every example should have a name. It should start with the component, e.g directive name,
+  and not contain whitespace
+* `module` - the name of the app module as defined in the example's JavaScript
+
+Within this tag we provide `<file>` tags that specify what files contain the example code.
+
+```
+<example
+  module="angularAppModule"
+  name="exampleName"
+  deps="angular-animate.js;angular-route.js"
+  animations="true">
+  ...
+  <file name="index.html">...</file>
+  <file name="script.js">...</file>
+  <file name="animations.css">...</file>
+  <file name="protractor.js">...</file>
+  ...
+</example>
+```
+
+You can see an example of a well-defined example [in the `ngRepeat` documentation][code.ngRepeat-example].
+
+[closing-issues]: https://help.github.com/articles/closing-issues-via-commit-messages/
+[Closure guide to i18n changes]: https://github.com/google/closure-library/wiki/Internationalization-%28i18n%29-changes-in-Closure-Library
+[code.badrestrict]: https://github.com/angular/angular.js/blob/202f1809ad14827a6ac6a125157c605d65e0b551/src/ng/compile.js#L1107-L1110
+[code.debugInfoEnabled]: https://github.com/angular/angular.js/blob/32fbb2e78f53d765fbb170f7cf99e42e072d363b/src/ng/compile.js#L1378-L1413
+[code.html5Mode]: https://github.com/angular/angular.js/blob/202f1809ad14827a6ac6a125157c605d65e0b551/src/ng/location.js#L752-L797
+[code.minErr]: https://github.com/angular/angular.js/blob/202f1809ad14827a6ac6a125157c605d65e0b551/src/minErr.js#L53-L113
+[code.ngRepeat-example]: https://github.com/angular/angular.js/blob/0822d34b10ea0371c260c80a1486a4d508ea5a91/src/ng/directive/ngRepeat.js#L249-L340
+[commit-message-format]: https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#
+[Common Locale Data Repository (CLDR)]: http://cldr.unicode.org
+[corporate-cla]: http://code.google.com/legal/corporate-cla-v1.0.html
+[dgeni]: https://github.com/angular/dgeni
+[docs.badrestrict]: docs/content/error/$compile/badrestrict.ngdoc
+[docs.provider]: https://code.angularjs.org/snapshot/docs/api/auto/service/$provide#provider
+[git-revert]: https://git-scm.com/docs/git-revert
+[git-setup]: https://help.github.com/articles/set-up-git
+[github-issues]: https://github.com/angular/angular.js/issues
+[github]: https://github.com/angular/angular.js
+[js-style-guide]: https://google.github.io/styleguide/javascriptguide.xml
+[karma-browserstack]: https://github.com/karma-runner/karma-browserstack-launcher
+[karma-saucelabs]: https://github.com/karma-runner/karma-sauce-launcher
+[unit-testing]: https://docs.angularjs.org/guide/unit-testing
+[yarn-install]: https://yarnpkg.com/en/docs/install
@@ -49,7 +49,6 @@ if (!process.env.TRAVIS && !process.env.JENKINS_HOME) {
  }
 }

-
 module.exports = function(grunt) {

  // this loads all the node_modules that start with `grunt-` as plugins
@@ -64,6 +63,12 @@ module.exports = function(grunt) {
  NG_VERSION.cdn = versionInfo.cdnVersion;
  var dist = 'angular-' + NG_VERSION.full;

+  var deployVersion = NG_VERSION.full;
+
+  if (NG_VERSION.isSnapshot) {
+    deployVersion = NG_VERSION.distTag === 'latest' ? 'snapshot-stable' : 'snapshot';
+  }
+
  if (versionInfo.cdnVersion == null) {
    throw new Error('Unable to read CDN version, are you offline or has the CDN not been properly pushed?\n' +
                    'Perhaps you want to set the NG1_BUILD_NO_REMOTE_VERSION_REQUESTS environment variable?');
@@ -311,7 +316,29 @@ module.exports = function(grunt) {
    copy: {
      i18n: {
        files: [
-          { src: 'src/ngLocale/**', dest: 'build/i18n/', expand: true, flatten: true }
+          {
+            src: 'src/ngLocale/**',
+            dest: 'build/i18n/',
+            expand: true,
+            flatten: true
+          }
+        ]
+      },
+      deployFirebaseDocs: {
+        files: [
+          // The source files are needed by the embedded examples in the docs app.
+          {
+            src: 'build/angular*.{js.map,min.js}',
+            dest: 'uploadDocs/',
+            expand: true,
+            flatten: true
+          },
+          {
+            cwd: 'build/docs',
+            src: '**',
+            dest: 'uploadDocs/',
+            expand: true
+          }
        ]
      }
    },
@@ -325,6 +352,15 @@ module.exports = function(grunt) {
        expand: true,
        dot: true,
        dest: dist + '/'
+      },
+      deployFirebaseCode: {
+        options: {
+          mode: 'gzip'
+        },
+        src: ['**'],
+        cwd: 'build',
+        expand: true,
+        dest: 'uploadCode/' + deployVersion + '/'
      }
    },

@@ -359,24 +395,78 @@ module.exports = function(grunt) {
  });

  //alias tasks
-  grunt.registerTask('test', 'Run unit, docs and e2e tests with Karma', ['eslint', 'package', 'test:unit', 'test:promises-aplus', 'tests:docs', 'test:protractor']);
+  grunt.registerTask('test', 'Run unit, docs and e2e tests with Karma', [
+    'eslint',
+    'package',
+    'test:unit',
+    'test:promises-aplus',
+    'tests:docs',
+    'test:protractor'
+  ]);
  grunt.registerTask('test:jqlite', 'Run the unit tests with Karma' , ['tests:jqlite']);
  grunt.registerTask('test:jquery', 'Run the jQuery (latest) unit tests with Karma', ['tests:jquery']);
  grunt.registerTask('test:jquery-2.2', 'Run the jQuery 2.2 unit tests with Karma', ['tests:jquery-2.2']);
  grunt.registerTask('test:jquery-2.1', 'Run the jQuery 2.1 unit tests with Karma', ['tests:jquery-2.1']);
-  grunt.registerTask('test:modules', 'Run the Karma module tests with Karma', ['build', 'tests:modules']);
+  grunt.registerTask('test:modules', 'Run the Karma module tests with Karma', [
+    'build',
+    'tests:modules'
+  ]);
  grunt.registerTask('test:docs', 'Run the doc-page tests with Karma', ['package', 'tests:docs']);
-  grunt.registerTask('test:unit', 'Run unit, jQuery and Karma module tests with Karma', ['test:jqlite', 'test:jquery', 'test:jquery-2.2', 'test:jquery-2.1', 'test:modules']);
-  grunt.registerTask('test:protractor', 'Run the end to end tests with Protractor and keep a test server running in the background', ['webdriver', 'connect:testserver', 'protractor:normal']);
-  grunt.registerTask('test:travis-protractor', 'Run the end to end tests with Protractor for Travis CI builds', ['connect:testserver', 'protractor:travis']);
-  grunt.registerTask('test:ci-protractor', 'Run the end to end tests with Protractor for Jenkins CI builds', ['webdriver', 'connect:testserver', 'protractor:jenkins']);
+  grunt.registerTask('test:unit', 'Run unit, jQuery and Karma module tests with Karma', [
+    'test:jqlite',
+    'test:jquery',
+    'test:jquery-2.2',
+    'test:jquery-2.1',
+    'test:modules'
+  ]);
+  grunt.registerTask('test:protractor', 'Run the end to end tests with Protractor and keep a test server running in the background', [
+    'webdriver',
+    'connect:testserver',
+    'protractor:normal'
+  ]);
+  grunt.registerTask('test:travis-protractor', 'Run the end to end tests with Protractor for Travis CI builds', [
+    'connect:testserver',
+    'protractor:travis'
+  ]);
+  grunt.registerTask('test:ci-protractor', 'Run the end to end tests with Protractor for Jenkins CI builds', [
+    'webdriver',
+    'connect:testserver',
+    'protractor:jenkins'
+  ]);
  grunt.registerTask('test:e2e', 'Alias for test:protractor', ['test:protractor']);
-  grunt.registerTask('test:promises-aplus',['build:promises-aplus-adapter', 'shell:promises-aplus-tests']);
-
-  grunt.registerTask('minify', ['bower', 'clean', 'build', 'minall']);
+  grunt.registerTask('test:promises-aplus',[
+    'build:promises-aplus-adapter',
+    'shell:promises-aplus-tests'
+  ]);
+  grunt.registerTask('minify', [
+    'bower',
+    'clean',
+    'build',
+    'minall'
+  ]);
  grunt.registerTask('webserver', ['connect:devserver']);
-  grunt.registerTask('package', ['bower', 'validate-angular-files', 'clean', 'buildall', 'minall', 'collect-errors', 'write', 'docs', 'copy', 'compress']);
-  grunt.registerTask('ci-checks', ['ddescribe-iit', 'merge-conflict', 'eslint']);
+  grunt.registerTask('package', [
+    'bower',
+    'validate-angular-files',
+    'clean',
+    'buildall',
+    'minall',
+    'collect-errors',
+    'write',
+    'docs',
+    'copy:i18n',
+    'compress:build'
+  ]);
+  grunt.registerTask('ci-checks', [
+    'ddescribe-iit',
+    'merge-conflict',
+    'eslint'
+  ]);
+  grunt.registerTask('prepareFirebaseDeploy', [
+    'package',
+    'compress:deployFirebaseCode',
+    'copy:deployFirebaseDocs'
+  ]);
  grunt.registerTask('default', ['package']);
 };

@@ -1,6 +1,6 @@
 The MIT License

-Copyright (c) 2010-2016 Google, Inc. http://angularjs.org
+Copyright (c) 2010-2017 Google, Inc. http://angularjs.org

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -8,43 +8,35 @@ synchronizes data from your UI (view) with your JavaScript objects (model) throu
 binding. To help you structure your application better and make it easy to test, AngularJS teaches
 the browser how to do dependency injection and inversion of control.

-It also helps with server-side communication, taming async callbacks with promises and deferreds,
-and it makes client-side navigation and deeplinking with hashbang urls or HTML5 pushState a
+It also helps with server-side communication, taming async callbacks with promises and deferred objects,
+and it makes client-side navigation and deep linking with hashbang urls or HTML5 pushState a
 piece of cake. Best of all? It makes development fun!

 * Web site: https://angularjs.org
 * Tutorial: https://docs.angularjs.org/tutorial
 * API Docs: https://docs.angularjs.org/api
 * Developer Guide: https://docs.angularjs.org/guide
-* Contribution guidelines: [CONTRIBUTING.md](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md)
+* Contribution guidelines: [CONTRIBUTING.md](CONTRIBUTING.md)
+* Core Development: [DEVELOPERS.md](DEVELOPERS.md)
 * Dashboard: https://dashboard.angularjs.org

 ##### Looking for Angular 2? Go here: https://github.com/angular/angular

-Building AngularJS
---------
-[Once you have set up your environment](https://docs.angularjs.org/misc/contribute), just run:
+Documentation
+--------------------
+Go to https://docs.angularjs.org

-    grunt package
-
-
-Running tests
-------------
-To execute all unit tests, use:
-
-    grunt test:unit
-
-To execute end-to-end (e2e) tests, use:
-
-    grunt package
-    grunt test:e2e
-
-To learn more about the grunt tasks, run `grunt --help`
-
-Contribute & Develop
+Contribute
 --------------------

-We've set up a separate document for our [contribution guidelines](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md).
+We've set up a separate document for our
+[contribution guidelines](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md).
+
+Develop
+--------------------
+
+We've set up a separate document for
+[developers](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md).


 [![Analytics](https://ga-beacon.appspot.com/UA-8594346-11/angular.js/README.md?pixel)](https://github.com/igrigorik/ga-beacon)
@@ -0,0 +1,44 @@
+'use strict';
+
+angular
+  .module('animationBenchmark', ['ngAnimate'], config)
+  .controller('BenchmarkController', BenchmarkController);
+
+// Functions - Definitions
+function config($compileProvider) {
+  $compileProvider
+    .commentDirectivesEnabled(false)
+    .cssClassDirectivesEnabled(false)
+    .debugInfoEnabled(false);
+}
+
+function BenchmarkController($scope) {
+  var self = this;
+  var itemCount = 1000;
+  var items = (new Array(itemCount + 1)).join('.').split('');
+
+  benchmarkSteps.push({
+    name: 'create',
+    fn: function() {
+      $scope.$apply(function() {
+        self.items = items;
+      });
+    }
+  });
+
+  benchmarkSteps.push({
+    name: '$digest',
+    fn: function() {
+      $scope.$root.$digest();
+    }
+  });
+
+  benchmarkSteps.push({
+    name: 'destroy',
+    fn: function() {
+      $scope.$apply(function() {
+        self.items = [];
+      });
+    }
+  });
+}
@@ -0,0 +1,22 @@
+/* eslint-env node */
+
+'use strict';
+
+module.exports = function(config) {
+  config.set({
+    scripts: [
+      {
+        id: 'jquery',
+        src: 'jquery-noop.js'
+      }, {
+        id: 'angular',
+        src: '/build/angular.js'
+      }, {
+        id: 'angular-animate',
+        src: '/build/angular-animate.js'
+      }, {
+        src: 'app.js'
+      }
+    ]
+  });
+};
@@ -0,0 +1 @@
+// Override me with ?jquery=/bower_components/jquery/dist/jquery.js
@@ -0,0 +1,28 @@
+<style>
+  [ng-cloak] { display: none !important; }
+  .animation-container .ng-enter,
+  .animation-container .ng-leave {
+    transition: all 0.1s;
+  }
+
+  .animation-container .ng-enter,
+  .animation-container .ng-leave.ng-leave-active {
+    opacity: 0;
+  }
+
+  .animation-container .ng-enter.ng-enter-active,
+  .animation-container .ng-leave {
+    opacity: 1;
+  }
+</style>
+<div ng-app="animationBenchmark" ng-cloak ng-controller="BenchmarkController as bm">
+  <div class="container-fluid">
+    <h2>Large collection of elements animated in and out with ngAnimate</h2>
+
+    <div class="animation-container">
+      <div ng-repeat="i in bm.items track by $index">
+        Just a plain ol' element
+      </div>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,108 @@
+'use strict';
+
+var app = angular.module('ngClassBenchmark', []);
+
+app.controller('DataController', function DataController($scope) {
+
+  this.init = function() {
+    this.numberOfTodos = 1000;
+    this.implementation = 'tableOptimized';
+    this.completedPeriodicity = 3;
+    this.importantPeriodicity = 13;
+    this.urgentPeriodicity = 29;
+
+    this.createTodos(100);
+    this.setTodosValuesWithSeed(0);
+  };
+
+  this.clearTodos = function() {
+    this.todos = null;
+  };
+
+  this.createTodos = function(count) {
+    var i;
+    this.todos = [];
+    for (i = 0; i < count; i++) {
+      this.todos.push({
+        id: i + 1,
+        completed: false,
+        important: false,
+        urgent: false
+      });
+    }
+  };
+
+  this.setTodosValuesWithSeed = function(offset) {
+    var i, todo;
+    for (i = 0; i < this.todos.length; i++) {
+      todo = this.todos[i];
+      todo.completed = 0 === (i + offset) % this.completedPeriodicity;
+      todo.important = 0 === (i + offset) % this.importantPeriodicity;
+      todo.urgent = 0 === (i + offset) % this.urgentPeriodicity;
+    }
+  };
+
+  this.init();
+
+
+  benchmarkSteps.push({
+    name: 'setup',
+    fn: function() {
+      $scope.$apply();
+      this.clearTodos();
+      this.createTodos(this.numberOfTodos);
+    }.bind(this)
+  });
+
+  benchmarkSteps.push({
+    name: 'create',
+    fn: function() {
+      // initialize data for first time that will construct the DOM
+      this.setTodosValuesWithSeed(0);
+      $scope.$apply();
+    }.bind(this)
+  });
+
+  benchmarkSteps.push({
+    name: '$apply',
+    fn: function() {
+      $scope.$apply();
+    }
+  });
+
+  benchmarkSteps.push({
+    name: 'update',
+    fn: function() {
+      // move everything but completed
+      this.setTodosValuesWithSeed(3);
+      $scope.$apply();
+    }.bind(this)
+  });
+
+  benchmarkSteps.push({
+    name: 'unclass',
+    fn: function() {
+      // remove all classes
+      this.setTodosValuesWithSeed(NaN);
+      $scope.$apply();
+    }.bind(this)
+  });
+
+  benchmarkSteps.push({
+    name: 'class',
+    fn: function() {
+      // add all classes as the initial state
+      this.setTodosValuesWithSeed(0);
+      $scope.$apply();
+    }.bind(this)
+  });
+
+  benchmarkSteps.push({
+    name: 'destroy',
+    fn: function() {
+      this.clearTodos();
+      $scope.$apply();
+    }.bind(this)
+  });
+
+});
@@ -0,0 +1,15 @@
+/* eslint-env node */
+
+'use strict';
+
+module.exports = function(config) {
+  config.set({
+    scripts: [{
+      id: 'angular',
+      src: '/build/angular.js'
+    },
+    {
+      src: 'app.js'
+    }]
+  });
+};
@@ -0,0 +1,177 @@
+<style>
+  .gold {
+    background: gold;
+  }
+  .silver {
+    background: silver;
+  }
+  .table tbody tr > td.success {
+    background-color: #dff0d8;
+  }
+
+  .table tbody tr > td.error {
+    background-color: #f2dede;
+  }
+
+  .table tbody tr > td.warning {
+    background-color: #fcf8e3;
+  }
+
+  .table tbody tr > td.info {
+    background-color: #d9edf7;
+  }
+  .completed {
+    text-decoration: line-through;
+  }
+  .important {
+    font-weight: bold;
+  }
+  .urgent {
+      color: red;
+  }
+</style>
+<div ng-app="ngClassBenchmark" ng-cloak class="container-fluid">
+  <div ng-controller="DataController as benchmark" class="row">
+    <div class="col-lg-12">
+
+      <div class="well">
+        <h3>Parameters</h3>
+
+        <br>
+        <p>
+          <label>Number of todos</label><br>
+          <input type="number" ng-model="benchmark.numberOfTodos">
+        </p>
+
+        <br>
+        <p>
+          <label>Implementation</label><br>
+          <div class="radio">
+            <label>
+              <input ng-model="benchmark.implementation" value="tableOptimized"
+                type="radio" name="implementation">
+              Table optimized <br>
+              <code>ng-class="todo.completed && 'success'"</code>
+            </label>
+          </div>
+          <div class="radio">
+            <label>
+              <input ng-model="benchmark.implementation" value="table"
+                type="radio" name="implementation">
+              Table <br>
+              <code>ng-class="{success: todo.completed}"</code>
+            </label>
+          </div>
+          <div class="radio">
+            <label>
+              <input ng-model="benchmark.implementation" value="list"
+                type="radio" name="implementation">
+              List <br>
+              <code>ng-class="{completed: todo.completed, urgent: todo.urgent, important: todo.important"}</code>
+            </label>
+          </div>
+          <div class="radio">
+            <label>
+              <input ng-model="benchmark.implementation" value="singleOptimized"
+                type="radio" name="implementation">
+              Single ngClass optimized <br>
+              <code>
+                ng-class="{'panel-success': !!benchmark.todos, 'panel-danger': !benchmark.todos}"
+              </code>
+            </label>
+          </div>
+          <div class="radio">
+            <label>
+              <input ng-model="benchmark.implementation" value="single"
+                type="radio" name="implementation">
+              Single ngClass <br>
+              <code>
+                ng-class="{'panel-success': benchmark.todos, 'panel-danger': !benchmark.todos}"
+              </code>
+            </label>
+          </div>
+        </p>
+      </div>
+
+      <br>
+      <h3>Example</h3>
+      <div ng-switch="benchmark.implementation">
+
+        <table ng-switch-when="tableOptimized" class="table">
+          <thead>
+            <tr>
+              <th>todo #id</th>
+              <th>completed?</th>
+              <th>urgent?</th>
+              <th>important?</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="todo in benchmark.todos track by todo.id"
+              ng-class="todo.completed && 'active'"
+              ng-class-even="todo.completed && todo.important && 'gold'"
+              ng-class-odd="todo.completed && todo.important && 'silver'"
+              >
+                <td>#{{todo.id}}</td>
+                <td>{{todo.completed}}</td>
+                <td ng-class="todo.urgent && 'danger'">{{todo.urgent}}</td>
+                <td ng-class="todo.important && 'success'">{{todo.important}}</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <table ng-switch-when="table" class="table">
+          <thead>
+            <tr>
+              <th>todo #id</th>
+              <th>completed?</th>
+              <th>urgent?</th>
+              <th>important?</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="todo in benchmark.todos track by todo.id"
+              ng-class="{active: todo.completed}"
+              ng-class-even="{gold: todo.completed && todo.important}"
+              ng-class-odd="{silver: todo.completed && todo.important}"
+              >
+                <td>#{{todo.id}}</td>
+                <td>{{todo.completed}}</td>
+                <td ng-class="{danger: todo.urgent}">{{todo.urgent}}</td>
+                <td ng-class="{success: todo.important}">{{todo.important}}</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <ul ng-switch-when="list">
+          <li ng-repeat="todo in benchmark.todos track by todo.id"
+            ng-class="{
+              completed: todo.completed,
+              urgent: todo.urgent,
+              important: todo.important
+            }">#{{todo.id}}</li>
+        </ul>
+
+        <div ng-switch-when="singleOptimized"
+          class="panel"
+          ng-class="{'panel-success': !!benchmark.todos, 'panel-danger': !benchmark.todos}">
+            <div class="panel-heading">
+              <h3 class="panel-title">Information</h3>
+            </div>
+            <div class="panel-body"> The title is green because there are todos... </div>
+        </div>
+
+        <div ng-switch-when="single"
+          class="panel"
+          ng-class="{'panel-success': benchmark.todos, 'panel-danger': !benchmark.todos}">
+            <div class="panel-heading">
+              <h3 class="panel-title">Information</h3>
+            </div>
+            <div class="panel-body"> The title is green because there are todos... </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+<br><br><br>
@@ -2,7 +2,7 @@
  "name": "angularjs",
  "license": "MIT",
  "devDependencies": {
-    "jquery": "3.1.0",
+    "jquery": "3.2.1",
    "jquery-2.2": "jquery#2.2.4",
    "jquery-2.1": "jquery#2.1.4",
    "closure-compiler": "https://dl.google.com/closure-compiler/compiler-20140814.zip",
@@ -0,0 +1 @@
+.visible-phone{display:none}.visible-desktop{display:block}.navbar{display:block}.navbar .container{padding:0 16px;width:auto}.navbar .brand{float:left;margin:8px 80px 0 8px;padding:0}.navbar .brand a{display:block;height:30px;margin:6px 0 5px 0;overflow:hidden;padding:0;width:117px}.navbar .nav{float:right}.navbar .nav .dropdown-toggle{color:rgba(255,255,255,0.87);font-size:16px;font-weight:300;line-height:56px;padding:0 24px;text-transform:uppercase;transition:all .3s}.navbar .nav .dropdown-toggle:hover,.navbar .nav .dropdown-toggle:active,.navbar .nav .dropdown-toggle:focus{background:#37474F;color:#fff}.navbar .nav .dropdown-menu{background:#37474F;border:none;border-radius:0;box-shadow:0 0 16px rgba(0,0,0,0.12),0 16px 16px rgba(0,0,0,0.24);color:#fff;left:auto;margin:0;padding:0;right:0}.navbar .nav .dropdown-menu:after,.navbar .nav .dropdown-menu:before{display:none}.navbar .nav .dropdown-menu li{border-bottom:1px solid rgba(38,50,56,0.56);box-sizing:border-box;line-height:48px}.navbar .nav .dropdown-menu li:last-child{border:none}.navbar .nav .dropdown-menu a{background:#37474F;color:#fff;font-weight:300;line-height:48px;padding:0 16px;transition:all .2s}.navbar .nav .dropdown-menu a:hover,.navbar .nav .dropdown-menu a:focus{background:#455A64}.navbar .navbar-search{left:200px;margin:0;position:absolute;right:440px;top:8px;width:auto}.navbar .navbar-search i{color:#546E7A;font-size:16px;left:12px;position:absolute;top:11px}.navbar .navbar-search .search-query{background:#37474F;border:none;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#546E7A;font-size:14px;height:40px;width:100%;padding:0 16px 0 32px;text-shadow:none;transition:all .3s}.navbar .navbar-search .search-query:-webkit-autofill,.navbar .navbar-search .search-query:-webkit-autofill:hover,.navbar .navbar-search .search-query:-webkit-autofill:focus{background-color:#fff;transition:background-color 5000s ease-in-out 0s;-webkit-text-fill-color:#455A64}.navbar .navbar-search .search-query:hover,.navbar .navbar-search .search-query:active,.navbar .navbar-search .search-query:focus{background:#fff;box-shadow:inset 0 2px 4px rgba(0,0,0,0.24);color:#2196F3}.navbar .navbar-search .search-query::-webkit-input-placeholder{color:#546E7A}.navbar .navbar-search .search-query::-moz-placeholder{color:#546E7A}.navbar .navbar-search .search-query:-ms-input-placeholder{color:#546E7A}.navbar .navbar-search .search-query:-moz-placeholder{color:#546E7A}#navbar-main .navbar-inner{background:#263238;height:56px}#navbar-notice{z-index:1029;top:56px}#navbar-notice .navbar-inner{background:#ECEFF1;box-shadow:0 0 3px rgba(0,0,0,0.12),0 3px 3px rgba(0,0,0,0.24);height:auto}.site-notice{padding:4px 0;text-align:center;font-size:13px;margin:0}@media handheld and (max-width: 800px), screen and (max-device-width: 800px), screen and (max-width: 800px){.visible-phone{display:block}.visible-desktop{display:none}}@media handheld and (max-width: 800px), screen and (max-device-width: 800px), screen and (max-width: 800px){.homepage .container{padding:16px;width:auto}.homepage .span1{width:auto}.homepage .span2{width:auto}.homepage .span3{width:auto}.homepage .span4{width:auto}.homepage .span5{width:auto}.homepage .span6{width:auto}.homepage .span7{width:auto}.homepage .span8{width:auto}.homepage .span9{width:auto}.homepage .span10{width:auto}.homepage .navbar .container{padding:0 8px}.homepage #navbar-main .navbar-inner{height:40px}.homepage #navbar-main .brand{margin:6px 0 0 0}.homepage #navbar-main .brand a{margin:0}.homepage #navbar-main .nav{margin:0}.homepage #navbar-main .nav .dropdown-toggle{font-size:12px;line-height:40px;padding:0 8px}.homepage #navbar-main .dropdown-menu a{padding:0 8px}.homepage #navbar-main .navbar-search{background:#263238;border-bottom:1px solid #263238;left:0;right:0;top:100%}.homepage #navbar-main .navbar-search i{left:12px;top:7px}.homepage #navbar-main .navbar-search .search-query{border-radius:0;height:32px}.homepage #navbar-notice{top:40px}.homepage #navbar-notice .site-notice{font-size:11px}.homepage .hero{padding:80px 32px 32px 32px}.homepage .hero h2{background-size:230px 60px;height:60px;width:230px}}
@@ -1,3 +1,37 @@
+@font-face {
+  font-family: 'Open Sans';
+  src: url("../components/open-sans-fontface-1.4.0/fonts/Regular/OpenSans-Regular.eot?v=1.1.0");
+  src: url("../components/open-sans-fontface-1.4.0/fonts/Regular/OpenSans-Regular.eot?#iefix&v=1.1.0") format("embedded-opentype"),
+    url("../components/open-sans-fontface-1.4.0/fonts/Regular/OpenSans-Regular.woff?v=1.1.0") format("woff"),
+    url("../components/open-sans-fontface-1.4.0/fonts/Regular/OpenSans-Regular.ttf?v=1.1.0") format("truetype"),
+    url("../components/open-sans-fontface-1.4.0/fonts/Regular/OpenSans-Regular.svg?v=1.1.0#OpenSansBold") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url("../components/open-sans-fontface-1.4.0/fonts/Semibold/OpenSans-Semibold.eot?v=1.1.0");
+  src: url("../components/open-sans-fontface-1.4.0/fonts/Semibold/OpenSans-Semibold.eot?#iefix&v=1.1.0") format("embedded-opentype"),
+    url("../components/open-sans-fontface-1.4.0/fonts/Semibold/OpenSans-Semibold.woff?v=1.1.0") format("woff"),
+    url("../components/open-sans-fontface-1.4.0/fonts/Semibold/OpenSans-Semibold.ttf?v=1.1.0") format("truetype"),
+    url("../components/open-sans-fontface-1.4.0/fonts/Semibold/OpenSans-Semibold.svg?v=1.1.0#OpenSansBold") format("svg");
+  font-weight: 600;
+  font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url("../components/open-sans-fontface-1.4.0/fonts/Bold/OpenSans-Bold.eot?v=1.1.0");
+  src: url("../components/open-sans-fontface-1.4.0/fonts/Bold/OpenSans-Bold.eot?#iefix&v=1.1.0") format("embedded-opentype"),
+    url("../components/open-sans-fontface-1.4.0/fonts/Bold/OpenSans-Bold.woff?v=1.1.0") format("woff"),
+    url("../components/open-sans-fontface-1.4.0/fonts/Bold/OpenSans-Bold.ttf?v=1.1.0") format("truetype"),
+    url("../components/open-sans-fontface-1.4.0/fonts/Bold/OpenSans-Bold.svg?v=1.1.0#OpenSansBold") format("svg");
+  font-weight: bold;
+  font-style: normal;
+}
+
 html, body {
  position: relative;
  height: 100%;
@@ -53,13 +87,13 @@ h1,h2,h3,h4,h5,h6 {
 }

 .header .brand {
-  padding-top: 6px;
  padding-bottom: 0px;
 }

 .header .brand img {
-  margin-top: 5px;
-  height: 30px;
+  margin-top: 0;
+  height: auto;
+  vertical-align: top;
 }

 .docs-search {
@@ -82,6 +116,11 @@ h1,h2,h3,h4,h5,h6 {
  margin-right: 10px;
 }

+.navbar .navbar-search i {
+  top: 13px;
+  font-size: 12px;
+}
+
 .docs-search > .search-query:focus {
  outline: 0;
 }
@@ -297,6 +336,7 @@ iframe.example {
 }

 .search-results-container {
+  position: relative;
  padding-bottom: 1em;
  border-top: 1px solid #111;
  background: #181818;
@@ -435,15 +475,17 @@ iframe.example {
  background: #f1f1f1;
 }

-.sup-header {
+#navbar-sub {
  padding-top: 10px;
  padding-bottom: 5px;
  background: rgba(245,245,245,0.88);
  box-shadow: 0 0 2px #999;
+  z-index: 1028;
+  top: 83px;
 }

 .main-body-grid {
-  margin-top: 120px;
+  margin-top: 144px;
  position: relative;
 }

@@ -454,7 +496,7 @@ iframe.example {

 .main-body-grid > .grid-left {
  position: fixed;
-  top: 120px;
+  top: 144px;
  bottom: 0;
  overflow: auto;
 }
@@ -827,3 +869,115 @@ ul.events > li {
 iframe[name="example-anchoringExample"] {
  height: 400px;
 }
+
+/*
+  angular-topnav.css and bootstrap overrides
+ */
+
+.navbar .navbar-inner .container {
+  padding: 0 16px;
+  width: auto;
+  height: auto;
+}
+
+.navbar .nav > li {
+  float: left;
+}
+
+.navbar-nav .open .dropdown-menu {
+  position: absolute;
+  float: left;
+}
+
+.navbar-nav .open .dropdown-menu > li > a {
+  line-height: 48px;
+}
+
+#navbar-main .navbar-inner, #navbar-notice .navbar-inner {
+  box-shadow: none;
+}
+
+#navbar-sub .container {
+  max-width: 970px;
+}
+
+.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
+  background-color: inherit;
+}
+
+toc-container {
+  display: block;
+  margin: 15px 10px;
+}
+
+toc-container b {
+  text-transform: uppercase;
+}
+
+toc-container .btn {
+  padding: 3px 6px;
+  font-size: 13px;
+  margin-left: 5px;
+}
+
+toc-container > div > toc-tree ul {
+  list-style: none;
+  padding-left: 15px;
+  padding-bottom: 2px;
+}
+
+toc-container > div > toc-tree > ul {
+  padding-left: 0;
+}
+
+toc-container > div > toc-tree > ul > li > toc-tree > ul > li toc-tree > ul li {
+  font-size: 13px;
+}
+
+@media handheld and (max-width:800px), screen and (max-device-width:800px), screen and (max-width:800px) {
+  .navbar {
+    min-height: auto;
+  }
+
+  .search-results-container {
+    top: 32px;
+    overflow: auto;
+    max-height: 85vh;
+    padding-bottom: 0;
+    position: static;
+  }
+
+  .search-close {
+    right: 1px;
+    margin-left: 0;
+    top: 41px;
+    padding: 5px 10px;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    box-shadow: none;
+    width: auto;
+    bottom: auto;
+    left: auto;
+  }
+
+  .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header {
+    padding: 0 8px;
+  }
+
+  .homepage #navbar-notice {
+    top: 72px;
+  }
+
+  #navbar-notice .navbar-inner {
+    box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 3px 3px rgba(0, 0, 0, .24)
+  }
+
+  #navbar-sub {
+    position: relative;
+    top: 17px;
+    margin-top: 80px;
+    padding-bottom: 0;
+    margin-bottom: 0;
+  }
+
+}
@@ -4,7 +4,7 @@
 /* global importScripts, lunr */

 // Load up the lunr library
-importScripts('../components/lunr.js-0.5.12/lunr.min.js');
+importScripts('../components/lunr-0.7.2/lunr.min.js');

 // Create the lunr index - the docs should be an array of object, each object containing
 // the path and search terms for a page
@@ -1,51 +1,48 @@
 'use strict';

-describe('doc.angularjs.org', function() {
+describe('API pages', function() {

-  describe('API pages', function() {
+  it('should display links to code on GitHub', function() {
+    browser.get('build/docs/index.html#!/api/ng/service/$http');
+    expect(element(by.css('.improve-docs')).getAttribute('href')).toMatch(/https?:\/\/github\.com\/angular\/angular\.js\/edit\/.+\/src\/ng\/http\.js/);

-    it('should display links to code on GitHub', function() {
-      browser.get('build/docs/index.html#!/api/ng/service/$http');
-      expect(element(by.css('.improve-docs')).getAttribute('href')).toMatch(/https?:\/\/github\.com\/angular\/angular\.js\/edit\/.+\/src\/ng\/http\.js/);
+    browser.get('build/docs/index.html#!/api/ng/service/$http');
+    expect(element(by.css('.view-source')).getAttribute('href')).toMatch(/https?:\/\/github\.com\/angular\/angular\.js\/tree\/.+\/src\/ng\/http\.js#L\d+/);
+  });

-      browser.get('build/docs/index.html#!/api/ng/service/$http');
-      expect(element(by.css('.view-source')).getAttribute('href')).toMatch(/https?:\/\/github\.com\/angular\/angular\.js\/tree\/.+\/src\/ng\/http\.js#L\d+/);
-    });
+  it('should change the page content when clicking a link to a service', function() {
+    browser.get('build/docs/index.html');

-    it('should change the page content when clicking a link to a service', function() {
-      browser.get('build/docs/index.html');
+    var ngBindLink = element(by.css('.definition-table td a[href="api/ng/directive/ngClick"]'));
+    ngBindLink.click();

-      var ngBindLink = element(by.css('.definition-table td a[href="api/ng/directive/ngClick"]'));
-      ngBindLink.click();
-
-      var pageBody = element(by.css('h1'));
-      expect(pageBody.getText()).toEqual('ngClick');
-    });
+    var mainHeader = element(by.css('.main-body h1 '));
+    expect(mainHeader.getText()).toEqual('ngClick');
+  });


-    it('should show the functioning input directive example', function() {
-      browser.get('build/docs/index.html#!/api/ng/directive/input');
+  it('should show the functioning input directive example', function() {
+    browser.get('build/docs/index.html#!/api/ng/directive/input');

-      // Ensure that the page is loaded before trying to switch frames.
-      browser.waitForAngular();
+    // Ensure that the page is loaded before trying to switch frames.
+    browser.waitForAngular();

-      browser.switchTo().frame('example-input-directive');
+    browser.switchTo().frame('example-input-directive');

-      var nameInput = element(by.model('user.name'));
-      nameInput.sendKeys('!!!');
+    var nameInput = element(by.model('user.name'));
+    nameInput.sendKeys('!!!');

-      var code = element.all(by.css('tt')).first();
-      expect(code.getText()).toContain('guest!!!');
-    });
+    var code = element.all(by.css('tt')).first();
+    expect(code.getText()).toContain('guest!!!');
+  });

-    it('should trim indentation from code blocks', function() {
-      browser.get('build/docs/index.html#!/api/ng/type/$rootScope.Scope');
+  it('should trim indentation from code blocks', function() {
+    browser.get('build/docs/index.html#!/api/ng/type/$rootScope.Scope');

-      var codeBlocks = element.all(by.css('pre > code.lang-js'));
-      codeBlocks.each(function(codeBlock) {
-        var firstSpan = codeBlock.all(by.css('span')).first();
-        expect(firstSpan.getText()).not.toMatch(/^\W+$/);
-      });
+    var codeBlocks = element.all(by.css('pre > code.lang-js'));
+    codeBlocks.each(function(codeBlock) {
+      var firstSpan = codeBlock.all(by.css('span')).first();
+      expect(firstSpan.getText()).not.toMatch(/^\W+$/);
    });
  });
 });
@@ -0,0 +1,58 @@
+'use strict';
+
+describe('directives', function() {
+
+  describe('parameter section', function() {
+
+    it('should show the directive name only if it is a param (attribute) with a value', function() {
+      browser.get('build/docs/index.html#!/api/ng/directive/ngInclude');
+      expect(getParamNames().getText()).toContain('ngInclude | src');
+
+      browser.get('build/docs/index.html#!/api/ngRoute/directive/ngView');
+      expect(getParamNames().getText()).not.toContain('ngView');
+    });
+  });
+
+  describe('usage section', function() {
+
+    it('should show the directive name if it is a param (attribute) with a value', function() {
+      browser.get('build/docs/index.html#!/api/ng/directive/ngInclude');
+
+      expect(getUsageAs('element', 'ng-include').isPresent()).toBe(true);
+      expect(getUsageAs('attribute', 'ng-include').isPresent()).toBe(true);
+      expect(getUsageAs('CSS class', 'ng-include').isPresent()).toBe(true);
+    });
+
+    it('should show the directive name if it is a void param (attribute)', function() {
+      browser.get('build/docs/index.html#!/api/ngRoute/directive/ngView');
+
+      expect(getUsageAs('element', 'ng-view').isPresent()).toBe(true);
+      expect(getUsageAs('attribute', 'ng-view').isPresent()).toBe(true);
+      expect(getUsageAs('CSS class', 'ng-view').isPresent()).toBe(true);
+    });
+  });
+});
+
+function getParamNames() {
+  var argsSection = element(by.className('input-arguments'));
+
+  var paramNames = argsSection.all(by.css('tr td:nth-child(1)'));
+
+  return paramNames;
+}
+
+// Based on the type of directive usage, the directive name will show up in the code block
+// with a specific class
+var typeClassMap = {
+  element: 'tag',
+  attribute: 'atn',
+  'CSS class': 'atv'
+};
+
+function getUsageAs(type, directiveName) {
+  var usage = element(by.className('usage'));
+
+  var as = usage.element(by.cssContainingText('li', 'as ' + type));
+
+  return as.element(by.cssContainingText('span.' + typeClassMap[type], directiveName));
+}
@@ -44,30 +44,50 @@ describe('docs.angularjs.org', function() {
      var ngBindLink = element(by.css('.definition-table td a[href="api/ng/directive/ngClick"]'));
      ngBindLink.click();

-      var pageBody = element(by.css('h1'));
-      expect(pageBody.getText()).toEqual('ngClick');
+      var mainHeader = element(by.css('.main-body h1 '));
+      expect(mainHeader.getText()).toEqual('ngClick');
    });


+    it('should include the files for the embedded examples from the same domain', function() {
+      browser.get('build/docs/index-production.html#!api/ng/directive/ngClick');
+
+      var origin = browser.executeScript('return document.location.origin;');
+
+      var exampleIFrame = element(by.name('example-ng-click'));
+
+      // This is technically an implementation detail, but if this changes, then there's a good
+      // chance the deployment process changed
+      expect(exampleIFrame.getAttribute('src')).toContain('examples/example-ng-click/index.html');
+
+      browser.switchTo().frame('example-ng-click');
+
+      var scriptEl = element(by.tagName('script'));
+
+      // Ensure the included file is from the same domain
+      expect(scriptEl.getAttribute('src')).toContain(origin);
+    });
+

    it('should be resilient to trailing slashes', function() {
      browser.get('build/docs/index-production.html#!/api/ng/function/angular.noop/');
-      var pageBody = element(by.css('h1'));
-      expect(pageBody.getText()).toEqual('angular.noop');
+
+      var mainHeader = element(by.css('.main-body h1 '));
+      expect(mainHeader.getText()).toEqual('angular.noop');
    });


    it('should be resilient to trailing "index"', function() {
      browser.get('build/docs/index-production.html#!/api/ng/function/angular.noop/index');
-      var pageBody = element(by.css('h1'));
-      expect(pageBody.getText()).toEqual('angular.noop');
+      var mainHeader = element(by.css('.main-body h1 '));
+      expect(mainHeader.getText()).toEqual('angular.noop');
    });


    it('should be resilient to trailing "index/"', function() {
      browser.get('build/docs/index-production.html#!/api/ng/function/angular.noop/index/');
-      var pageBody = element(by.css('h1'));
-      expect(pageBody.getText()).toEqual('angular.noop');
+      var mainHeader = element(by.css('.main-body h1 '));
+      expect(mainHeader.getText()).toEqual('angular.noop');
    });


@@ -78,7 +98,8 @@ describe('docs.angularjs.org', function() {

    it('should display an error if the page does not exist', function() {
      browser.get('build/docs/index-production.html#!/api/does/not/exist');
-      expect(element(by.css('h1')).getText()).toBe('Oops!');
+      var mainHeader = element(by.css('.main-body h1 '));
+      expect(mainHeader.getText()).toEqual('Oops!');
    });

  });
@@ -0,0 +1,130 @@
+'use strict';
+
+/**
+ * This scenario checks the presence of the table of contents for a sample of pages - API and guide.
+ * The expectations are kept vague so that they can be easily adjusted when the docs change.
+ */
+
+describe('table of contents', function() {
+
+  it('on provider pages', function() {
+    browser.get('build/docs/index.html#!/api/ng/provider/$interpolateProvider');
+
+    var toc = element.all(by.css('toc-container > div > toc-tree'));
+    toc.getText().then(function(text) {
+      expect(text.join('')).toContain('Overview');
+      expect(text.join('')).toContain('Methods');
+    });
+
+    var tocFirstLevel = element.all(by.css('toc-container > div > toc-tree > ul > li'));
+
+    tocFirstLevel.then(function(match) {
+      expect(match.length).toBe(3);
+
+      expect(match[1].all(by.css('li')).count()).toBe(2);
+    });
+
+  });
+
+  it('on service pages', function() {
+    browser.get('build/docs/index.html#!/api/ng/service/$controller');
+
+    var toc = element.all(by.css('toc-container > div > toc-tree'));
+    toc.getText().then(function(text) {
+      expect(text.join('')).toContain('Overview');
+      expect(text.join('')).toContain('Usage');
+    });
+
+    var tocFirstLevel = element.all(by.css('toc-container > div > toc-tree > ul > li'));
+
+    tocFirstLevel.then(function(match) {
+      expect(match.length).toBe(3);
+
+      expect(match[2].all(by.css('li')).count()).toBe(2);
+    });
+  });
+
+  it('on directive pages', function() {
+    browser.get('build/docs/index.html#!/api/ng/directive/input');
+
+    var toc = element.all(by.css('toc-container > div > toc-tree'));
+    toc.getText().then(function(text) {
+      expect(text.join('')).toContain('Overview');
+      expect(text.join('')).toContain('Usage');
+      expect(text.join('')).toContain('Directive Info');
+    });
+
+    var tocFirstLevel = element.all(by.css('toc-container > div > toc-tree > ul > li'));
+
+    tocFirstLevel.then(function(match) {
+      expect(match.length).toBe(4);
+
+      expect(match[2].all(by.css('li')).count()).toBe(1);
+    });
+  });
+
+  it('on function pages', function() {
+    browser.get('build/docs/index.html#!/api/ng/function/angular.bind');
+
+    var toc = element.all(by.css('toc-container > div > toc-tree'));
+    toc.getText().then(function(text) {
+      expect(text.join('')).toContain('Overview');
+      expect(text.join('')).toContain('Usage');
+    });
+
+    var tocFirstLevel = element.all(by.css('toc-container > div > toc-tree > ul > li'));
+
+    tocFirstLevel.then(function(match) {
+      expect(match.length).toBe(2);
+
+      expect(match[1].all(by.css('li')).count()).toBe(2);
+    });
+  });
+
+  it('on type pages', function() {
+    browser.get('build/docs/index.html#!/api/ng/type/ModelOptions');
+
+    var toc = element.all(by.css('toc-container > div > toc-tree'));
+    toc.getText().then(function(text) {
+      expect(text.join('')).toContain('Overview');
+      expect(text.join('')).toContain('Methods');
+    });
+
+    var tocFirstLevel = element.all(by.css('toc-container > div > toc-tree > ul > li'));
+
+    tocFirstLevel.then(function(match) {
+      expect(match.length).toBe(2);
+
+      expect(match[1].all(by.css('li')).count()).toBe(2);
+    });
+  });
+
+  it('on filter pages', function() {
+    browser.get('build/docs/index.html#!/api/ng/filter/date');
+
+    var toc = element.all(by.css('toc-container > div > toc-tree'));
+    toc.getText().then(function(text) {
+      expect(text.join('')).toContain('Overview');
+      expect(text.join('')).toContain('Usage');
+    });
+
+    var tocFirstLevel = element.all(by.css('toc-container > div > toc-tree > ul > li'));
+
+    tocFirstLevel.then(function(match) {
+      expect(match.length).toBe(3);
+
+      expect(match[1].all(by.css('li')).count()).toBe(2);
+    });
+  });
+
+  it('on guide pages', function() {
+    browser.get('build/docs/index.html#!/guide/services');
+    var tocFirstLevel = element.all(by.css('toc-container > div > toc-tree > ul > li'));
+
+    tocFirstLevel.then(function(match) {
+      expect(match.length).toBe(5);
+
+      expect(match[1].all(by.css('li')).count()).toBe(3);
+    });
+  });
+});
@@ -1,7 +1,8 @@
 'use strict';

-angular.module('directives', [])
+var directivesModule = angular.module('directives', []);

+directivesModule
 /**
 * backToTop Directive
 * @param  {Function} $anchorScroll
@@ -47,4 +48,133 @@ angular.module('directives', [])
      }
    }
  };
-});
+})
+
+.directive('tocCollector', ['$rootScope', function($rootScope) {
+  return {
+    controller: ['$element', function($element) {
+      /* eslint-disable no-invalid-this */
+      var ctrl = this;
+
+      $rootScope.$on('$includeContentRequested', function() {
+        ctrl.hs = [];
+        ctrl.root = [];
+      });
+
+      this.hs = [];
+      this.root = [];
+      this.element = $element;
+
+      this.register = function(h) {
+        var previousLevel;
+
+        for (var i = ctrl.hs.length - 1; i >= 0; i--) {
+          if (ctrl.hs[i].level === (h.level - 1)) {
+            previousLevel = ctrl.hs[i];
+            break;
+          }
+        }
+
+        if (previousLevel) {
+          previousLevel.children.push(h);
+        } else {
+          this.root.push(h);
+        }
+
+        ctrl.hs.push(h);
+        /* eslint-enable no-invalid-this */
+      };
+    }]
+  };
+}])
+
+.component('tocTree', {
+  template: '<ul>' +
+      '<li ng-repeat="item in $ctrl.items">' +
+        '<a ng-href="#{{item.fragment}}">{{item.title}}</a>' +
+        '<toc-tree ng-if="::item.children.length > 0" items="item.children"></toc-tree>' +
+      '</li>' +
+    '</ul>',
+  bindings: {
+    items: '<'
+  }
+})
+.directive('tocContainer', function() {
+  return {
+    scope: true,
+    restrict: 'E',
+    require: {
+      tocContainer: '',
+      tocCollector: '^^'
+    },
+    controller: function() {
+      this.showToc = true;
+      this.items = [];
+    },
+    controllerAs: '$ctrl',
+    link: function(scope, element, attrs, ctrls) {
+      ctrls.tocContainer.items = ctrls.tocCollector.root;
+    },
+    template: '<div ng-if="::$ctrl.items.length > 1">' +
+      '<b>Contents</b>' +
+      '<button class="btn" ng-click="$ctrl.showToc = !$ctrl.showToc">{{$ctrl.showToc ? \'Hide\' : \'Show\'}}</button><br>' +
+      '<toc-tree items="$ctrl.items" ng-show="$ctrl.showToc"></toc-tree>' +
+      '</div>'
+  };
+})
+.directive('header', function() {
+  return {
+    restrict: 'E',
+    controller: ['$element', function($element) {
+      // eslint-disable-next-line no-invalid-this
+      this.element = $element;
+    }]
+  };
+})
+.directive('h1', ['$compile', function($compile) {
+  return {
+    restrict: 'E',
+    require: {
+      tocCollector: '^^?',
+      header: '^^?'
+    },
+    link: function(scope, element, attrs, ctrls) {
+      if (!ctrls.tocCollector) return;
+
+      var tocContainer = angular.element('<toc-container></toc-container>');
+      var containerElement = ctrls.header ? ctrls.header.element : element;
+
+      containerElement.after(tocContainer);
+      $compile(tocContainer)(scope);
+    }
+  };
+}]);
+
+for (var i = 2; i <= 5; i++) {
+  registerHDirective(i);
+}
+
+function registerHDirective(i) {
+  directivesModule.directive('h' + i, function() {
+    return {
+      restrict: 'E',
+      require: {
+        'tocCollector': '^^?'
+      },
+      link: function(scope, element, attrs, ctrls) {
+        var toc = ctrls.tocCollector;
+
+        if (!toc || !attrs.id) return;
+
+        toc.register({
+          level: i,
+          fragment: attrs.id,
+          title: element.text(),
+          children: []
+        });
+
+      }
+    };
+  });
+}
+
@@ -159,10 +159,11 @@ angular.module('examples', [])

      };

-      // Initialize the example data, so it's ready when clicking the open button.
-      // Otherwise pop-up blockers will prevent a new window from opening
-      ctrl.prepareExampleData(ctrl.example.path);
-
+      ctrl.$onInit = function() {
+        // Initialize the example data, so it's ready when clicking the open button.
+        // Otherwise pop-up blockers will prevent a new window from opening
+        ctrl.prepareExampleData(ctrl.example.path);
+      };
    }]
  };
 }])
@@ -67,6 +67,12 @@ angular.module('search', [])
    clearResults();
    $scope.q = '';
  };
+
+  $scope.handleResultClicked = function($event) {
+    if ($event.which === 1 && !$event.ctrlKey && !$event.metaKey) {
+      $scope.hideResults();
+    }
+  };
 }])


@@ -12,10 +12,16 @@ angular.module('versions', ['currentVersionData', 'allVersionsData'])
            /** @this VersionPickerController */
            function VersionPickerController($location, $window, CURRENT_NG_VERSION, ALL_NG_VERSIONS) {

-      var versionStr = CURRENT_NG_VERSION.isSnapshot ? 'snapshot' : CURRENT_NG_VERSION.version;
+      var versionStr = CURRENT_NG_VERSION.version;
+
+      if (CURRENT_NG_VERSION.isSnapshot) {
+        versionStr = CURRENT_NG_VERSION.distTag === 'latest' ? 'snapshot-stable' : 'snapshot';
+      }

      this.versions  = ALL_NG_VERSIONS;
-      this.selectedVersion = find(ALL_NG_VERSIONS, function(value) { return value.version.version === versionStr; });
+      this.selectedVersion = find(ALL_NG_VERSIONS, function(value) {
+        return value.version.version === versionStr;
+      });

      this.jumpToDocsVersion = function(value) {
        var currentPagePath = $location.path().replace(/\/$/, '');
@@ -1,40 +1,50 @@
 'use strict';

-describe('code', function() {
-  var prettyPrintOne, oldPP;
+describe('directives', function() {
  var compile, scope;

-  var any = jasmine.any;

  beforeEach(module('directives'));

-  beforeEach(inject(function($rootScope, $compile) {
-    // Provide stub for pretty print function
-    oldPP = window.prettyPrintOne;
-    prettyPrintOne = window.prettyPrintOne = jasmine.createSpy();
+  beforeEach(module(function($compileProvider) {
+    $compileProvider.debugInfoEnabled(false);
+  }));

+  beforeEach(inject(function($rootScope, $compile) {
    scope = $rootScope.$new();
    compile = $compile;
  }));

-  afterEach(function() {
-    window.prettyPrintOne = oldPP;
-  });
+  describe('code', function() {
+    var prettyPrintOne, oldPP;
+    var any = jasmine.any;
+
+    beforeEach(function() {
+      // Provide stub for pretty print function
+      oldPP = window.prettyPrintOne;
+      prettyPrintOne = window.prettyPrintOne = jasmine.createSpy();
+    });
+
+    afterEach(function() {
+      window.prettyPrintOne = oldPP;
+    });


-  it('should pretty print innerHTML', function() {
-    compile('<code>var x;</code>')(scope);
-    expect(prettyPrintOne).toHaveBeenCalledWith('var x;', null, false);
+    it('should pretty print innerHTML', function() {
+      compile('<code>var x;</code>')(scope);
+      expect(prettyPrintOne).toHaveBeenCalledWith('var x;', null, false);
+    });
+
+    it('should allow language declaration', function() {
+      compile('<code class="lang-javascript"></code>')(scope);
+      expect(prettyPrintOne).toHaveBeenCalledWith(any(String), 'javascript', false);
+    });
+
+    it('supports allow line numbers', function() {
+      compile('<code class="linenum"></code>')(scope);
+      expect(prettyPrintOne).toHaveBeenCalledWith(any(String), null, true);
+    });
  });

-  it('should allow language declaration', function() {
-    compile('<code class="lang-javascript"></code>')(scope);
-    expect(prettyPrintOne).toHaveBeenCalledWith(any(String), 'javascript', false);
-  });
-
-  it('supports allow line numbers', function() {
-    compile('<code class="linenum"></code>')(scope);
-    expect(prettyPrintOne).toHaveBeenCalledWith(any(String), null, true);
-  });
 });

@@ -1,10 +0,0 @@
-{
-  "name": "AngularJS-docs-app",
-  "dependencies": {
-    "jquery": "2.2.3",
-    "lunr.js": "0.5.12",
-    "open-sans-fontface": "1.0.4",
-    "google-code-prettify": "1.0.1",
-    "bootstrap": "3.1.1"
-  }
-}
@@ -47,6 +47,17 @@ module.exports = function generateVersionDocProcessor(gitData) {

        var latestMap = {};

+        // When the docs are built on a tagged commit, yarn info won't include the latest release,
+        // so we add it manually based on the local version.json file.
+        var missesCurrentVersion = !currentVersion.isSnapshot && !versions.find(function(version) {
+          return version === currentVersion.version;
+        });
+
+        if (missesCurrentVersion) versions.push(currentVersion.version);
+
+        // Get the stable release with the highest version
+        var highestStableRelease = versions.reverse().find(semverIsStable);
+
        versions = versions
            .filter(function(versionStr) {
              return blacklist.indexOf(versionStr) === -1;
@@ -70,10 +81,25 @@ module.exports = function generateVersionDocProcessor(gitData) {
            })
            .reverse();

+        // List the latest version for each branch
        var latest = sortObject(latestMap, reverse(semver.compare))
            .map(function(version) { return makeOption(version, 'Latest'); });

-        return [makeOption({version: 'snapshot'}, 'Latest', 'master')]
+        // Generate master and stable snapshots
+        var snapshots = [
+          makeOption(
+            {version: 'snapshot'},
+            'Latest',
+            'master-snapshot'
+          ),
+          makeOption(
+            {version: 'snapshot-stable'},
+            'Latest',
+            createSnapshotStableLabel(highestStableRelease)
+          )
+        ];
+
+        return snapshots
            .concat(latest)
            .concat(versions);
      }
@@ -103,6 +129,18 @@ module.exports = function generateVersionDocProcessor(gitData) {
      function sortObject(obj, cmp) {
        return Object.keys(obj).map(function(key) { return obj[key]; }).sort(cmp);
      }
+
+      // https://github.com/kaelzhang/node-semver-stable/blob/34dd29842409295d49889d45871bec55a992b7f6/index.js#L25
+      function semverIsStable(version) {
+        var semverObj = semver.parse(version);
+        return semverObj === null ? false : !semverObj.prerelease.length;
+      }
+
+      function createSnapshotStableLabel(version) {
+        var label = 'v' + version.replace(/.$/, 'x') + '-snapshot';
+
+        return label;
+      }
    }
  };
 };
@@ -17,9 +17,9 @@ module.exports = function debugDeployment(getVersion) {
      '../angular-sanitize.js',
      '../angular-touch.js',
      '../angular-animate.js',
-      'components/marked-' + getVersion('marked', 'node_modules', 'package.json') + '/lib/marked.js',
+      'components/marked-' + getVersion('marked') + '/lib/marked.js',
      'js/angular-bootstrap/dropdown-toggle.js',
-      'components/lunr.js-' + getVersion('lunr.js') + '/lunr.js',
+      'components/lunr-' + getVersion('lunr') + '/lunr.js',
      'components/google-code-prettify-' + getVersion('google-code-prettify') + '/src/prettify.js',
      'components/google-code-prettify-' + getVersion('google-code-prettify') + '/src/lang-css.js',
      'js/current-version-data.js',
@@ -30,8 +30,8 @@ module.exports = function debugDeployment(getVersion) {
    ],
    stylesheets: [
      'components/bootstrap-' + getVersion('bootstrap') + '/css/bootstrap.css',
-      'components/open-sans-fontface-' + getVersion('open-sans-fontface') + '/open-sans.css',
      'css/prettify-theme.css',
+      'css/angular-topnav.css',
      'css/docs.css',
      'css/animations.css'
    ]
@@ -17,9 +17,9 @@ module.exports = function defaultDeployment(getVersion) {
      '../angular-sanitize.min.js',
      '../angular-touch.min.js',
      '../angular-animate.min.js',
-      'components/marked-' + getVersion('marked', 'node_modules', 'package.json') + '/lib/marked.js',
+      'components/marked-' + getVersion('marked') + '/marked.min.js',
      'js/angular-bootstrap/dropdown-toggle.min.js',
-      'components/lunr.js-' + getVersion('lunr.js') + '/lunr.min.js',
+      'components/lunr-' + getVersion('lunr') + '/lunr.min.js',
      'components/google-code-prettify-' + getVersion('google-code-prettify') + '/src/prettify.js',
      'components/google-code-prettify-' + getVersion('google-code-prettify') + '/src/lang-css.js',
      'js/current-version-data.js',
@@ -30,8 +30,8 @@ module.exports = function defaultDeployment(getVersion) {
    ],
    stylesheets: [
      'components/bootstrap-' + getVersion('bootstrap') + '/css/bootstrap.min.css',
-      'components/open-sans-fontface-' + getVersion('open-sans-fontface') + '/open-sans.css',
      'css/prettify-theme.css',
+      'css/angular-topnav.css',
      'css/docs.css',
      'css/animations.css'
    ]
@@ -21,9 +21,9 @@ module.exports = function jqueryDeployment(getVersion) {
      '../angular-sanitize.min.js',
      '../angular-touch.min.js',
      '../angular-animate.min.js',
-      'components/marked-' + getVersion('marked', 'node_modules', 'package.json') + '/lib/marked.js',
+      'components/marked-' + getVersion('marked') + '/lib/marked.js',
      'js/angular-bootstrap/dropdown-toggle.min.js',
-      'components/lunr.js-' + getVersion('lunr.js') + '/lunr.min.js',
+      'components/lunr-' + getVersion('lunr') + '/lunr.min.js',
      'components/google-code-prettify-' + getVersion('google-code-prettify') + '/src/prettify.js',
      'components/google-code-prettify-' + getVersion('google-code-prettify') + '/src/lang-css.js',
      'js/current-version-data.js',
@@ -34,8 +34,8 @@ module.exports = function jqueryDeployment(getVersion) {
    ],
    stylesheets: [
      'components/bootstrap-' + getVersion('bootstrap') + '/css/bootstrap.min.css',
-      'components/open-sans-fontface-' + getVersion('open-sans-fontface') + '/open-sans.css',
      'css/prettify-theme.css',
+      'css/angular-topnav.css',
      'css/docs.css',
      'css/animations.css'
    ]
@@ -7,24 +7,25 @@ var angularCodeUrl = '//code.angularjs.org/';

 var cdnUrl = googleCdnUrl + versionInfo.cdnVersion;

-// The plnkr examples must use the code.angularjs.org repo for the snapshot,
-// and the cdn for the tagged version and, if the build is not tagged, the currentVersion.
-//
-// The currentVersion may not be available on the cdn (e.g. if built locally, or hasn't been pushed
-// yet). This will lead to a 404, but this is preferable to loading a version with which the example
-// might not work (possibly in subtle ways).
-var examplesCdnUrl = versionInfo.currentVersion.isSnapshot ?
-  (angularCodeUrl + 'snapshot') :
-  (googleCdnUrl + (versionInfo.currentVersion.version || versionInfo.currentVersion));
+// The "examplesDependencyPath" here applies to the examples when they are opened in plnkr.co.
+// The embedded examples instead always include the files from the *default* deployment,
+// to ensure that the source files are always available.
+// The plnkr examples must always use the code.angularjs.org source files.
+// We cannot rely on the CDN files here, because they are not deployed by the time
+// docs.angularjs.org and code.angularjs.org need them.
+var versionPath = versionInfo.currentVersion.isSnapshot ?
+  'snapshot' :
+  (versionInfo.currentVersion.version || versionInfo.currentVersion.version);
+var examplesDependencyPath = angularCodeUrl + versionPath + '/';

 module.exports = function productionDeployment(getVersion) {
  return {
    name: 'production',
    examples: {
      commonFiles: {
-        scripts: [examplesCdnUrl + '/angular.min.js']
+        scripts: [examplesDependencyPath + 'angular.min.js']
      },
-      dependencyPath: examplesCdnUrl + '/'
+      dependencyPath: examplesDependencyPath
    },
    scripts: [
      cdnUrl + '/angular.min.js',
@@ -34,9 +35,9 @@ module.exports = function productionDeployment(getVersion) {
      cdnUrl + '/angular-sanitize.min.js',
      cdnUrl + '/angular-touch.min.js',
      cdnUrl + '/angular-animate.min.js',
-      'components/marked-' + getVersion('marked', 'node_modules', 'package.json') + '/lib/marked.js',
+      'components/marked-' + getVersion('marked') + '/marked.min.js',
      'js/angular-bootstrap/dropdown-toggle.min.js',
-      'components/lunr.js-' + getVersion('lunr.js') + '/lunr.min.js',
+      'components/lunr-' + getVersion('lunr') + '/lunr.min.js',
      'components/google-code-prettify-' + getVersion('google-code-prettify') + '/src/prettify.js',
      'components/google-code-prettify-' + getVersion('google-code-prettify') + '/src/lang-css.js',
      'js/current-version-data.js',
@@ -47,8 +48,8 @@ module.exports = function productionDeployment(getVersion) {
    ],
    stylesheets: [
      'components/bootstrap-' + getVersion('bootstrap') + '/css/bootstrap.min.css',
-      'components/open-sans-fontface-' + getVersion('open-sans-fontface') + '/open-sans.css',
      'css/prettify-theme.css',
+      'css/angular-topnav.css',
      'css/docs.css',
      'css/animations.css'
    ]
@@ -10,8 +10,8 @@ module.exports = function getVersion(readFilesProcessor) {
  var basePath = readFilesProcessor.basePath;

  return function(component, sourceFolder, packageFile) {
-    sourceFolder = path.resolve(basePath, sourceFolder || 'docs/bower_components');
-    packageFile = packageFile || 'bower.json';
+    sourceFolder = path.resolve(basePath, sourceFolder || 'node_modules');
+    packageFile = packageFile || 'package.json';
    return require(path.join(sourceFolder,component,packageFile)).version;
  };
 };
@@ -9,7 +9,7 @@
    <pre class="minerr-errmsg" error-display="{$ doc.formattedErrorMessage $}">{$ doc.formattedErrorMessage $}</pre>
 </div>

-<h2>Description</h2>
+<h2 id="description">Description</h2>
 <div class="description">
  {$ doc.description | marked $}
 </div>
@@ -68,101 +68,96 @@
    })();
  </script>
 </head>
-<body>
+<body class="homepage">
  <div id="wrapper">
-    <header scroll-y-offset-element class="header header-fixed">
-      <section class="navbar navbar-inverse docs-navbar-primary" ng-controller="DocsSearchCtrl">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-9 header-branding">
-              <a class="brand navbar-brand" href="http://angularjs.org">
-                <img width="117" height="30" class="logo" alt="Link to Angular JS Homepage" ng-src="img/angularjs-for-header-only.svg">
-              </a>
-              <ul class="nav navbar-nav">
-                <li class="divider-vertical"></li>
-                <li><a href="http://angularjs.org"><i class="icon-home icon-white"></i> Home</a></li>
-                <li class="divider-vertical"></li>
-                <li class="dropdown">
-                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                    <i class="icon-eye-open icon-white"></i> Learn <b class="caret"></b>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="disabled"><a href="http://angularjs.org/">Why AngularJS?</a></li>
-                    <li><a href="http://www.youtube.com/user/angularjs">Watch</a></li>
-                    <li><a href="tutorial">Tutorial</a></li>
-                    <li><a href="https://www.madewithangular.com/">Case Studies</a></li>
-                    <li><a href="https://github.com/angular/angular-seed">Seed App project template</a></li>
-                    <li><a href="misc/faq">FAQ</a></li>
-                  </ul>
-                </li>
-                <li class="divider-vertical"></li>
-                <li class="dropdown active">
-                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                    <i class="icon-book icon-white"></i> Develop <b class="caret"></b>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li><a href="tutorial">Tutorial</a></li>
-                    <li><a href="guide">Developer Guide</a></li>
-                    <li><a href="api">API Reference</a></li>
-                    <li><a href="error">Error Reference</a></li>
-                    <li><a href="misc/contribute">Contribute</a></li>
-                    <li><a href="http://code.angularjs.org/">Download</a></li>
-                  </ul>
-                </li>
-                <li class="divider-vertical"></li>
-                <li class="dropdown">
-                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                    <i class="icon-comment icon-white"></i> Discuss <b class="caret"></b>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li><a href="http://blog.angularjs.org">Blog</a></li>
-                    <li><a href="http://groups.google.com/group/angular">Mailing List</a></li>
-                    <li><a href="http://webchat.freenode.net/?channels=angularjs&uio=d4">Chat Room</a></li>
-                    <li class="divider"></li>
-                    <li><a href="https://twitter.com/#!/angularjs">Twitter</a></li>
-                    <li><a href="https://plus.google.com/110323587230527980117">Google+</a></li>
-                    <li class="divider"></li>
-                    <li><a href="https://github.com/angular/angular.js">GitHub</a></li>
-                    <li><a href="https://github.com/angular/angular.js/issues">Issue Tracker</a></li>
-                  </ul>
-                </li>
-                <li class="divider-vertical"></li>
-              </ul>
-            </div>
-            <form ng-class="{focus:focus}" class="navbar-search col-md-3 docs-search" ng-submit="submit()">
-              <span class="glyphicon glyphicon-search search-icon"></span>
-              <input type="text"
-                     name="as_q"
-                     class="search-query"
-                     placeholder="Click or press / to search"
-                     ng-focus="focus=true"
-                     ng-blur="focus=false"
-                     ng-change="search(q)"
-                     ng-model="q"
-                     docs-search-input
-                     autocomplete="off" />
-            </form>
-          </div>
-        </div>
-        <div class="search-results-container" ng-show="hasResults">
+    <header class="header">
+      <nav id="navbar-main" class="navbar navbar-fixed-top">
+        <div class="navbar-inner" ng-controller="DocsSearchCtrl">
          <div class="container">
-            <div class="search-results-frame">
-              <div ng-repeat="(key, value) in results track by key" class="search-results-group" ng-class="colClassName + ' col-group-' + key" ng-show="value.length > 0">
-                <h4 class="search-results-group-heading">{{ key }}</h4>
-                <ul class="search-results">
-                  <!-- Do not insert a line break between li and a. Chrome will insert an actual line-break, which breaks the list item view.
-                  TODO: use a html minifier instead -->
-                  <li ng-repeat="item in value" class="search-result"><a ng-click="hideResults()" ng-href="{{ item.path }}">{{ item.name }}</a></li>
+            <h1 class="brand"><a href="http://angularjs.org"><img width="117" height="30" src="img/angularjs-for-header-only.svg" alt="AngularJS"></a></h1>
+
+            <form class="navbar-search" ng-submit="submit()">
+              <i class="glyphicon glyphicon-search search-icon"></i>
+              <input type="text" name="as_q" class="search-query" placeholder="SEARCH"
+                 ng-focus="focus=true"
+                 ng-blur="focus=false"
+                 ng-change="search(q)"
+                 ng-model="q"
+                 ng-model-options="{debounce: 150}"
+                 docs-search-input
+                 autocomplete="off">
+            </form>
+
+            <ul class="nav navbar-nav">
+              <li class="dropdown" uib-dropdown>
+                <a href="#" class="dropdown-toggle" uib-dropdown-toggle>Learn</a>
+                <ul class="dropdown-menu" uib-dropdown-menu>
+                  <li><a href="tutorial">Tutorial</a></li>
+                  <li><a href="misc/faq">FAQ</a></li>
+                  <li><a href="https://www.youtube.com/user/angularjs">Videos</a></li>
+                  <li><a href="http://angular.codeschool.com/">Free Course</a></li>
+                  <li><a href="https://www.madewithangular.com/">Case Studies</a></li>
                </ul>
+              </li>
+              <li class="dropdown" uib-dropdown>
+                <a href="#" class="dropdown-toggle" uib-dropdown-toggle>Develop</a>
+                <ul class="dropdown-menu" uib-dropdown-menu>
+                  <li><a href="guide">Developer Guide</a></li>
+                  <li><a href="api">API Reference</a></li>
+                  <li><a href="error">Error Reference</a></li>
+                  <li><a href="misc/contribute">Contribute</a></li>
+                  <li><a href="https://github.com/angular/angular-seed">Seed App project template</a></li>
+                  <li><a href="https://github.com/angular/angular.js">GitHub</a></li>
+                  <li><a href="https://github.com/angular/angular.js/blob/master/CHANGELOG.md">Changelog</a></li>
+                  <li><a href="http://code.angularjs.org/">Download</a></li>
+                </ul>
+              </li>
+              <li class="dropdown" uib-dropdown>
+                <a href="#" class="dropdown-toggle" uib-dropdown-toggle>Discuss</a>
+                <ul class="dropdown-menu" uib-dropdown-menu>
+                  <li><a href="http://blog.angularjs.org">Blog</a></li>
+                  <li><a href="https://twitter.com/angular">Twitter</a></li>
+                  <li><a href="https://plus.google.com/110323587230527980117">Google+</a></li>
+                  <li><a href="https://github.com/angular/angular.js/issues">Feature &amp; Bug Tracker</a></li>
+                  <li><a href="http://groups.google.com/group/angular">Mailing List</a></li>
+                  <li><a href="http://webchat.freenode.net/?channels=angularjs&uio=d4">IRC</a></li>
+                  <li><a href="https://gitter.im/angular/angular.js">Gitter</a></li>
+                </ul>
+              </li>
+            </ul>
+
+          </div>
+          <div class="search-results-container" ng-show="hasResults">
+            <div class="container">
+              <div class="search-results-frame">
+                <div ng-repeat="(key, value) in results track by key" class="search-results-group" ng-class="colClassName + ' col-group-' + key" ng-show="value.length > 0">
+                  <h4 class="search-results-group-heading">{{ key }}</h4>
+                  <ul class="search-results">
+                    <li ng-repeat="item in value" class="search-result"><a ng-click="handleResultClicked($event)" ng-href="{{ item.path }}">{{ item.name }}</a></li>
+                  </ul>
+                </div>
              </div>
+              <a href="" ng-click="hideResults()" class="search-close">
+                <span class="glyphicon glyphicon-remove search-close-icon"></span> Close
+              </a>
            </div>
-            <a href="" ng-click="hideResults()" class="search-close">
-              <span class="glyphicon glyphicon-remove search-close-icon"></span> Close
-            </a>
          </div>
        </div>
-      </section>
-      <section class="sup-header">
+      </nav>
+      <nav id="navbar-notice" class="navbar navbar-fixed-top">
+        <div class="navbar-inner">
+          <div class="container">
+            <p class="site-notice visible-phone">
+              This site refers to AngularJS (v1.x). <a href="https://angular.io/">Go to the latest Angular</a>.
+            </p>
+            <p class="site-notice visible-desktop">
+              This site and all of its contents are referring to AngularJS (version 1.x),
+              if you are looking for the latest Angular, please visit <a href="https://angular.io/">angular.io</a>.
+            </p>
+          </div>
+        </div>
+      </nav>
+      <nav id="navbar-sub" class="sup-header navbar navbar-fixed-top" scroll-y-offset-element>
        <div class="container main-grid main-header-grid">
          <div class="grid-left">
            <version-picker></version-picker>
@@ -176,7 +171,7 @@
            </ul>
          </div>
        </div>
-      </section>
+      </nav>
    </header>

    <section role="main" class="container main-body">
@@ -204,7 +199,7 @@
        </div>
        <div class="grid-right">
          <div id="loading" ng-show="loading">Loading...</div>
-          <div ng-hide="loading" ng-include="partialPath" autoscroll></div>
+          <div ng-hide="loading" ng-include="partialPath" toc-collector autoscroll></div>
        </div>
      </div>
    </section>
@@ -214,7 +209,7 @@
        <p class="pull-right"><a back-to-top>Back to top</a></p>

        <p>
-          Super-powered by Google ©2010-2016
+          Super-powered by Google ©2010-2017
          (<a id="version"
               ng-href="https://github.com/angular/angular.js/blob/master/CHANGELOG.md#{{versionNumber}}"
               ng-bind-template="v{{version}}" title="Changelog of this version of Angular JS">
@@ -23,6 +23,7 @@

 {% block description %}
 <div class="api-profile-description">
+  <h2 id="overview">Overview</h2>
  {$ doc.description | marked $}
 </div>
 {% endblock %}
@@ -51,7 +52,7 @@

  {% block examples %}
  {%- if doc.examples %}
-  <h2 id="example">Examples</h2>
+  <h2 id="examples">{$ "Examples" if doc.examples | length > 1 else "Example" $}</h2>
  {%- for example in doc.examples -%}
    {$ example | marked $}
  {%- endfor -%}
@@ -2,7 +2,7 @@
 {% extends "api/api.template.html" %}

 {% block additional %}
-  <h2>Directive Info</h2>
+  <h2 id="{$ doc.name $}-info">Directive Info</h2>
  <ul>
    {% if doc.scope %}<li>This directive creates new scope.</li>{% endif %}
    <li>This directive executes at priority level {$ doc.priority $}.</li>
@@ -18,9 +18,6 @@
    <ul>
    {% if doc.restrict.element %}
      <li>as element:
-      {% if doc.name.indexOf('ng') == 0 -%}
-      (This directive can be used as custom element, but be aware of <a href="guide/ie">IE restrictions</a>).
-      {%- endif %}
      {% code %}
      <{$ doc.name | dashCase $}
        {%- for param in doc.params %}
@@ -32,10 +29,23 @@
      </li>
    {% endif -%}

+
+    {% set hasNameAsParam = false %}
+
+    {# when a directive's name is not a parameter (i.e. doesn't take a value),
+      add the directive name to the list of attributes and/or css classes #}
+
+    {%- for param in doc.params %}
+    {% set hasNameAsParam = true if param.name === doc.name else hasNameAsParam %}
+    {%- endfor %}
+
    {%- if doc.restrict.attribute -%}
      <li>as attribute:
        {% code %}
        <{$ doc.element $}
+          {%- if not hasNameAsParam %}
+          {$ lib.directiveParam(doc.name, {}, '', '') $}
+          {%- endif -%}
          {%- for param in doc.params %}
          {$ lib.directiveParam(param.name, param.type, '="', '"') $}
          {%- endfor %}>
@@ -46,10 +56,14 @@
    {% endif -%}

    {%- if doc.restrict.cssClass -%}
+
      <li>as CSS class:
        {% code %}
        {% set sep = joiner(' ') %}
        <{$ doc.element $} class="
+        {%- if not hasNameAsParam -%}
+          {$ sep() $}{$ lib.directiveParam(doc.name, {}, '', '') $}
+        {%- endif -%}
        {%- for param in doc.params -%}
          {$ sep() $}{$ lib.directiveParam(param.name, param.type, ': ', ';') $}
        {%- endfor %}"> ... </{$ doc.element $}>
@@ -61,12 +75,12 @@
  </div>
  {% endblock -%}

+  {% include "lib/params.template.html" %}
+  {% include "lib/events.template.html" %}
+
  {%- if doc.animations %}
  <h2 id="animations">Animations</h2>
  {$ doc.animations | marked $}
  {$ 'module:ngAnimate.$animate' | link('Click here', doc) $} to learn more about the steps involved in the animation.
  {%- endif -%}
-
-  {% include "lib/params.template.html" %}
-  {% include "lib/events.template.html" %}
 {% endblock %}
@@ -2,7 +2,7 @@
 {% extends "api/api.template.html" %}

 {% block additional %}
-  <h2>Usage</h2>
+  <h2 id="usage">Usage</h2>
  <h3>In HTML Template Binding</h3>
  {% if doc.usage %}
    {$ doc.usage | code $}
@@ -8,7 +8,7 @@

 {$ x.deprecatedBlock(doc) $}

-<h2>Installation</h2>
+<h2 id="module-installation">Installation</h2>
 {% if doc.installation or doc.installation == '' %}
  {$ doc.installation | marked $}
 {% else %}
@@ -76,7 +76,7 @@

 {% if doc.componentGroups.length %}
 <div class="component-breakdown">
-  <h2>Module Components</h2>
+  <h2 id="module-components">Module Components</h2>
  {% for componentGroup in doc.componentGroups %}
  <div>
    <h3 class="component-heading" id="{$ componentGroup.groupType | dashCase $}">{$ componentGroup.groupType | title $}</h3>
@@ -98,7 +98,7 @@
 {% endif %}

 {% if doc.usage %}
-  <h2>Usage</h2>
+  <h2 id="module-usage">Usage</h2>
  {$ doc.usage | marked $}
 {% endif %}

@@ -2,11 +2,11 @@
 {% import "lib/deprecated.html" as x -%}

 {%- if doc.events %}
-<h2>Events</h2>
+<h2 id="events">Events</h2>
 <ul class="events">
  {%- for event in doc.events %}
  <li id="{$ event.name $}">
-    <h3>{$ event.name $}</h3>
+    <h3 id="event-{$ event.name $}">{$ event.name $}</h3>
    <div>{$ event.description | marked $}</div>

    {$ x.deprecatedBlock(event) $}
@@ -27,7 +27,7 @@
    {% endif -%}
    {%- if event.params %}
    <section class="api-section">
-      <h3>Parameters</h3>
+      <h4>Parameters</h4>
      {$ lib.paramTable(event.params) $}
    </section>
    {%- endif -%}
@@ -2,11 +2,11 @@
 {% import "lib/deprecated.html" as x -%}

 {%- if doc.methods %}
-<h2>Methods</h2>
+<h2 id="{$ doc.name $}-methods">Methods</h2>
 <ul class="methods">
  {%- for method in doc.methods %}
-  <li id="{$ method.name $}">
-    <h3>{$ lib.functionSyntax(method) $}</h3>
+  <li>
+    <h3 id="{$ method.name $}">{$ lib.functionSyntax(method) $}</h3>
    <div>{$ method.description | marked $}</div>

    {$ x.deprecatedBlock(method) $}
@@ -27,7 +27,7 @@
    {% endif %}

    {%- if method.examples %}
-    <h4 id="{$ doc.name $}.{$ method.name $}-examples">Examples</h4>
+    <h4 id="{$ doc.name $}.{$ method.name $}-examples">{$ "Examples" if method.examples | length > 1 else "Example" $}</h4>
    {%- for example in method.examples -%}
      {$ example | marked $}
    {%- endfor -%}
@@ -1,7 +1,7 @@
 {% import "lib/macros.html" as lib -%}
 {%- if doc.params %}
 <section class="api-section">
-  <h3>Arguments</h3>
+  <h3 id="{$ doc.name $}-arguments">Arguments</h3>
 {$ lib.paramTable(doc.params) $}
 </section>
 {%- endif -%}
@@ -2,11 +2,11 @@
 {% import "lib/deprecated.html" as x -%}

 {%- if doc.properties %}
-<h2>Properties</h2>
+<h2 id="{$ doc.name $}-properties">Properties</h2>
 <ul class="properties">
  {%- for property in doc.properties %}
-  <li id="{$ property.name $}">
-    <h3>{$ property.name | code $}</h3>
+  <li>
+    <h3 id="{$ property.name $}">{$ property.name | code $}</h3>
    {$ lib.typeInfo(property) $}
    {$ x.deprecatedBlock(property) $}
  </li>
@@ -1,5 +1,5 @@
 {% import "lib/macros.html" as lib -%}
 {% if doc.returns -%}
-<h3>Returns</h3>
+<h3 id="{$ doc.name $}-returns">Returns</h3>
 {$ lib.typeInfo(doc.returns) $}
 {%- endif %}
@@ -1,12 +0,0 @@
-@ngdoc error
-@name $animate:nocb
-@fullName Do not pass a callback to animate methods
-@description
-
-Since Angular 1.3, the methods of {@link ng.$animate} do not accept a callback as the last parameter.
-Instead, they return a promise to which you can attach `then` handlers to be run when the animation completes.
-
-If you are getting this error then you need to update your code to use the promise-based API.
-
-See https://github.com/angular/angular.js/commit/bf0f5502b1bbfddc5cdd2f138efd9188b8c652a9 for information about
-the change to the animation API and the changes you need to make.
@@ -0,0 +1,8 @@
+@ngdoc error
+@name $animate:nongcls
+@fullName `ng-animate` class not allowed
+@description
+
+This error occurs, when trying to set `$animateProvider.classNameFilter()` to a RegExp containing
+the reserved `ng-animate` class. Since `.ng-animate` will be added/removed by `$animate` itself,
+using it as part of the `classNameFilter` RegExp is not allowed.
@@ -5,7 +5,7 @@

 This error occurs when the restrict property of a directive is not valid.

-The directive restrict property must be a string including one of more of the following characters:
+The directive restrict property must be a string including one or more of the following characters:
 * E (element)
 * A (attribute)
 * C (class)
@@ -15,4 +15,4 @@ For example:
 ```javascript
 restrict: 'E'
 restrict: 'EAC'
-```
+```
@@ -0,0 +1,8 @@
+@ngdoc error
+@name $compile:missingattr
+@fullName Missing required attribute
+@description
+
+This error may occur only when `$compileProvider.strictComponentBindingsEnabled` is set to `true`.
+Then all attributes mentioned in `bindings` without `?` must be set. If one or more aren't set,
+the first one will throw an error.
@@ -0,0 +1,38 @@
+@ngdoc error
+@name $compile:noslot
+@fullName No matching slot in parent directive
+@description
+
+This error occurs when declaring a specific slot in a {@link ng.ngTransclude `ngTransclude`} 
+which does not map to a specific slot defined in the transclude property of the directive.
+
+In this example the template has declared a slot missing from the transclude definition.
+This example will generate a noslot error.
+```js
+var componentConfig = {
+  template: '<div>' +
+                '<div ng-transclude="slotProvided"></div>' +
+                '<div ng-transclude="noSlotProvided"></div>' +
+            '</div>',
+  transclude: {
+  	// The key value pairs here are considered "slots" that are provided for components to slot into.
+    slotProvided: 'slottedComponent', // mandatory transclusion
+    // There is no slot provided here for the transclude 'noSlotProvided' declared in the above template.
+  }
+};
+```
+
+If we make the following change we will no longer get the noslot error.
+```js
+var componentConfig = {
+  template: '<div>' +
+                '<div ng-transclude="slotProvided"></div>' +
+                '<div ng-transclude="noSlotProvided"></div>' +
+            '</div>',
+  transclude: {
+    slotProvided: 'slottedComponent',
+    noSlotProvided: 'otherComponent' // now it is declared and the error should cease
+  }
+};
+
+```
@@ -0,0 +1,14 @@
+@ngdoc error
+@name $http:baddata
+@fullName Bad JSON Data
+@description
+
+The default {@link ng.$http#default-transformations `transformResponse`} will try to parse the
+response as JSON if the `Content-Type` header is `application/json`, or the response looks like a
+valid JSON-stringified object or array.
+This error occurs when that data is not a valid JSON object.
+
+To resolve this error, make sure you pass valid JSON data to `transformResponse`. If the response
+data looks like JSON, but has a different `Content-Type` header, you must
+{@link ng.$http#overriding-the-default-transformations-per-request implement your own response
+transformer on a per request basis}, or {@link ng.$http#default-transformations modify the default `$http` responseTransform}.
@@ -0,0 +1,11 @@
+@ngdoc error
+@name $sanitize:elclob
+@fullName Failed to sanitize html because the element is clobbered
+@description
+
+This error occurs when `$sanitize` sanitizer is unable to traverse the HTML because one or more of the elements in the
+HTML have been "clobbered". This could be a sign that the payload contains code attempting to cause a DoS attack on the
+browser.
+
+Typically clobbering breaks the `nextSibling` property on an element so that it points to one of its child nodes. This
+makes it impossible to walk the HTML tree without getting stuck in an infinite loop, which causes the browser to freeze.
@@ -0,0 +1,7 @@
+@ngdoc error
+@name ng:aobj
+@fullName Invalid Argument
+@description
+
+The argument passed should be an object. Check the value that was passed to the function where
+this error was thrown.
@@ -232,27 +232,27 @@ than the hash fragment was changed.
 ### Example

 ```js
-it('should show example', inject(
-  function($locationProvider) {
+it('should show example', function() {
+  module(function($locationProvider) {
    $locationProvider.html5Mode(false);
    $locationProvider.hashPrefix('!');
-  },
-  function($location) {
+  });
+  inject(function($location) {
    // open http://example.com/base/index.html#!/a
-    $location.absUrl() === 'http://example.com/base/index.html#!/a'
-    $location.path() === '/a'
+    expect($location.absUrl()).toBe('http://example.com/base/index.html#!/a');
+    expect($location.path()).toBe('/a');

-    $location.path('/foo')
-    $location.absUrl() === 'http://example.com/base/index.html#!/foo'
+    $location.path('/foo');
+    expect($location.absUrl()).toBe('http://example.com/base/index.html#!/foo');

-    $location.search() === {}
+    expect($location.search()).toEqual({});
    $location.search({a: 'b', c: true});
-    $location.absUrl() === 'http://example.com/base/index.html#!/foo?a=b&c'
+    expect($location.absUrl()).toBe('http://example.com/base/index.html#!/foo?a=b&c');

    $location.path('/new').search('x=y');
-    $location.absUrl() === 'http://example.com/base/index.html#!/new?x=y'
-  }
-));
+    expect($location.absUrl()).toBe('http://example.com/base/index.html#!/new?x=y');
+  });
+});
 ```

 ## HTML5 mode
@@ -274,40 +274,50 @@ and updates the url in a way that never performs a full page reload.
 ### Example

 ```js
-it('should show example', inject(
-  function($locationProvider) {
+it('should show example', function() {
+  module(function($locationProvider) {
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');
-  },
-  function($location) {
+  });
+  inject(function($location) {
    // in browser with HTML5 history support:
    // open http://example.com/#!/a -> rewrite to http://example.com/a
    // (replacing the http://example.com/#!/a history record)
-    $location.path() === '/a'
+    expect($location.path()).toBe('/a');

    $location.path('/foo');
-    $location.absUrl() === 'http://example.com/foo'
+    expect($location.absUrl()).toBe('http://example.com/foo');

-    $location.search() === {}
+    expect($location.search()).toEqual({});
    $location.search({a: 'b', c: true});
-    $location.absUrl() === 'http://example.com/foo?a=b&c'
+    expect($location.absUrl()).toBe('http://example.com/foo?a=b&c');

    $location.path('/new').search('x=y');
-    $location.url() === 'new?x=y'
-    $location.absUrl() === 'http://example.com/new?x=y'
+    expect($location.url()).toBe('/new?x=y');
+    expect($location.absUrl()).toBe('http://example.com/new?x=y');
+  });
+});

+it('should show example (when browser doesn\'t support HTML5 mode', function() {
+  module(function($provide, $locationProvider) {
+    $locationProvider.html5Mode(true);
+    $locationProvider.hashPrefix('!');
+    $provide.value('$sniffer', {history: false});
+  });
+  inject(initBrowser({ url: 'http://example.com/new?x=y', basePath: '/' }),
+    function($location) {
    // in browser without html5 history support:
    // open http://example.com/new?x=y -> redirect to http://example.com/#!/new?x=y
    // (again replacing the http://example.com/new?x=y history item)
-    $location.path() === '/new'
-    $location.search() === {x: 'y'}
+    expect($location.path()).toBe('/new');
+    expect($location.search()).toEqual({x: 'y'});

    $location.path('/foo/bar');
-    $location.path() === '/foo/bar'
-    $location.url() === '/foo/bar?x=y'
-    $location.absUrl() === 'http://example.com/#!/foo/bar?x=y'
-  }
-));
+    expect($location.path()).toBe('/foo/bar');
+    expect($location.url()).toBe('/foo/bar?x=y');
+    expect($location.absUrl()).toBe('http://example.com/#!/foo/bar?x=y');
+  });
+});
 ```

 ### Fallback for legacy browsers
@@ -555,7 +565,7 @@ In these examples we use `<base href="/base/index.html" />`. The inputs represen

 </example>

-####Browser in HTML5 Fallback mode (Hashbang mode)
+#### Browser in HTML5 Fallback mode (Hashbang mode)
 <example module="hashbang-mode" name="location-hashbang-mode">
  <file name="index.html">
    <div ng-controller="LocationController">
@@ -6,20 +6,26 @@

 # Animations

-AngularJS provides animation hooks for common directives such as `ngRepeat`, `ngSwitch`, and `ngView`, as well as custom directives
-via the `$animate` service. These animation hooks are set in place to trigger animations during the life cycle of various directives and when
-triggered, will attempt to perform a CSS Transition, CSS Keyframe Animation or a JavaScript callback Animation (depending on if an animation is
-placed on the given directive). Animations can be placed using vanilla CSS by following the naming conventions set in place by AngularJS
-or with JavaScript code when it's defined as a factory.
+AngularJS provides animation hooks for common directives such as
+{@link ng.directive:ngRepeat ngRepeat}, {@link ng.directive:ngSwitch ngSwitch}, and
+{@link ngRoute.directive:ngView ngView}, as well as custom directives via the `$animate` service.
+These animation hooks are set in place to trigger animations during the life cycle of various
+directives and when triggered, will attempt to perform a CSS Transition, CSS Keyframe Animation or a
+JavaScript callback Animation (depending on whether an animation is placed on the given directive).
+Animations can be placed using vanilla CSS by following the naming conventions set in place by
+AngularJS or with JavaScript code, defined as a factory.

 <div class="alert alert-info">
-  Note that we have used non-prefixed CSS transition properties in our examples as the major browsers now support non-prefixed
-  properties. If you intend to support older browsers or certain mobile browsers then you will need to include prefixed
-  versions of the transition properties.  Take a look at http://caniuse.com/#feat=css-transitions for what browsers require prefixes,
-  and https://github.com/postcss/autoprefixer for a tool that can automatically generate the prefixes for you.
+  Note that we have used non-prefixed CSS transition properties in our examples as the major
+  browsers now support non-prefixed properties. If you intend to support older browsers or certain
+  mobile browsers then you will need to include prefixed versions of the transition properties. Take
+  a look at http://caniuse.com/#feat=css-transitions for what browsers require prefixes, and
+  https://github.com/postcss/autoprefixer for a tool that can automatically generate the prefixes
+  for you.
 </div>

-Animations are not available unless you include the {@link ngAnimate `ngAnimate` module} as a dependency within your application.
+Animations are not available unless you include the {@link ngAnimate `ngAnimate` module} as a
+dependency of your application.

 Below is a quick example of animations being enabled for `ngShow` and `ngHide`:

@@ -59,8 +65,9 @@ You may also want to setup a separate CSS file for defining CSS-based animations

 ## How they work

-Animations in AngularJS are completely based on CSS classes. As long as you have a CSS class attached to a HTML element within
-your website, you can apply animations to it. Lets say for example that we have an HTML template with a repeater in it like so:
+Animations in AngularJS are completely based on CSS classes. As long as you have a CSS class
+attached to a HTML element within your application, you can apply animations to it. Lets say for
+example that we have an HTML template with a repeater like so:

 ```html
 <div ng-repeat="item in items" class="repeated-item">
@@ -68,22 +75,21 @@ your website, you can apply animations to it. Lets say for example that we have
 </div>
 ```

-As you can see, the `.repeated-item` class is present on the element that will be repeated and this class will be
-used as a reference within our application's CSS and/or JavaScript animation code to tell AngularJS to perform an animation.
+As you can see, the `repeated-item` class is present on the element that will be repeated and this
+class will be used as a reference within our application's CSS and/or JavaScript animation code to
+tell AngularJS to perform an animation.

-As ngRepeat does its thing, each time a new item is added into the list, ngRepeat will add
-a `ng-enter` class name to the element that is being added. When removed it will apply a `ng-leave` class name and when moved around
-it will apply a `ng-move` class name.
+As `ngRepeat` does its thing, each time a new item is added into the list, `ngRepeat` will add an
+`ng-enter` class to the element that is being added. When removed it will apply an `ng-leave` class
+and when moved around it will apply an `ng-move` class.

-Taking a look at the following CSS code, we can see some transition and keyframe animation code set for each of those events that
-occur when ngRepeat triggers them:
+Taking a look at the following CSS code, we can see some transition and keyframe animation code set
+up for each of those events that occur when `ngRepeat` triggers them:

 ```css
 /*
-  We're using CSS transitions for when
-  the enter and move events are triggered
-  for the element that has the .repeated-item
-  class
+  We are using CSS transitions for when the enter and move events
+  are triggered for the element that has the `repeated-item` class
 */
 .repeated-item.ng-enter, .repeated-item.ng-move {
  transition: all 0.5s linear;
@@ -91,10 +97,8 @@ occur when ngRepeat triggers them:
 }

 /*
- The ng-enter-active and ng-move-active
- are where the transition destination properties
- are set so that the animation knows what to
- animate.
+  `.ng-enter-active` and `.ng-move-active` are where the transition destination
+  properties are set so that the animation knows what to animate
 */
 .repeated-item.ng-enter.ng-enter-active,
 .repeated-item.ng-move.ng-move-active {
@@ -102,148 +106,149 @@ occur when ngRepeat triggers them:
 }

 /*
-  We're using CSS keyframe animations for when
-  the leave event is triggered for the element
-  that has the .repeated-item class
+  We are using CSS keyframe animations for when the `leave` event
+  is triggered for the element that has the `repeated-item` class
 */
 .repeated-item.ng-leave {
  animation: 0.5s my_animation;
 }

@keyframes my_animation {
-  from { opacity:1; }
-  to { opacity:0; }
+  from { opacity: 1; }
+  to   { opacity: 0; }
 }
-
 ```

-The same approach to animation can be used using JavaScript code (**jQuery is used within to perform animations**):
+The same approach to animation can be used using JavaScript code
+(**for simplicity, we rely on jQuery to perform animations here**):

 ```js
 myModule.animation('.repeated-item', function() {
  return {
-    enter : function(element, done) {
-      element.css('opacity',0);
-      jQuery(element).animate({
-        opacity: 1
-      }, done);
-
-      // optional onDone or onCancel callback
-      // function to handle any post-animation
-      // cleanup operations
-      return function(isCancelled) {
-        if(isCancelled) {
-          jQuery(element).stop();
-        }
-      }
-    },
-    leave : function(element, done) {
-      element.css('opacity', 1);
-      jQuery(element).animate({
-        opacity: 0
-      }, done);
-
-      // optional onDone or onCancel callback
-      // function to handle any post-animation
-      // cleanup operations
-      return function(isCancelled) {
-        if(isCancelled) {
-          jQuery(element).stop();
-        }
-      }
-    },
-    move : function(element, done) {
+    enter: function(element, done) {
+      // Initialize the element's opacity
      element.css('opacity', 0);
-      jQuery(element).animate({
-        opacity: 1
-      }, done);

-      // optional onDone or onCancel callback
-      // function to handle any post-animation
-      // cleanup operations
+      // Animate the element's opacity
+      // (`element.animate()` is provided by jQuery)
+      element.animate({opacity: 1}, done);
+
+      // Optional `onDone`/`onCancel` callback function
+      // to handle any post-animation cleanup operations
      return function(isCancelled) {
-        if(isCancelled) {
-          jQuery(element).stop();
+        if (isCancelled) {
+          // Abort the animation if cancelled
+          // (`element.stop()` is provided by jQuery)
+          element.stop();
        }
-      }
+      };
+    },
+    leave: function(element, done) {
+      // Initialize the element's opacity
+      element.css('opacity', 1);
+
+      // Animate the element's opacity
+      // (`element.animate()` is provided by jQuery)
+      element.animate({opacity: 0}, done);
+
+      // Optional `onDone`/`onCancel` callback function
+      // to handle any post-animation cleanup operations
+      return function(isCancelled) {
+        if (isCancelled) {
+          // Abort the animation if cancelled
+          // (`element.stop()` is provided by jQuery)
+          element.stop();
+        }
+      };
    },

-    // you can also capture these animation events
-    addClass : function(element, className, done) {},
-    removeClass : function(element, className, done) {}
+    // We can also capture the following animation events:
+    move: function(element, done) {},
+    addClass: function(element, className, done) {},
+    removeClass: function(element, className, done) {}
  }
 });
 ```

 With these generated CSS class names present on the element at the time, AngularJS automatically
-figures out whether to perform a CSS and/or JavaScript animation. If both CSS and JavaScript animation
-code is present, and match the CSS class name on the element, then AngularJS will run both animations at the same time.
+figures out whether to perform a CSS and/or JavaScript animation. Note that you can't have both CSS
+and JavaScript animations based on the same CSS class. See
+{@link ngAnimate#css-js-animations-together here} for more details.

-## Class and ngClass animation hooks
+## Class and `ngClass` animation hooks

-AngularJS also pays attention to CSS class changes on elements by triggering the **add** and **remove** hooks.
-This means that if a CSS class is added to or removed from an element then an animation can be executed in between,
-before the CSS class addition or removal is finalized. (Keep in mind that AngularJS will only be
-able to capture class changes if an **expression** or the **ng-class** directive is used on the element.)
+AngularJS also pays attention to CSS class changes on elements by triggering the **add** and
+**remove** hooks. This means that if a CSS class is added to or removed from an element then an
+animation can be executed in between, before the CSS class addition or removal is finalized.
+(Keep in mind that AngularJS will only be able to capture class changes if an
+**interpolated expression** or the **ng-class** directive is used on the element.)

 The example below shows how to perform animations during class changes:

 <example module="ngAnimate" deps="angular-animate.js" animations="true" name="animate-css-class">
- <file name="index.html">
-  <p>
-    <input type="button" value="set" ng-click="myCssVar='css-class'">
-    <input type="button" value="clear" ng-click="myCssVar=''">
-    <br>
-    <span ng-class="myCssVar">CSS-Animated Text</span>
-  </p>
- </file>
- <file name="style.css">
-   .css-class-add, .css-class-remove {
-     transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-   }
+  <file name="index.html">
+    <p>
+      <button ng-click="myCssVar='css-class'">Set</button>
+      <button ng-click="myCssVar=''">Clear</button>
+      <br>
+      <span ng-class="myCssVar">CSS-Animated Text</span>
+    </p>
+  </file>
+  <file name="style.css">
+    .css-class-add, .css-class-remove {
+      transition: all 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940);
+    }

-   .css-class,
-   .css-class-add.css-class-add-active {
-     color: red;
-     font-size:3em;
-   }
+    .css-class,
+    .css-class-add.css-class-add-active {
+      color: red;
+      font-size: 3em;
+    }

-   .css-class-remove.css-class-remove-active {
-     font-size:1.0em;
-     color: black;
-   }
- </file>
+    .css-class-remove.css-class-remove-active {
+      font-size: 1em;
+      color: black;
+    }
+  </file>
 </example>

 Although the CSS is a little different than what we saw before, the idea is the same.

 ## Which directives support animations?

-A handful of common AngularJS directives support and trigger animation hooks whenever any major event occurs during its life cycle.
-The table below explains in detail which animation events are triggered
+A handful of common AngularJS directives support and trigger animation hooks whenever any major
+event occurs during their life cycle. The table below explains in detail which animation events are
+triggered:

-| Directive                                                                           | Supported Animations                     |
-|-------------------------------------------------------------------------------------|------------------------------------------|
-| {@link ng.directive:ngRepeat#animations ngRepeat}                                   | enter, leave, and move                   |
-| {@link ngRoute.directive:ngView#animations ngView}                                  | enter and leave                          |
-| {@link ng.directive:ngInclude#animations ngInclude}                                 | enter and leave                          |
-| {@link ng.directive:ngSwitch#animations ngSwitch}                                   | enter and leave                          |
-| {@link ng.directive:ngIf#animations ngIf}                                           | enter and leave                          |
-| {@link ng.directive:ngClass#animations ngClass or &#123;&#123;class&#125;&#125;}    | add and remove                           |
-| {@link ng.directive:ngShow#animations ngShow & ngHide}                              | add and remove (the ng-hide class value) |
+| Directive                                                                     | Supported Animations                                                      |
+|-------------------------------------------------------------------------------|---------------------------------------------------------------------------|
+| {@link ng.directive:ngRepeat#animations ngRepeat}                             | enter, leave, and move                                                    |
+| {@link ng.directive:ngIf#animations ngIf}                                     | enter and leave                                                           |
+| {@link ng.directive:ngSwitch#animations ngSwitch}                             | enter and leave                                                           |
+| {@link ng.directive:ngInclude#animations ngInclude}                           | enter and leave                                                           |
+| {@link ngRoute.directive:ngView#animations ngView}                            | enter and leave                                                           |
+| {@link module:ngMessages#animations ngMessage / ngMessageExp}                 | enter and leave                                                           |
+| {@link ng.directive:ngClass#animations ngClass / {{class&#125;&#8203;&#125;}  | add and remove                                                            |
+| {@link ng.directive:ngClass#animations ngClassEven / ngClassOdd}              | add and remove                                                            |
+| {@link ng.directive:ngHide#animations ngHide}                                 | add and remove (the `ng-hide` class)                                      |
+| {@link ng.directive:ngShow#animations ngShow}                                 | add and remove (the `ng-hide` class)                                      |
+| {@link ng.directive:ngModel#animations ngModel}                          | add and remove ({@link ng.directive:ngModel#css-classes various classes}) |
+| {@link ng.directive:form#animations form / ngForm}                       | add and remove ({@link ng.directive:form#css-classes various classes})    |
+| {@link module:ngMessages#animations ngMessages}                               | add and remove (the `ng-active`/`ng-inactive` classes)                    |

-For a full breakdown of the steps involved during each animation event, refer to the {@link ng.$animate API docs}.
+For a full breakdown of the steps involved during each animation event, refer to the
+{@link ng.$animate API docs}.

 ## How do I use animations in my own directives?

-Animations within custom directives can also be established by injecting `$animate` directly into your directive and
-making calls to it when needed.
+Animations within custom directives can also be established by injecting `$animate` directly into
+your directive and making calls to it when needed.

 ```js
 myModule.directive('my-directive', ['$animate', function($animate) {
-  return function(scope, element, attrs) {
+  return function(scope, element) {
    element.on('click', function() {
-      if(element.hasClass('clicked')) {
+      if (element.hasClass('clicked')) {
        $animate.removeClass(element, 'clicked');
      } else {
        $animate.addClass(element, 'clicked');
@@ -255,17 +260,19 @@ myModule.directive('my-directive', ['$animate', function($animate) {

 ## Animations on app bootstrap / page load

-By default, animations are disabled when the Angular app {@link guide/bootstrap bootstraps}. If you are using the {@link ngApp} directive,
-this happens in the `DOMContentLoaded` event, so immediately after the page has been loaded.
-Animations are disabled, so that UI and content are instantly visible. Otherwise, with many animations on
-the page, the loading process may become too visually overwhelming, and the performance may suffer.
+By default, animations are disabled when the AngularJS app {@link guide/bootstrap bootstraps}. If you
+are using the {@link ngApp} directive, this happens in the `DOMContentLoaded` event, so immediately
+after the page has been loaded. Animations are disabled, so that UI and content are instantly
+visible. Otherwise, with many animations on the page, the loading process may become too visually
+overwhelming, and the performance may suffer.

-Internally, `ngAnimate` waits until all template downloads that are started right after bootstrap have finished.
-Then, it waits for the currently running {@link ng.$rootScope.Scope#$digest} and the one after that to finish.
-This ensures that the whole app has been compiled fully before animations are attempted.
+Internally, `ngAnimate` waits until all template downloads that are started right after bootstrap
+have finished. Then, it waits for the currently running {@link ng.$rootScope.Scope#$digest $digest}
+and one more after that, to finish. This ensures that the whole app has been compiled fully before
+animations are attempted.

-If you do want your animations to play when the app bootstraps, you can enable animations globally in
-your main module's {@link angular.Module#run run} function:
+If you do want your animations to play when the app bootstraps, you can enable animations globally
+in your main module's {@link angular.Module#run run} function:

 ```js
 myModule.run(function($animate) {
@@ -275,17 +282,50 @@ myModule.run(function($animate) {

 ## How to (selectively) enable, disable and skip animations

-There are three different ways to disable animations, both globally and for specific animations.
-Disabling specific animations can help to speed up the render performance, for example for large `ngRepeat`
-lists that don't actually have animations. Because ngAnimate checks at runtime if animations are present,
-performance will take a hit even if an element has no animation.
+There are several different ways to disable animations, both globally and for specific animations.
+Disabling specific animations can help to speed up the render performance, for example for large
+`ngRepeat` lists that don't actually have animations. Because `ngAnimate` checks at runtime if
+animations are present, performance will take a hit even if an element has no animation.

-### In the config: {@link $animateProvider#classNameFilter $animateProvider.classNameFilter()}
+### During the config: {@link $animateProvider#customFilter $animateProvider.customFilter()}

-This function can be called in the {@link angular.Module#config config} phase of an app. It takes a regex as the only argument,
-which will then be matched against the classes of any element that is about to be animated. The regex
-allows a lot of flexibility - you can either allow animations only for specific classes (useful when
-you are working with 3rd party animations), or exclude specific classes from getting animated.
+This function can be called during the {@link angular.Module#config config} phase of an app. It
+takes a filter function as the only argument, which will then be used to "filter" animations (based
+on the animated element, the event type, and the animation options). Only when the filter function
+returns `true`, will the animation be performed. This allows great flexibility - you can easily
+create complex rules, such as allowing specific events only or enabling animations on specific
+subtrees of the DOM, and dynamically modify them, for example disabling animations at certain points
+in time or under certain circumstances.
+
+```js
+app.config(function($animateProvider) {
+  $animateProvider.customFilter(function(node, event, options) {
+    // Example: Only animate `enter` and `leave` operations.
+    return event === 'enter' || event === 'leave';
+  });
+});
+```
+
+The `customFilter` approach generally gives a big speed boost compared to other strategies, because
+the matching is done before other animation disabling strategies are checked.
+
+<div class="alert alert-success">
+  **Best Practice:**
+  Keep the filtering function as lean as possible, because it will be called for each DOM
+  action (e.g. insertion, removal, class change) performed by "animation-aware" directives.
+  See {@link guide/animations#which-directives-support-animations- here} for a list of built-in
+  directives that support animations.
+  Performing computationally expensive or time-consuming operations on each call of the
+  filtering function can make your animations sluggish.
+</div>
+
+### During the config: {@link $animateProvider#classNameFilter $animateProvider.classNameFilter()}
+
+This function too can be called during the {@link angular.Module#config config} phase of an app. It
+takes a regex as the only argument, which will then be matched against the classes of any element
+that is about to be animated. The regex allows a lot of flexibility - you can either allow
+animations for specific classes only (useful when you are working with 3rd party animations), or
+exclude specific classes from getting animated.

 ```js
 app.config(function($animateProvider) {
@@ -294,42 +334,43 @@ app.config(function($animateProvider) {
 ```

 ```css
-/&#42; prefixed with animate- &#42;/
+/&#42; prefixed with `animate-` &#42;/
 .animate-fade-add.animate-fade-add-active {
  transition: all 1s linear;
  opacity: 0;
 }
 ```

-The classNameFilter approach generally applies the biggest speed boost, because the matching is
-done before any other animation disabling strategies are checked. However, that also means it is not
-possible to override class name matching with the two following strategies. It's of course still possible
-to enable / disable animations by changing an element's class name at runtime.
+The `classNameFilter` approach generally gives a big speed boost compared to other strategies,
+because the matching is done before other animation disabling strategies are checked. However, that
+also means it is not possible to override class name matching with the two following strategies.
+It's of course still possible to enable / disable animations by changing an element's class name at
+runtime.

 ### At runtime: {@link ng.$animate#enabled $animate.enabled()}

 This function can be used to enable / disable animations in two different ways:

-With a single `boolean` argument, it enables / disables animations globally: `$animate.enabled(false)`
-disables all animations in your app.
+With a single `boolean` argument, it enables / disables animations globally:
+`$animate.enabled(false)` disables all animations in your app.

 When the first argument is a native DOM or jqLite/jQuery element, the function enables / disables
-animations on this element *and all its children*: `$animate.enabled(myElement, false)`. This is the
-most flexible way to change the animation state. For example, even if you have used it to disable
-animations on a parent element, you can still re-enable it for a child element. And compared to the
-`classNameFilter`, you can change the animation status at runtime instead of during the config phase.
+animations on this element *and all its children*: `$animate.enabled(myElement, false)`. You can
+still use it to re-enable animations for a child element, even if you have disabled them on a parent
+element. And compared to the `classNameFilter`, you can change the animation status at runtime
+instead of during the config phase.

-Note however that the `$animate.enabled()` state for individual elements does not overwrite disabling
-rules that have been set in the {@link $animateProvider#classNameFilter classNameFilter}.
+Note however that the `$animate.enabled()` state for individual elements does not overwrite
+disabling rules that have been set in the {@link $animateProvider#classNameFilter classNameFilter}.

 ### Via CSS styles: overwriting styles in the `ng-animate` CSS class
-Whenever an animation is started, ngAnimate applies the `ng-animate` class to the element for the
-whole duration of the animation. By applying CSS transition / animation styling to the class,
-you can skip an animation:
+
+Whenever an animation is started, `ngAnimate` applies the `ng-animate` class to the element for the
+whole duration of the animation. By applying CSS transition / animation styling to that class, you
+can skip an animation:

 ```css
-
-.my-class{
+.my-class {
  transition: transform 2s;
 }

@@ -340,23 +381,23 @@ you can skip an animation:
 my-class.ng-animate {
  transition: 0s;
 }
-
 ```

-By setting `transition: 0s`, ngAnimate will ignore the existing transition styles, and not try to animate them (Javascript
-animations will still execute, though). This can be used to prevent {@link guide/animations#preventing-collisions-with-existing-animations-and-third-party-libraries
-issues with existing animations interfering with ngAnimate}.
+By setting `transition: 0s`, `ngAnimate` will ignore the existing transition styles, and not try to
+animate them (Javascript animations will still execute, though). This can be used to prevent
+{@link guide/animations#preventing-collisions-with-existing-animations-and-third-party-libraries
+issues with existing animations interfering with `ngAnimate`}.


 ## Preventing flicker before an animation starts

-When nesting elements with structural animations such as `ngIf` into elements that have class-based
-animations such as `ngClass`, it sometimes happens that before the actual animation starts, there is a brief flicker or flash of content
-where the animated element is briefly visible.
+When nesting elements with structural animations, such as `ngIf`, into elements that have
+class-based animations such as `ngClass`, it sometimes happens that before the actual animation
+starts, there is a brief flicker or flash of content where the animated element is briefly visible.

-To prevent this, you can apply styles to the `ng-[event]-prepare` class, which is added as soon as an animation is initialized,
-but removed before the actual animation starts (after waiting for a $digest). This class is only added for *structural*
-animations (`enter`, `move`, and `leave`).
+To prevent this, you can apply styles to the `ng-[event]-prepare` class, which is added as soon as
+an animation is initialized, but removed before the actual animation starts (after waiting for a
+`$digest`). This class is only added for *structural* animations (`enter`, `move`, and `leave`).

 Here's an example where you might see flickering:

@@ -368,8 +409,9 @@ Here's an example where you might see flickering:
 </div>
 ```

-It is possible that during the `enter` event, the `.message` div will be briefly visible before it starts animating.
-In that case, you can add styles to the CSS that make sure the element stays hidden before the animation starts:
+It is possible that during the `enter` event, the `.message` div will be briefly visible before it
+starts animating. In that case, you can add styles to the CSS that make sure the element stays
+hidden before the animation starts:

 ```css
 .message.ng-enter-prepare {
@@ -379,66 +421,71 @@ In that case, you can add styles to the CSS that make sure the element stays hid
 /* Other animation styles ... */
 ```

-## Preventing Collisions with Existing Animations and Third Party Libraries
-By default, any `ngAnimate` enabled directives will assume any transition / animation styles on the
-element are part of an `ngAnimate` animation. This can lead to problems when the styles are actually
-for animations that are independent of `ngAnimate`.
+## Preventing collisions with existing animations and third-party libraries

-For example, an element acts as a loading spinner. It has an infinite css animation on it, and also an
-{@link ngIf `ngIf`} directive, for which no animations are defined:
+By default, any `ngAnimate`-enabled directives will assume that `transition` / `animation` styles on
+the element are part of an `ngAnimate` animation. This can lead to problems when the styles are
+actually for animations that are independent of `ngAnimate`.
+
+For example, an element acts as a loading spinner. It has an infinite css animation on it, and also
+an {@link ngIf `ngIf`} directive, for which no animations are defined:

 ```css
-@keyframes rotating {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
+.spinner {
+  animation: rotating 2s linear infinite;
 }

-.spinner {
-    animation: rotating 2s linear infinite;
+@keyframes rotating {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 ```

-Now, when the `ngIf` changes, `ngAnimate` will see the spinner animation and use
-it to animate the `enter`/`leave` event, which doesn't work because
-the animation is infinite. The element will still be added / removed after a timeout, but there will be a
-noticable delay.
+Now, when the `ngIf` expression changes, `ngAnimate` will see the spinner animation and use it to
+animate the `enter`/`leave` event, which doesn't work because the animation is infinite. The element
+will still be added / removed after a timeout, but there will be a noticeable delay.

-This might also happen because some third-party frameworks place animation duration defaults
-across many element or className selectors in order to make their code small and reuseable.
+This might also happen because some third-party frameworks place animation duration defaults across
+many element or className selectors in order to make their code small and reusable.

-You can prevent this unwanted behavior by adding CSS to the `.ng-animate` class that is added
-for the whole duration of an animation. Simply overwrite the transition / animation duration. In the
+You can prevent this unwanted behavior by adding CSS to the `.ng-animate` class, that is added for
+the whole duration of each animation. Simply overwrite the transition / animation duration. In the
 case of the spinner, this would be:

+```css
 .spinner.ng-animate {
-    transition: 0s none;
-    animation: 0s none;
+  animation: 0s none;
+  transition: 0s none;
 }
+```

-If you do have CSS transitions / animations defined for the animation events, make sure they have higher priority
-than any styles that are independent from ngAnimate.
+If you do have CSS transitions / animations defined for the animation events, make sure they have a
+higher priority than any styles that are not related to `ngAnimate`.

-You can also use one of the two other {@link guide/animations#how-to-selectively-enable-disable-and-skip-animations strategies to disable animations}.
+You can also use one of the other
+{@link guide/animations#how-to-selectively-enable-disable-and-skip-animations
+strategies to disable animations}.


-### Enable animations for elements outside of the Angular application DOM tree: {@link ng.$animate#pin $animate.pin()}
+## Enable animations outside of the application DOM tree: {@link ng.$animate#pin $animate.pin()}

-Before animating, `ngAnimate` checks to see if the element being animated is inside the application DOM tree,
-and if it is not, no animation is run. Usually, this is not a problem as most apps use the `ngApp`
-attribute / bootstrap the app on the `html` or `body` element.
+Before animating, `ngAnimate` checks if the animated element is inside the application DOM tree. If
+not, no animation is run. Usually, this is not a problem since most apps use the `html` or `body`
+elements as their root.

 Problems arise when the application is bootstrapped on a different element, and animations are
-attempted on elements that are outside the application tree, e.g. when libraries append popup and modal
-elements as the last child in the body tag.
+attempted on elements that are outside the application tree, e.g. when libraries append popup or
+modal elements to the body tag.

-You can use {@link ng.$animate#pin `$animate.pin(elementToAnimate, parentHost)`} to specify that an
-element belongs to your application. Simply call it before the element is added to the DOM / before
-the animation starts, with the element you want to animate, and the element which should be its
-assumed parent.
+You can use {@link ng.$animate#pin `$animate.pin(element, parentHost)`} to associate an element with
+another element that belongs to your application. Simply call it before the element is added to the
+DOM / before the animation starts, with the element you want to animate, and the element which
+should be its assumed parent.


 ## More about animations

-For a full breakdown of each method available on `$animate`, see the {@link ng.$animate API documentation}.
+For a full breakdown of each method available on `$animate`, see the
+{@link ng.$animate API documentation}.

-To see a complete demo, see the {@link tutorial/step_14 animation step within the AngularJS phonecat tutorial}.
+To see a complete demo, see the {@link tutorial/step_14 animation step in the phonecat tutorial}.
@@ -40,8 +40,8 @@ initialization.
        <html ng-app>

  3. If you choose to use the old style directive syntax `ng:` then include xml-namespace in `html`
-    to make IE happy. (This is here for historical reasons, and we no longer recommend use of
-    `ng:`.)
+    when running the page in the XHTML mode. (This is here for historical reasons, and we no longer
+    recommend use of `ng:`.)

        <html xmlns:ng="http://angularjs.org">

@@ -144,7 +144,7 @@ This is the sequence that your code should follow:

 ## Things to keep in mind

-There a few things to keep in mind regardless of automatic or manual bootstrapping:
+There are a few things to keep in mind regardless of automatic or manual bootstrapping:

 - While it's possible to bootstrap more than one AngularJS application per page, we don't actively
  test against this scenario. It's possible that you'll run into problems, especially with complex apps, so
@@ -5,19 +5,18 @@

 # Component Router

-<div class="alert alert-info">
-**Deprecation Notice:** In an effort to keep synchronized with router changes in Angular 2, this implementation of the Component Router (ngComponentRouter module) has been deprecated and will not receive further updates.
-We are investigating backporting the Angular 2 Router to Angular 1, but alternatively, use the {@link ngRoute} module or community developed projects (e.g. [ui-router](https://github.com/angular-ui/ui-router)).
+<div class="alert alert-danger">
+**Deprecation Notice:** In an effort to keep synchronized with router changes in the new Angular, this implementation of the Component Router (ngComponentRouter module) has been deprecated and will not receive further updates.
+We are investigating backporting the new Angular Router to AngularJS, but alternatively, use the {@link ngRoute} module or community developed projects (e.g. [ui-router](https://github.com/angular-ui/ui-router)).
 </div>

 This guide describes the new Component Router for AngularJS 1.5.

 <div class="alert alert-info">
-  If you are looking for information about the old router for AngularJS 1.4 and
-  earlier have a look at the {@link ngRoute} module.
+  If you are looking for information about the default router for AngularJS have a look at the {@link ngRoute} module.

-  If you are looking for information about the Component Router for Angular 2 then
-  check out the [Angular 2 Router Guide](https://angular.io/docs/ts/latest/guide/router.html).
+  If you are looking for information about the Component Router for the new Angular then
+  check out the [Angular Router Guide](https://angular.io/docs/ts/latest/guide/router.html).
 </div>

 ## Overview
@@ -39,14 +39,8 @@ Components can be registered using the `.component()` method of an Angular modul
  });
 </file>
 <file name="heroDetail.js">
-
-  function HeroDetailController() {
-
-  }
-
  angular.module('heroApp').component('heroDetail', {
    templateUrl: 'heroDetail.html',
-    controller: HeroDetailController,
    bindings: {
      hero: '='
    }
@@ -78,6 +72,7 @@ It's also possible to add components via {@link $compileProvider#component} in a
 | link functions    | Yes                  | No       |
 | multiElement      | Yes                  | No       |
 | priority          | Yes                  | No       |
+| replace           | Yes (deprecated)     | No       |
 | require           | Yes                  | Yes      |
 | restrict          | Yes                  | No (restricted to elements only)      |
 | scope             | Yes (default: false) | No (scope is always isolate)      |
@@ -461,7 +456,7 @@ The examples use the [Jasmine](http://jasmine.github.io/) testing framework.

 **Controller Test:**
 ```js
-describe('component: heroDetail', function() {
+describe('HeroDetailController', function() {
  var $componentController;

  beforeEach(module('heroApp'));
@@ -469,15 +464,6 @@ describe('component: heroDetail', function() {
    $componentController = _$componentController_;
  }));

-  it('should expose a `hero` object', function() {
-    // Here we are passing actual bindings to the component
-    var bindings = {hero: {name: 'Wolverine'}};
-    var ctrl = $componentController('heroDetail', null, bindings);
-
-    expect(ctrl.hero).toBeDefined();
-    expect(ctrl.hero.name).toBe('Wolverine');
-  });
-
  it('should call the `onDelete` binding, when deleting the hero', function() {
    var onDeleteSpy = jasmine.createSpy('onDelete');
    var bindings = {hero: {}, onDelete: onDeleteSpy};
@@ -186,7 +186,7 @@ Right now, the `InvoiceController` contains all logic of our example. When the a
 is a good practice to move view-independent logic from the controller into a
 <a name="service">{@link services service}</a>, so it can be reused by other parts
 of the application as well. Later on, we could also change that service to load the exchange rates
-from the web, e.g. by calling the Yahoo Finance API, without changing the controller.
+from the web, e.g. by calling the [Fixer.io](http://fixer.io) exchange rate API, without changing the controller.

 Let's refactor our example and move the currency conversion into a service in another file:

@@ -300,7 +300,7 @@ to something shorter like `a`.

 ## Accessing the backend

-Let's finish our example by fetching the exchange rates from the Yahoo Finance API.
+Let's finish our example by fetching the exchange rates from the [Fixer.io](http://fixer.io) exchange rate API.
 The following example shows how this is done with Angular:

 <example name="guide-concepts-3" ng-app-included="true">
@@ -323,10 +323,6 @@ The following example shows how this is done with Angular:
  <file name="finance3.js">
    angular.module('finance3', [])
      .factory('currencyConverter', ['$http', function($http) {
-        var YAHOO_FINANCE_URL_PATTERN =
-              '//query.yahooapis.com/v1/public/yql?q=select * from ' +
-              'yahoo.finance.xchange where pair in ("PAIRS")&format=json&' +
-              'env=store://datatables.org/alltableswithkeys';
        var currencies = ['USD', 'EUR', 'CNY'];
        var usdToForeignRates = {};

@@ -335,15 +331,10 @@ The following example shows how this is done with Angular:
        };

        var refresh = function() {
-          var url = YAHOO_FINANCE_URL_PATTERN.
-                     replace('PAIRS', 'USD' + currencies.join('","USD'));
+          var url = 'https://api.fixer.io/latest?base=USD&symbols=' + currencies.join(",");
          return $http.get(url).then(function(response) {
-            var newUsdToForeignRates = {};
-            angular.forEach(response.data.query.results.rate, function(rate) {
-              var currency = rate.id.substring(3,6);
-              newUsdToForeignRates[currency] = window.parseFloat(rate.Rate);
-            });
-            usdToForeignRates = newUsdToForeignRates;
+            usdToForeignRates = response.data.rates;
+            usdToForeignRates['USD'] = 1;
          });
        };

@@ -120,11 +120,13 @@ The other forms shown above are accepted for legacy reasons but we advise you to

 ### Directive types

-`$compile` can match directives based on element names, attributes, class names, as well as comments.
+`$compile` can match directives based on element names (E), attributes (A), class names (C),
+and comments (M).

-All of the Angular-provided directives match attribute name, tag name, comments, or class name.
-The following demonstrates the various ways a directive (`myDir` in this case) can be referenced
-from within a template:
+The built-in AngularJS directives show in their documentation page which type of matching they support.
+
+The following demonstrates the various ways a directive that matches all 4 types
+(`myDir` in this case) can be referenced from within a template.

 ```html
 <my-dir></my-dir>
@@ -133,6 +135,10 @@ from within a template:
 <span class="my-dir: exp;"></span>
 ```

+A directive can specify which of the 4 matching types it supports in the
+{@link ng.$compile#-restrict- `restrict`} property of the directive definition object.
+The default is `EA`.
+
 <div class="alert alert-success">
 **Best Practice:** Prefer using directives via tag name and attributes over comment and class names.
 Doing so generally makes it easier to determine what directives a given element matches.
@@ -971,7 +977,7 @@ controllers using `require`.
 Otherwise use `link`.
 </div>

-### Summary
+## Summary

 Here we've seen the main use cases for directives. Each of these samples acts as a good starting
 point for creating your own directives.
@@ -37,7 +37,8 @@ Angular expressions are like JavaScript expressions with the following differenc
    even inside `ng-init` directive.

  * **No RegExp Creation With Literal Notation:** You cannot create regular expressions
-    in an Angular expression.
+    in an AngularJS expression. An exception to this rule is {@link ngPattern `ng-pattern`} which accepts valid
+    RegExp.

  * **No Object Creation With New Operator:** You cannot use `new` operator in an Angular expression.

@@ -241,7 +242,7 @@ An expression that starts with `::` is considered a one-time expression. One-tim
 will stop recalculating once they are stable, which happens after the first digest if the expression
 result is a non-undefined value (see value stabilization algorithm below).

-<example module="oneTimeBidingExampleApp" name="expression-one-time">
+<example module="oneTimeBindingExampleApp" name="expression-one-time">
  <file name="index.html">
    <div ng-controller="EventController">
      <button ng-click="clickMe($event)">Click Me</button>
@@ -250,7 +251,7 @@ result is a non-undefined value (see value stabilization algorithm below).
    </div>
  </file>
  <file name="script.js">
-    angular.module('oneTimeBidingExampleApp', []).
+    angular.module('oneTimeBindingExampleApp', []).
      controller('EventController', ['$scope', function($scope) {
        var counter = 0;
        var names = ['Igor', 'Misko', 'Chirayu', 'Lucas'];
@@ -265,24 +266,24 @@ result is a non-undefined value (see value stabilization algorithm below).
  </file>
  <file name="protractor.js" type="protractor">
    it('should freeze binding after its value has stabilized', function() {
-      var oneTimeBiding = element(by.id('one-time-binding-example'));
+      var oneTimeBinding = element(by.id('one-time-binding-example'));
      var normalBinding = element(by.id('normal-binding-example'));

-      expect(oneTimeBiding.getText()).toEqual('One time binding:');
+      expect(oneTimeBinding.getText()).toEqual('One time binding:');
      expect(normalBinding.getText()).toEqual('Normal binding:');
      element(by.buttonText('Click Me')).click();

-      expect(oneTimeBiding.getText()).toEqual('One time binding: Igor');
+      expect(oneTimeBinding.getText()).toEqual('One time binding: Igor');
      expect(normalBinding.getText()).toEqual('Normal binding: Igor');
      element(by.buttonText('Click Me')).click();

-      expect(oneTimeBiding.getText()).toEqual('One time binding: Igor');
+      expect(oneTimeBinding.getText()).toEqual('One time binding: Igor');
      expect(normalBinding.getText()).toEqual('Normal binding: Misko');

      element(by.buttonText('Click Me')).click();
      element(by.buttonText('Click Me')).click();

-      expect(oneTimeBiding.getText()).toEqual('One time binding: Igor');
+      expect(oneTimeBinding.getText()).toEqual('One time binding: Igor');
      expect(normalBinding.getText()).toEqual('Normal binding: Lucas');
    });
  </file>
@@ -119,7 +119,8 @@ You can find a larger list of Angular external libraries at [ngmodules.org](http
 ### Books
 * [AngularJS Directives](http://www.amazon.com/AngularJS-Directives-Alex-Vanston/dp/1783280336) by Alex Vanston
 * [AngularJS Essentials (Free eBook)](https://www.packtpub.com/packt/free-ebook/angularjs-essentials) by Rodrigo Branas
-* [AngularJS : Novice to Ninja](http://www.amazon.in/AngularJS-Novice-Ninja-Sandeep-Panda/dp/0992279453) by Sandeep Panda
+* [AngularJS in Action](https://www.manning.com/books/angularjs-in-action) by Lukas Ruebbelke
+* [AngularJS: Novice to Ninja](http://www.amazon.in/AngularJS-Novice-Ninja-Sandeep-Panda/dp/0992279453) by Sandeep Panda
 * [AngularJS UI Development](http://www.amazon.com/AngularJS-UI-Development-Amit-Ghart-ebook/dp/B00OXVAK7A) by Amit Gharat and Matthias Nehlsen
 * [AngularJS: Up and Running](http://www.amazon.com/AngularJS-Running-Enhanced-Productivity-Structured/dp/1491901942) by Brad Green and Shyam Seshadri
 * [Developing an AngularJS Edge](http://www.amazon.com/Developing-AngularJS-Edge-Christopher-Hiller-ebook/dp/B00CJLFF8K) by Christopher Hiller
@@ -138,7 +139,7 @@ You can find a larger list of Angular external libraries at [ngmodules.org](http
  [CodeAcademy](http://www.codecademy.com/courses/javascript-advanced-en-2hJ3J/0/1),
  [CodeSchool](https://www.codeschool.com/courses/shaping-up-with-angular-js)
 * **Paid online:**
-  [Pluralsight (3 courses)](http://www.pluralsight.com/training/Courses/Find?highlight=true&searchTerm=angularjs),
+  [Pluralsight](https://www.pluralsight.com/search?q=angularjs),
  [Tuts+](https://tutsplus.com/course/easier-js-apps-with-angular/),
  [lynda.com](http://www.lynda.com/AngularJS-tutorials/Up-Running-AngularJS/133318-2.html),
  [WintellectNOW (4 lessons)](http://www.wintellectnow.com/Course/Detail/mastering-angularjs),
@@ -28,8 +28,8 @@ for other directives to augment its behavior.
      <form novalidate class="simple-form">
        <label>Name: <input type="text" ng-model="user.name" /></label><br />
        <label>E-mail: <input type="email" ng-model="user.email" /></label><br />
-        Gender: <label><input type="radio" ng-model="user.gender" value="male" />male</label>
-        <label><input type="radio" ng-model="user.gender" value="female" />female</label><br />
+        Best Editor: <label><input type="radio" ng-model="user.preference" value="vi" />vi</label>
+        <label><input type="radio" ng-model="user.preference" value="emacs" />emacs</label><br />
        <input type="button" ng-click="reset()" value="Reset" />
        <input type="submit" ng-click="update(user)" value="Save" />
      </form>
@@ -26,7 +26,7 @@ directive}.  Additionally, you can use {@link guide/i18n#messageformat-extension
 All localizable Angular components depend on locale-specific rule sets managed by the {@link
 ng.$locale `$locale` service}.

-There a few examples that showcase how to use Angular filters with various locale rule sets in the
+There are a few examples that showcase how to use Angular filters with various locale rule sets in the
 [`i18n/e2e` directory](https://github.com/angular/angular.js/tree/master/i18n/e2e) of the Angular
 source code.

@@ -85,7 +85,7 @@ requires German locale, you would serve index_de-de.html which will look somethi

 Both approaches described above require you to prepare different `index.html` pages or JavaScript
 files for each locale that your app may use. You also need to configure your server to serve
-the correct file that correspond to the desired locale.
+the correct file that corresponds to the desired locale.

 The second approach (including the locale JavaScript file in `index.html`) may be slower because
 an extra script needs to be loaded.
@@ -281,18 +281,18 @@ categories as you need.
 #### Selection Keywords

 The selection keywords can be either exact matches or language dependent [plural
-categories](http://unicode.org/repos/cldr-tmp/trunk/diff/supplemental/language_plural_rules.html).
+categories](http://cldr.unicode.org/index/cldr-spec/plural-rules).

 Exact matches are written as the equal sign followed by the exact value. `=0`, `=1`, `=2` and
 `=123` are all examples of exact matches.  Note that there should be no space between the equal sign
 and the numeric value.

 Plural category matches are single words corresponding to the [plural
-categories](http://unicode.org/repos/cldr-tmp/trunk/diff/supplemental/language_plural_rules.html) of
-the CLDR plural category spec.  These categories vary by locale.  The "en" (English) locale, for
-example, defines just "one" and "other" while the "ga" (Irish) locale defines "one", "two", "few",
-"many" and "other".  Typically, you would just write the categories for your language.  During
-translation, the translators will add or remove more categories depending on the target locale.
+categories](http://cldr.unicode.org/index/cldr-spec/plural-rules) of the CLDR plural category spec.
+These categories vary by locale.  The "en" (English) locale, for example, defines just "one" and
+"other" while the "ga" (Irish) locale defines "one", "two", "few", "many" and "other".  Typically,
+you would just write the categories for your language.  During translation, the translators will add
+or remove more categories depending on the target locale.

 Exact matches always win over keyword matches.  Therefore, if you define both `=0` and `zero`, when
 the value of the expression is zero, the `=0` message is the one that will be selected.  (The
@@ -7,7 +7,7 @@

 <div class="alert alert-warning">
 **Note:** AngularJS 1.3 has dropped support for IE8. Read more about it on
-[our blog](http://blog.angularjs.org/2013/12/angularjs-13-new-release-approaches.html).
+[our blog](https://blog.angularjs.org/2013/12/angularjs-13-new-release-approaches.html).
 AngularJS 1.2 will continue to support IE8, but the core team does not plan to spend time
 addressing issues specific to IE8 or earlier.
 </div>
@@ -19,7 +19,7 @@ on IE.
 The project currently supports and will attempt to fix bugs for IE9 and above. The continuous
 integration server runs all the tests against IE9, IE10, and IE11. See
 [Travis CI](https://travis-ci.org/angular/angular.js) and
-[ci.angularjs.org](http://ci.angularjs.org).
+[ci.angularjs.org](https://ci.angularjs.org).

 We do not run tests on IE8 and below. A subset of the AngularJS functionality may work on these
 browsers, but it is up to you to test and decide whether it works for your particular app.
@@ -27,8 +27,8 @@ browsers, but it is up to you to test and decide whether it works for your parti

 To ensure your Angular application works on IE please consider:

-1. Use `ng-style` tags instead of `style="{{ someCss }}"`. The latter works in Chrome and Firefox
-   but does not work in Internet Explorer <= 11 (the most recent version at time of writing).
+1. Use `ng-style` tags instead of `style="{{ someCss }}"`. The latter works in Chrome, Firefox,
+   Safari and Edge but does not work in Internet Explorer (even 11).
 2. For the `type` attribute of buttons, use `ng-attr-type` tags instead of
   `type="{{ someExpression }}"`. If using the latter, Internet Explorer overwrites the expression
   with `type="submit"` before Angular has a chance to interpolate it.
@@ -32,7 +32,7 @@ If the interpolated value is not a `String`, it is computed as follows:
 - `undefined` and `null` are converted to `''`
 - if the value is an object that is not a `Number`, `Date` or `Array`, $interpolate looks for
 a custom `toString()` function on the object, and uses that. Custom means that
-`myObject.toString !== `Object.prototype.toString`.
+`myObject.toString !== Object.prototype.toString`.
 - if the above doesn't apply, `JSON.stringify` is used.

 ### Binding to boolean attributes
@@ -15,22 +15,6 @@ which drives many of these changes.
 * Several new features, especially animations, would not be possible without a few changes.
 * Finally, some outstanding bugs were best fixed by changing an existing API.

-
-
-## Contents
-
-<ul class="nav nav-list">
-  <li>{@link guide/migration#migrating-from-1-5-to-1-6 Migrating from 1.5 to 1.6}</li>
-  <li>{@link guide/migration#migrating-from-1-4-to-1-5 Migrating from 1.4 to 1.5}</li>
-  <li>{@link guide/migration#migrating-from-1-3-to-1-4 Migrating from 1.3 to 1.4}</li>
-  <li>{@link guide/migration#migrating-from-1-2-to-1-3 Migrating from 1.2 to 1.3}</li>
-  <li>{@link guide/migration#migrating-from-1-0-to-1-2 Migrating from 1.0 to 1.2}</li>
-</ul>
-
-
-
-
-
 ## Migrating from 1.5 to 1.6

 Angular 1.6 fixes numerous bugs and adds new features, both in core and in external modules.
@@ -75,8 +59,8 @@ commits for more info.
 - **$location** now uses `'!'` as the default hash-prefix for hash-bang URLs, instead of the empty
  string. ([Details](guide/migration#commit-aa077e8))

- **$compile** will (by default) not pre-assign bindings on controller instances.
-  ([Details](guide/migration#commit-bcd0d4))
+- **$compile** will (by default) not pre-assign bindings on component/directive controller
+  instances. ([Details](guide/migration#commit-bcd0d4))

 - **http** imposes additional restrictions to **JSONP** requests for security reasons
  (see [details](guide/migration#migrate1.5to1.6-ng-services-$http) below):
@@ -88,7 +72,9 @@ commits for more info.

 - **jqLite** is more aligned to jQuery 3, which required the following changes
  (see [details](guide/migration#migrate1.5to1.6-ng-misc-jqLite) below):
-  - Keys passed to `.data()` and `.css()` are now camelCased in the same as jQuery does it.
+  - Keys passed to `.data()` and `.css()` are now camelCased in the same way as the jQuery methods
+    do.
+  - Getting/setting boolean attributes no longer takes the corresponding properties into account.
  - Setting boolean attributes to empty string no longer removes the attribute.
  - Calling `.val()` on a multiple select will always return an array, even if no option is
    selected.
@@ -410,14 +396,14 @@ if the option does not provide a value attribute.
 <major />
 <a name="commit-bcd0d4"></a>
 **Due to [bcd0d4](https://github.com/angular/angular.js/commit/bcd0d4d896d0dfdd988ff4f849c1d40366125858)**,
-pre-assigning bindings on controller instances is disabled by default. It is still possible to turn
-it back on, which should help during the migration. Pre-assigning bindings has been deprecated and
-will be removed in a future version, so we strongly recommend migrating your applications to not
-rely on it as soon as possible.
+pre-assigning bindings on component/directive controller instances is disabled by default, which
+means that they will no longer be available inside the constructors. It is still possible to turn it
+back on, which should help during the migration. Pre-assigning bindings has been deprecated and will
+be removed in a future version, so we strongly recommend migrating your applications to not rely on
+it as soon as possible.

 Initialization logic that relies on bindings being present should be put in the controller's
-`$onInit()` method, which is guarranteed to always be called _after_ the bindings have been
-assigned.
+`$onInit()` method, which is guaranteed to always be called _after_ the bindings have been assigned.

 Before:

@@ -482,14 +468,6 @@ lifecycle hook), you may need to manually call `$onInit()` from your constructor
 })
 ```

-<hr />
-<minor />
-**Due to [13c252](https://github.com/angular/angular.js/commit/13c2522baf7c8f616b2efcaab4bffd54c8736591)**,
-on **IE11 only**, consecutive text nodes will always get merged. Previously, they would not get
-merged if they had no parent. The new behavior, which fixes an IE11 bug affecting interpolation
-under certain circumstances, might in some edge-cases have unexpected side effects that you should
-be aware of. Please, check the commit message for more details.
-
 <hr />
 <minor />
 **Due to [04cad4](https://github.com/angular/angular.js/commit/04cad41d26ebaf44b5ee0c29a152d61f235f3efa)**,
@@ -501,7 +479,7 @@ running at `https://docs.angularjs.org` then the following will fail:
 <link href="{{ 'http://mydomain.org/unsafe.css' }}" rel="stylesheet" />
 ```

-By default, only URLs with the same domain and prototocl as the application document are considered
+By default, only URLs with the same domain and protocol as the application document are considered
 safe in the `RESOURCE_URL` context. To use URLs from other domains and/or protocols, you may either
 whitelist them or wrap them into a trusted value by calling `$sce.trustAsResourceUrl(url)`.

@@ -586,7 +564,7 @@ trust a URL:

    ```js
    appModule.config(['$sceDelegateProvider', function($sceDelegateProvider) {
-      $sceDelegateProvider.resourceUrlWhiteList([
+      $sceDelegateProvider.resourceUrlWhitelist([
        // Allow same origin resource loads.
        'self',
        // Allow JSONP calls that match this pattern
@@ -880,6 +858,48 @@ var bgColor = elem.css('background-color');
 var bgColor = elem.css('backgroundColor');
 ```

+<hr />
+<major />
+**Due to [7ceb5f](https://github.com/angular/angular.js/commit/7ceb5f6fcc43d35d1b66c3151ce6a71c60309304)**,
+getting/setting boolean attributes will no longer take the corresponding properties into account.
+Previously, all boolean attributes were reflected into the corresponding property when calling a
+setter and from the corresponding property when calling a getter, even on elements that don't treat
+those attributes in a special way. Now Angular doesn't do it by itself, but relies on browsers to
+know when to reflect the property. Note that this browser-level conversion differs between browsers;
+if you need to dynamically change the state of an element, you should modify the property, not the
+attribute. See https://jquery.com/upgrade-guide/1.9/#attr-versus-prop- for a more detailed
+description about a related change in jQuery 1.9.
+
+This change aligns jqLite with jQuery 3. To migrate the code follow the example below:
+
+Before:
+
+```css
+/* CSS */
+
+input[checked="checked"] { ... }
+```
+```js
+// JS
+
+elem1.attr('checked', 'checked');
+elem2.attr('checked', false);
+```
+
+After:
+
+```css
+/* CSS */
+
+input:checked { ... }
+```
+```js
+// JS
+
+elem1.prop('checked', true);
+elem2.prop('checked', false);
+```
+
 <hr />
 <major />
 **Due to [3faf45](https://github.com/angular/angular.js/commit/3faf4505732758165083c9d21de71fa9b6983f4a)**,
@@ -1169,7 +1189,7 @@ with an unencoded `;` character.
 Previously, in cases where `ngView` was loaded asynchronously, `$route` (and its dependencies) might
 also have been instantiated asynchronously.

-Although this is not expected to have unwanted side-effects in normal application bebavior, it may
+Although this is not expected to have unwanted side-effects in normal application behavior, it may
 affect your unit tests: When testing a module that (directly or indirectly) depends on `ngRoute`, a
 request will be made for the default route's template. If not properly "trained", `$httpBackend`
 will complain about this unexpected request. You can restore the previous behavior (and avoid
@@ -1276,7 +1296,7 @@ jqLite/jQuery collections

 #### Helper Functions:

-The {@link angular.lowercase `angular.lowercase`} and {@link angular.uppercase `angular.uppercase`} functions have been **deprecated** and will be removed
+The `angular.lowercase` and `angular.uppercase` functions have been **deprecated** and will be removed
 in version 1.7.0. It is recommended to use [String.prototype.toLowerCase](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase) and [String.prototype.toUpperCase](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase) functions instead.


@@ -1369,7 +1389,7 @@ always assumed to be of type 'string', so passing non-string values never worked
 The main difference is that now it will fail faster and with a more informative error message.


-## ngTouch (`ngClick`)
+### ngTouch (`ngClick`)

 Due to [0dfc1dfe](https://github.com/angular/angular.js/commit/0dfc1dfebf26af7f951f301c4e3848ac46f05d7f),
 the `ngClick` override directive from the `ngTouch` module is **deprecated and disabled by default**.
@@ -1410,9 +1430,8 @@ For more info on the topic, you can take a look at this

 ## Migrating from 1.3 to 1.4

-Angular 1.4 fixes major animation issues and introduces a new API for `ngCookies`. Further, there
-are changes to `ngMessages`, `$compile`, `ngRepeat`, `ngOptions `and some fixes to core filters:
-`limitTo` and `filter`.
+AngularJS 1.4 fixes major animation issues and introduces a new API for `ngCookies`. Further, there
+are changes to `ngMessages`, `$compile`, `ngRepeat`, `ngOptions`, `ngPattern`, `pattern` and some fixes to core filters: `limitTo` and `filter`.

 The reason for the ngAnimate refactor was to fix timing issues and to expose new APIs to allow
 for developers to construct more versatile animations.  We now have access to `$animateCss`
@@ -1425,9 +1444,9 @@ to render error messages with ngMessages that are listed with a directive such a
 involves pulling error message data from a server and then displaying that data via the mechanics of ngMessages. Be
 sure to read the breaking change involved with `ngMessagesInclude` to upgrade your template code.

-Other changes, such as the ordering of elements with ngRepeat and ngOptions, may also affect the behavior of your
-application. And be sure to also read up on the changes to `$cookies`. The migration jump from 1.3 to 1.4 should be
-relatively straightforward otherwise.
+Other changes, such as the ordering of elements with ngRepeat and ngOptions and the way ngPattern and pattern directives
+validate the regex, may also affect the behavior of your application. And be sure to also read up on the changes to `$cookies`.
+The migration jump from 1.3 to 1.4 should be relatively straightforward otherwise.



@@ -1531,7 +1550,7 @@ class based animations (animations triggered via ngClass) in order to ensure tha



-### Forms (`ngMessages`, `ngOptions`, `select`)
+### Forms (`ngMessages`, `ngOptions`, `select`, `ngPattern` and `pattern`, `form`)

 #### ngMessages
 The ngMessages module has also been subject to an internal refactor to allow it to be more flexible
@@ -1639,8 +1658,81 @@ ngModelCtrl.$formatters.push(function(value) {
 });
 ```

+#### ngPattern and pattern

-### form
+Due to [0e001084](https://github.com/angular/angular.js/commit/0e001084ffff8674efad289d37cb16cc4e46b50a),
+The `ngPattern` and `pattern` directives will validate the regex
+against the `$viewValue` of `ngModel`, i.e. the value of the model
+before the $parsers are applied. Previously, the `$modelValue`
+(the result of the $parsers) was validated.
+
+This fixes issues where `input[date]` and `input[number]` cannot
+be validated because the `$viewValue` string is parsed into
+`Date` and `Number` respectively (starting with AngularJS 1.3).
+It also brings the directives in line with HTML5 constraint
+validation, which validates against the input value.
+
+This change is unlikely to cause applications to fail, because even
+in AngularJS 1.2, the value that was validated by pattern could have
+been manipulated by the $parsers, as all validation was done
+inside this pipeline.
+
+If you rely on the pattern being validated against the `$modelValue`,
+you must create your own validator directive that overwrites
+the built-in pattern validator:
+
+```
+.directive('patternModelOverwrite', function patternModelOverwriteDirective() {
+  return {
+    restrict: 'A',
+    require: '?ngModel',
+    priority: 1,
+    compile: function() {
+      var regexp, patternExp;
+
+      return {
+        pre: function(scope, elm, attr, ctrl) {
+          if (!ctrl) return;
+
+          attr.$observe('pattern', function(regex) {
+            /**
+             * The built-in directive will call our overwritten validator
+             * (see below). We just need to update the regex.
+             * The preLink fn guaranetees our observer is called first.
+             */
+            if (isString(regex) && regex.length > 0) {
+              regex = new RegExp('^' + regex + '$');
+            }
+
+            if (regex && !regex.test) {
+              //The built-in validator will throw at this point
+              return;
+            }
+
+            regexp = regex || undefined;
+          });
+
+        },
+        post: function(scope, elm, attr, ctrl) {
+          if (!ctrl) return;
+
+          regexp, patternExp = attr.ngPattern || attr.pattern;
+
+          //The postLink fn guarantees we overwrite the built-in pattern validator
+          ctrl.$validators.pattern = function(value) {
+            return ctrl.$isEmpty(value) ||
+              isUndefined(regexp) ||
+              regexp.test(value);
+          };
+        }
+      };
+    }
+  };
+});
+```
+
+
+#### form

 Due to [94533e57](https://github.com/angular/angular.js/commit/94533e570673e6b2eb92073955541fa289aabe02),
 the `name` attribute of `form` elements can now only contain characters that can be evaluated as part
@@ -2605,7 +2697,7 @@ See [38deedd6](https://github.com/angular/angular.js/commit/38deedd6e3d806eb8262

 ### Interpolations inside DOM event handlers are now disallowed

-DOM event handlers execute arbitrary Javascript code. Using an interpolation for such handlers
+DOM event handlers execute arbitrary JavaScript code. Using an interpolation for such handlers
 means that the interpolated value is a JS string that is evaluated. Storing or generating such
 strings is error prone and leads to XSS vulnerabilities. On the other hand, `ngClick` and other
 Angular specific event handlers evaluate Angular expressions in non-window (Scope) context which
@@ -20,6 +20,9 @@ and adds CSS classes to data-bound elements:
 CSS class are attached to the corresponding element. These scope references can then be accessed via
 `element.scope()` and `element.isolateScope()`.

+- Placeholder comments for structural directives will contain information about what directive
+and binding caused the placeholder. E.g. `<!-- ngIf: shouldShow() -->`.
+
 Tools like [Protractor](https://github.com/angular/protractor) and
 [Batarang](https://github.com/angular/angularjs-batarang) need this information to run,
 but you can disable this in production for a significant performance boost with:
@@ -100,8 +100,7 @@ Protection from JSON Hijacking is provided if the server prefixes all JSON reque
 Angular will automatically strip the prefix before processing it as JSON.
 For more information please visit {@link $http#json-vulnerability-protection JSON Hijacking Protection}.

-Bear in mind that calling `$http.jsonp`, like in [our Yahoo! finance example](https://docs.angularjs.org/guide/concepts#accessing-the-backend),
-gives the remote server (and, if the request is not secured, any Man-in-the-Middle attackers)
+Bear in mind that calling `$http.jsonp` gives the remote server (and, if the request is not secured, any Man-in-the-Middle attackers)
 instant remote code execution in your application: the result of these requests is handed off
 to the browser as regular `<script>` tag.

@@ -221,8 +221,8 @@ it('should clear messages after alert', function() {
  notify('two');
  notify('third');

-  expect(mock.alert.callCount).toEqual(2);
-  expect(mock.alert.mostRecentCall.args).toEqual(["more\ntwo\nthird"]);
+  expect(mock.alert.calls.count()).toEqual(2);
+  expect(mock.alert.calls.mostRecent().args).toEqual(["more\ntwo\nthird"]);
 });
 ```

@@ -30,7 +30,7 @@ curly-brace {@link expression expression} bindings:
          string expression 'buttonText'
          wrapped in "{{ }}" markup -->
   <button ng-click="changeFoo()">{{buttonText}}</button>
-   <script src="angular.js">
+   <script src="angular.js"></script>
 </body>
 </html>
 ```
@@ -2,185 +2,12 @@
@name Develop
@description

-# Building and Testing AngularJS
+# Contributing & Development

-This document describes how to set up your development environment to build and test AngularJS, and
-explains the basic mechanics of using `git`, `node`, `yarn`, `grunt`, and `bower`.
-
-See the [contributing guidelines](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md)
-for how to contribute your own code to AngularJS.
-
-
-1. {@link misc/contribute#installing-dependencies Installing Dependencies}
-2. {@link misc/contribute#forking-angular-on-github Forking Angular on Github}
-3. {@link misc/contribute#building-angularjs Building AngularJS}
-4. {@link misc/contribute#running-a-local-development-web-server Running a Local Development Web Server}
-5. {@link misc/contribute#running-the-unit-test-suite Running the Unit Test Suite}
-6. {@link misc/contribute#running-the-end-to-end-test-suite Running the End-to-end Test Suite}
-
-## Installing Dependencies
-
-Before you can build AngularJS, you must install and configure the following dependencies on your
-machine:
-
-* [Git](http://git-scm.com/): The [Github Guide to
-  Installing Git](https://help.github.com/articles/set-up-git) is a good source of information.
-
-* [Node.js v6.x (LTS)](http://nodejs.org): We use Node to generate the documentation, run a
-  development web server, run tests, and generate distributable files. Depending on your system,
-  you can install Node either from source or as a pre-packaged bundle.
-
-  We recommend using [nvm](https://github.com/creationix/nvm) (or [nvm-windows](https://github.com/coreybutler/nvm-windows))
-  to manage and install Node.js, which makes it easy to change the version of Node.js per project.
-
-* [Yarn](https://yarnpkg.com): We use Yarn to install our Node.js module dependencies (rather than using npm).
-  There are detailed installation instructions available at https://yarnpkg.com/en/docs/install.
-
-* [Java](http://www.java.com): We minify JavaScript using our
-  [Closure Tools](https://developers.google.com/closure/) jar. Make sure you have Java (version 7 or higher)
-  installed and included in your [PATH](http://docs.oracle.com/javase/tutorial/essential/environment/paths.html)
-  variable.
-
-* [Grunt](http://gruntjs.com): We use Grunt as our build system. Install the grunt command-line tool globally with:
-
-  ```shell
-  yarn global add grunt-cli
-  ```
-
-## Forking Angular on Github
-
-To create a Github account, follow the instructions [here](https://github.com/signup/free).
-Afterwards, go ahead and [fork](http://help.github.com/forking) the [main AngularJS repository](https://github.com/angular/angular.js).
-
-
-## Building AngularJS
-
-To build AngularJS, you clone the source code repository and use Grunt to generate the non-minified and
-minified AngularJS files:
-
-```shell
-# Clone your Github repository:
-git clone https://github.com/<github username>/angular.js.git
-
-# Go to the AngularJS directory:
-cd angular.js
-
-# Add the main AngularJS repository as an upstream remote to your repository:
-git remote add upstream "https://github.com/angular/angular.js.git"
-
-# Install node.js dependencies:
-yarn install
-
-# Build AngularJS (which will install `bower` dependencies automatically):
-grunt package
-```
-
-
-<div class="alert alert-warning">
-**Note:** If you're using Windows, you must use an elevated command prompt (right click, run as
-Administrator). This is because `grunt package` creates some symbolic links.
-</div>
-
-<div class="alert alert-warning">
-**Note:** If you're using Linux, and `yarn install` fails with the message
-'Please try running this command again as root/Administrator.', you may need to globally install `grunt` and `bower`:
-<ul>
-<li>sudo yarn global add grunt-cli</li>
-<li>sudo yarn global add bower</li>
-</ul>
-
-</div>
-
-The build output can be located under the `build` directory. It consists of the following files and
-directories:
-
-* `angular-<version>.zip` — The complete zip file, containing all of the release build
-artifacts.
-
-* `angular.js` — The non-minified `angular` script.
-
-* `angular.min.js` —  The minified `angular` script.
-
-* `angular-scenario.js` — The `angular` End2End test runner.
-
-* `docs/` — A directory that contains all of the files needed to run `docs.angularjs.org`.
-
-* `docs/index.html` — The main page for the documentation.
-
-* `docs/docs-scenario.html` — The End2End test runner for the documentation application.
-
-
-## Running a Local Development Web Server
-
-To debug code and run end-to-end tests, it is often useful to have a local HTTP server. For this purpose, we have
-made available a local web server based on Node.js.
-
-1. To start the web server, run:
-   ```shell
-   grunt webserver
-   ```
-
-2. To access the local server, enter the following URL into your web browser:
-   ```text
-   http://localhost:8000/
-   ```
-   By default, it serves the contents of the AngularJS project directory.
-
-3. To access the locally served docs, visit this URL:
-   ```text
-   http://localhost:8000/build/docs/
-   ```
-
-## Running the Unit Test Suite
-
-We write unit and integration tests with Jasmine and execute them with Karma. To run all of the
-tests once on Chrome run:
-
-```shell
-grunt test:unit
-```
-
-To run the tests on other browsers (Chrome, ChromeCanary, Firefox, Opera and Safari are pre-configured) use:
-
-```shell
-grunt test:unit --browsers=Opera,Firefox
-```
-
-Note there should be _no spaces between browsers_. `Opera, Firefox` is INVALID.
-
-During development, however, it's more productive to continuously run unit tests every time the source or test files
-change. To execute tests in this mode run:
-
-1. To start the Karma server, capture Chrome browser and run unit tests, run:
-
-   ```shell
-   grunt autotest
-   ```
-
-2. To capture more browsers, open this URL in the desired browser (URL might be different if you have multiple instance
-   of Karma running, read Karma's console output for the correct URL):
-
-   ```text
-   http://localhost:9876/
-   ```
-
-3. To re-run tests just change any source or test file.
-
-
-To learn more about all of the preconfigured Grunt tasks run:
-
-```shell
-grunt --help
-```
-
-
-## Running the End-to-end Test Suite
-
-Angular's end to end tests are run with Protractor. Simply run:
-
-```shell
-grunt test:e2e
-```
-
-This will start the webserver and run the tests on Chrome.
+For everything related to contributing, we have a document in our Git Repository that covers the
+basics about support channels, creating issues, and pull requests:
+[Contributing](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md).

+For developers, we have a more detailed document that covers project setup, coding rules, and
+a guide to writing documentation:
+[Developing](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md).
@@ -22,39 +22,89 @@ So it's definitely not a plugin or some other native browser extension.

 ### What is the AngularJS versioning strategy?

-In Angular 1 we do not allow intentional breaking changes to appear in versions where only the "patch"
+In AngularJS we do not allow intentional breaking changes to appear in versions where only the "patch"
 number changes. For example between 1.3.12 and 1.3.13 there can be no breaking changes. We do allow
 breaking changes happen between "minor" number changes. For example between 1.3.15 and 1.4.0 there
-will be a number of breaking changes. We also allow breaking changes between beta releases of Angular.
+are a number of breaking changes. That means AngularJS does not follow
+[semantic versioning (semver)](http://semver.org/) where breaking changes are only
+allowed when the "major" version changes.
+
+We also allow breaking changes between beta releases of AngularJS.
 For example between 1.4.0-beta.4 and 1.4.0-beta.5 there may be breaking changes. We try hard to minimize
 these kinds of change only to those where there is a strong use case such as a strongly requested feature
-improvement, a considerable simplification of the code or a measurable performance improvement.
+improvement, a considerable simplification of the code, a measurable performance improvement, or a better
+developer experience (especially with regard to upgrading to Angular).

-When adding new code to branches of Angular, have a very stringent commit policy:
+When we are making a release we generate updates to the changelog directly from the commits. This
+generated update contains a highlighted section that contains all the breaking changes that have been
+extracted from the commits. We can quickly see in the new changelog exactly what commits contain breaking
+changes and so can application developers when they are deciding whether to update to a new version of
+Angular.

- Every commit must contain tests and documentation updates alongside the code changes and that all the
-tests must pass;
+Features with non-breaking changes can also appear in the "patch" version, e.g. in version 1.6.3 there might
+be a feature that is not available in 1.6.2.
+
+Finally, deprecation of features might also appear in "minor" version updates. That means the features
+will still work in this version, but sometimes must be activated specifically.
+
+#### When are deprecated features removed from the library?
+
+Most of the time we remove a deprecated feature in a next minor version bump. For example, the
+`preAssignBindingsEnabled` `$compileProvider` method was defined in AngularJS `1.5.10`, deprecated in `1.6` and
+will be removed in `1.7`.
+
+In case of jqLite we apply a different strategy - we deprecate features that have an equivalent in jQuery that
+is also deprecated but we only remove the feature once it's removed from jQuery to improve compatibility between
+jqLite and jQuery. One such example is the `bind` method, deprecated in favor of `on` but unlikely to be removed
+from jqLite any time soon.
+
+#### What is the version compatibility between AngularJS main and optional modules?
+
+AngularJS code is separated into a main module ("angular"), and a few different optional modules
+("angular-animate", "angular-route" etc) that are dependant on the main module.
+When a new AngularJS version is released, all modules are updated to the new version.
+This means that the main module and the optional modules must always have the exact same version,
+down to the patch number, otherwise your application might break.
+
+Therefore you must always explicitly lock down your dependencies, for example in the package.json,
+the following means that "angular" and "angular-animate" are always updated to the same version:
+
+```
+{
+  "angular": "~1.6.0",
+  "angular-animate": "~1.6.0"
+}
+```
+
+If you define exact versions, make sure core and optional modules are the same:
+
+```
+{
+  "angular": "1.6.3",
+  "angular-animate": "1.6.3"
+}
+```
+
+
+#### How does AngularJS ensure code quality and guard against regressions?
+
+When adding new code to AngularJS, we have a very stringent commit policy:
+
+- Every commit must pass all existing tests, contain tests for code changes, and update the documentation
 - Commit messages must be written in a specific manner that allows us to parse them and extract the changes
-for release notes.
+for release notes ([see the contributing guidelines](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md))

-The Angular code base has a very large set of unit tests (over 4000) and end to end tests, which are pretty
-comprehensive. This means that a breaking change will require one or more tests to be changed to allow the
+The AngularJS code base has a very large set of unit tests and end-to-end tests. This means that a breaking change will require one or more tests to be changed to allow the
 tests to pass. So when a commit includes tests that are being removed or modified, this is a flag that the
 code might include a breaking change. When reviewing the commit we can then decide whether there really is
 a breaking change and if it is appropriate for the branch to which it is being merged. If so, then we
 require that the commit message contains an appropriate breaking change message.

-Additionally, when a commit lands in our master repository it is synced to Google where we test it against
-over 2000 applications using the test suites of these applications. This allows us to catch regressions
+Additionally, commits are periodically synced to Google where we test it against applications using
+the test suites of these applications. This allows us to catch regressions
 quickly before a release. We've had a pretty good experience with this setup. Only bugs that affect features
 not used at Google or without sufficient test coverage, have a chance of making it through.

-Lastly, when we are making a release we generate updates to the changelog directly from the commits. This
-generated update contains a highlighted section that contains all the breaking changes that have been
-extracted from the commits. We can quickly see in the new changelog exactly what commits contain breaking
-changes and so can application developers when they are deciding whether to update to a new version of
-Angular.
-

 ### Is AngularJS a templating system?

@@ -86,20 +136,18 @@ Yes. See instructions in {@link downloading}.



-### What browsers does Angular work with?
+### What browsers does AngularJS work with?

 We run our extensive test suite against the following browsers: the latest versions of Chrome,
-Firefox, Safari, and Safari for iOs, as well as Internet Explorer versions 9-11. See {@link guide/ie
-Internet Explorer Compatibility} for more details on supporting legacy IE browsers.
+Firefox, Safari, and Safari for iOS, as well as Internet Explorer versions 9-11. See
+{@link guide/ie Internet Explorer Compatibility} for more details on supporting legacy IE browsers.

-If a browser is untested, it doesn't mean it won't work; for example, older Android (2.3.x)
-is supported in the sense that we avoid the dot notation for reserved words as property names,
-but we don't actively test changes against it. You can also expect browsers to work that share
-a large part of their codebase with a browser we test, such as Opera > version 12
+If a browser is untested, it doesn't mean it won't work. You can also expect browsers to work that
+share a large part of their codebase with a browser we test, such as Opera 15 or newer
 (uses the Blink engine), or the various Firefox derivatives.


-### What's Angular's performance like?
+### What's AngularJS's performance like?

 The startup time heavily depends on your network connection, state of the cache, browser used and
 available hardware, but typically we measure bootstrap time in tens or hundreds of milliseconds.
@@ -114,40 +162,40 @@ illustration, we typically build snappy apps with hundreds or thousands of activ
 The size of the file is ~50KB compressed and minified.


-### Can I use the open-source Closure Library with Angular?
+### Can I use the open-source Closure Library with AngularJS?

 Yes, you can use widgets from the [Closure Library](https://developers.google.com/closure/library/)
-in Angular.
+in AngularJS.


-### Does Angular use the jQuery library?
+### Does AngularJS use the jQuery library?

-Yes, Angular can use [jQuery](http://jquery.com/) if it's present in your app when the
-application is being bootstrapped. If jQuery is not present in your script path, Angular falls back
+Yes, AngularJS can use [jQuery](http://jquery.com/) if it's present in your app when the
+application is being bootstrapped. If jQuery is not present in your script path, AngularJS falls back
 to its own implementation of the subset of jQuery that we call {@link angular.element  jQLite}.

-Angular 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer might work correctly with Angular
+AngularJS 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer might work correctly with AngularJS
 but we don't guarantee that.


-### What is testability like in Angular?
+### What is testability like in AngularJS?

 Very testable and designed this way from the ground up. It has an integrated dependency injection
 framework, provides mocks for many heavy dependencies (server-side communication). See
 {@link ngMock} for details.


-### How can I learn more about Angular?
+### How can I learn more about AngularJS?

 Watch the July 17, 2012 talk
 "[AngularJS Intro + Dependency Injection](http://www.youtube.com/watch?v=1CpiB3Wk25U)".


-### How is Angular licensed?
+### How is AngularJS licensed?

 The [MIT License](https://github.com/angular/angular.js/blob/master/LICENSE).

-### Can I download and use the Angular logo artwork?
+### Can I download and use the AngularJS logo artwork?

 Yes! You can find design files in our github repository, under "[angular.js/images/logo](https://github.com/angular/angular.js/tree/master/images/logo)"
 The logo design is licensed under a "[Creative Commons Attribution-ShareAlike 3.0 Unported License](http://creativecommons.org/licenses/by-sa/3.0/)". If you have some other use in mind, contact us.
@@ -168,7 +216,7 @@ For a smaller order, or for other countries, we suggest downloading the logo art

 ## Common Pitfalls

-The Angular support channel (#angularjs on Freenode) sees a number of recurring pitfalls that new users of Angular fall into.
+The AngularJS support channel (#angularjs on Freenode) sees a number of recurring pitfalls that new users of AngularJS fall into.
 This document aims to point them out before you discover them the hard way.

 ### DOM Manipulation
@@ -179,13 +227,13 @@ Use built-in directives, or write your own where necessary, to do your DOM manip
 See below about duplicating functionality.

 If you're struggling to break the habit, consider removing jQuery from your app.
-Really. Angular has the $http service and powerful directives that make it almost always unnecessary.
-Angular's bundled jQLite has a handful of the features most commonly used in writing Angular directives, especially binding to events.
+Really. AngularJS has the $http service and powerful directives that make it almost always unnecessary.
+AngularJS's bundled jQLite has a handful of the features most commonly used in writing AngularJS directives, especially binding to events.

 ### Trying to duplicate functionality that already exists

 There's a good chance that your app isn't the first to require certain functionality.
-There are a few pieces of Angular that are particularly likely to be reimplemented out of old habits.
+There are a few pieces of AngularJS that are particularly likely to be reimplemented out of old habits.

 **ng-repeat**

@@ -198,7 +246,7 @@ Store the data from the server in an array on your `$scope`, and bind it to the
 **ng-show**

 `ng-show` gets this frequently too.
-Conditionally showing and hiding things using jQuery is a common pattern in other apps, but Angular has a better way.
+Conditionally showing and hiding things using jQuery is a common pattern in other apps, but AngularJS has a better way.
 `ng-show` (and `ng-hide`) conditionally show and hide elements based on boolean expressions.
 Describe the conditions for showing and hiding an element in terms of `$scope` variables:

@@ -211,7 +259,7 @@ Note especially the powerful `ng-switch` that should be used instead of several

 `ng-class` is the last of the big three.
 Conditionally applying classes to elements is another thing commonly done manually using jQuery.
-Angular, of course, has a better way.
+AngularJS, of course, has a better way.
 You can give `ng-class` a whitespace-separated set of class names, and then it's identical to ordinary `class`.
 That's not very exciting, so there's a second syntax:

@@ -225,22 +273,22 @@ Note also the handy `ng-class-even` and `ng-class-odd`, and the related though s

 ### `$watch` and `$apply`

-Angular's two-way data binding is the root of all awesome in Angular.
+AngularJS's two-way data binding is the root of all awesome in AngularJS.
 However, it's not magic, and there are some situations where you need to give it a nudge in the right direction.

-When you bind a value to an element in Angular using `ng-model`, `ng-repeat`, etc., Angular creates a `$watch` on that value.
+When you bind a value to an element in AngularJS using `ng-model`, `ng-repeat`, etc., AngularJS creates a `$watch` on that value.
 Then whenever a value on a scope changes, all `$watch`es observing that element are executed, and everything updates.

 Sometimes, usually when you're writing a custom directive, you will have to define your own `$watch` on a scope value to make the directive react to changes.

 On the flip side, sometimes you change a scope value in some code, but the app doesn't react to it.
-Angular checks for scope variable changes after pieces of your code have finished running; for example, when `ng-click` calls a function on your scope, Angular will check for changes and react.
-However, some code is outside of Angular and you'll have to call `scope.$apply()` yourself to trigger the update.
+AngularJS checks for scope variable changes after pieces of your code have finished running; for example, when `ng-click` calls a function on your scope, AngularJS will check for changes and react.
+However, some code is outside of AngularJS and you'll have to call `scope.$apply()` yourself to trigger the update.
 This is most commonly seen in event handlers in custom directives.

 ### Combining `ng-repeat` with other directives

-`ng-repeat` is extremely useful, one of the most powerful directives in Angular.
+`ng-repeat` is extremely useful, one of the most powerful directives in AngularJS.
 However the transformation it applies to the DOM is substantial.
 Therefore applying other directives (such as `ng-show`, `ng-controller` and others) to the same element as `ng-repeat` generally leads to problems.

@@ -249,7 +297,7 @@ If you want to apply a directive to each inner piece of the repeat, put it on a

 ### `$rootScope` exists, but it can be used for evil

-Scopes in Angular form a hierarchy, prototypically inheriting from a root scope at the top of the tree.
+Scopes in AngularJS form a hierarchy, prototypically inheriting from a root scope at the top of the tree.
 Usually this can be ignored, since most views have a controller, and therefore a scope, of their own.

 Occasionally there are pieces of data that you want to make global to the whole app.
@@ -16,9 +16,9 @@ becoming an Angular expert.
   starter app with a directory layout, test harness, and scripts to begin building your application.


-# Further Steps
+## Further Steps

-## Watch Videos
+### Watch Videos

 If you haven’t had a chance to watch the videos from the homepage, please check out:

@@ -29,13 +29,13 @@ If you haven’t had a chance to watch the videos from the homepage, please chec
 And visit our [YouTube channel](http://www.youtube.com/user/angularjs) for more AngularJS video presentations and
 tutorials.

-## Subscribe
+### Subscribe

 * Subscribe to the [mailing list](http://groups.google.com/forum/?fromgroups#!forum/angular).  Ask questions here!
-* Follow us on [Twitter](https://twitter.com/intent/follow?original_referer=http%3A%2F%2Fangularjs.org%2F&region=follow_link&screen_name=angularjs&source=followbutton&variant=2.0)
+* Follow us on [Twitter](https://twitter.com/intent/follow?original_referer=http%3A%2F%2Fangularjs.org%2F&region=follow_link&screen_name=angular&source=followbutton&variant=2.0)
 * Add us to your circles on [Google+](https://plus.google.com/110323587230527980117/posts)

-## Read more
+### Read more

 The AngularJS documentation includes the {@link guide/index Developer Guide} covering concepts and the
 {@link ./api API Reference} for syntax and usage.
@@ -41,7 +41,7 @@ maintain. As we add more and more features, our files will get bigger and bigger
 difficult to navigate and find the code we are looking for.

 Instead we should put each feature/entity in its own file. Each stand-alone controller will be
-defined in its own file, each component will be defined in each own file, etc.
+defined in its own file, each component will be defined in its own file, etc.

 Luckily, we don't need to change anything with respect to that guideline in our code, since we have
 already defined our `phoneList` component in its own `phone-list.component.js` file. Good job!
@@ -54,7 +54,7 @@ We will keep this in mind though, as we add more features.
 So, now that we learned we should put everything in its own file, our `app/` directory will soon be
 full with dozens of files and specs (remember we keep our unit test files next to the corresponding
 source code files). What's more important, logically related files will not be grouped together; it
-will be really difficult of locate all files related to a specific section of the application and
+will be really difficult to locate all files related to a specific section of the application and
 make a change or fix a bug.

 So, what shall we do?
@@ -194,7 +194,7 @@ angular.module('phonecatApp', [
 ```

 Now, in addition to the core services and directives, we can also configure the `$route` service
-(using it's provider) for our application. In order to be able to quickly locate the configuration
+(using its provider) for our application. In order to be able to quickly locate the configuration
 code, we put it into a separate file and used the `.config` suffix.

 <br />
@@ -402,7 +402,7 @@ You can now rerun `npm run protractor` to see the tests run (and hopefully pass)

 <div></div>

-* Try to add a `{{$ctrl.phoneId}` binding in the template string for the phone details view:
+* Try to add a `{{$ctrl.phoneId}}` binding in the template string for the phone details view:

  ```js
  when('/phones/:phoneId', {
@@ -173,7 +173,10 @@ angular.module('phoneList', ['core.phone']);
 **`app/phone-detail/phone-detail.module.js`:**

 ```js
-angular.module('phoneDetail', ['core.phone']);
+angular.module('phoneDetail', [
+  'ngRoute',
+  'core.phone'
+]);
 ```

 <br />
@@ -46,14 +46,14 @@ Since we are using [Bower][bower] to install client-side dependencies, this step
    "angular-resource": "1.5.x",
    "angular-route": "1.5.x",
    "bootstrap": "3.3.x",
-    "jquery": "2.2.x"
+    "jquery": "3.2.x"
  }
 }
 ```

 * `"angular-animate": "1.5.x"` tells bower to install a version of the angular-animate module that
  is compatible with version 1.5.x of Angular.
-* `"jquery": "2.2.x"` tells bower to install the latest patch release of the 2.2 version of jQuery.
+* `"jquery": "3.2.x"` tells bower to install the latest patch release of the 3.2 version of jQuery.
  Note that this is not an Angular library; it is the standard jQuery library. We can use bower to
  install a wide range of 3rd party libraries.

@@ -328,7 +328,7 @@ The applied CSS classes are much the same as with `ngRepeat`. Each time a new pa
 ensures that all views are contained within a single HTML element, which allows for easy animation
 control.

-For more on CSS animations, see the [Web Platform documentation][webplatform-animations].
+For more on CSS animations, see the [MDN web docs][mdn-animations].


 ## Animating `ngClass` with JavaScript
@@ -561,4 +561,4 @@ There you have it! We have created a web application in a relatively short amoun
 [caniuse-css-transitions]: http://caniuse.com/#feat=css-transitions
 [jquery]: https://jquery.com/
 [jquery-animate]: https://api.jquery.com/animate/
-[webplatform-animations]: https://docs.webplatform.org/wiki/css/properties/animations
+[mdn-animations]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
@@ -1,10 +1,8 @@
 'use strict';

 var gulp = require('gulp');
-var log = require('gulp-util').log;
 var concat = require('gulp-concat');
 var eslint = require('gulp-eslint');
-var bower = require('bower');
 var Dgeni = require('dgeni');
 var merge = require('event-stream').merge;
 var path = require('canonical-path');
@@ -18,7 +16,6 @@ var rename = require('gulp-rename');
 // See clean and bower for async tasks, and see assets and doc-gen for dependent tasks below

 var outputFolder = '../build/docs';
-var bowerFolder = 'bower_components';

 var src = 'app/src/**/*.js';
 var ignoredFiles = '!src/angular.bind.js';
@@ -55,29 +52,18 @@ var getMergedEslintConfig = function(filepath) {
  };
 };

-var copyComponent = function(component, pattern, sourceFolder, packageFile) {
+var copyComponent = function(component, pattern, base, sourceFolder, packageFile) {
  pattern = pattern || '/**/*';
-  sourceFolder = sourceFolder || bowerFolder;
-  packageFile = packageFile || 'bower.json';
+  base = base || '';
+  sourceFolder = sourceFolder || '../node_modules';
+  packageFile = packageFile || 'package.json';
  var version = require(path.resolve(sourceFolder, component, packageFile)).version;
  return gulp
-    .src(sourceFolder + '/' + component + pattern)
+    .src(sourceFolder + '/' + component + pattern, {base: sourceFolder + '/' + component + '/' + base})
    .pipe(gulp.dest(outputFolder + '/components/' + component + '-' + version));
 };


-gulp.task('bower', function() {
-  var bowerTask = bower.commands.install();
-  bowerTask.on('log', function(result) {
-    log('bower:', result.id, result.data.endpoint.name);
-  });
-  bowerTask.on('error', function(error) {
-    log(error);
-  });
-  return bowerTask;
-});
-
-
 gulp.task('build-app', function() {
  var file = 'docs.js';
  var minFile = 'docs.min.js';
@@ -94,7 +80,7 @@ gulp.task('build-app', function() {
 });


-gulp.task('assets', ['bower'], function() {
+gulp.task('assets', function() {
  var JS_EXT = /\.js$/;
  return merge(
    gulp.src(['img/**/*']).pipe(gulp.dest(outputFolder + '/img')),
@@ -111,17 +97,19 @@ gulp.task('assets', ['bower'], function() {
            .pipe(gulp.dest(outputFolder));
        }
      })),
-    copyComponent('bootstrap', '/dist/**/*'),
-    copyComponent('open-sans-fontface'),
-    copyComponent('lunr.js', '/*.js'),
-    copyComponent('google-code-prettify'),
-    copyComponent('jquery', '/dist/*.js'),
-    copyComponent('marked', '/**/*.js', '../node_modules', 'package.json')
+    copyComponent('bootstrap', '/dist/css/bootstrap?(.min).css', 'dist'),
+    copyComponent('bootstrap', '/dist/fonts/*', 'dist'),
+    copyComponent('open-sans-fontface', '/fonts/{Regular,Semibold,Bold}/*'),
+    copyComponent('lunr', '/lunr?(.min).js'),
+    copyComponent('google-code-prettify', '/**/{lang-css,prettify}.js'),
+    copyComponent('jquery', '/dist/jquery.js', 'dist'),
+    copyComponent('marked', '/lib/marked.js'),
+    copyComponent('marked', '/marked.min.js')
  );
 });


-gulp.task('doc-gen', ['bower'], function() {
+gulp.task('doc-gen', function() {
  var dgeni = new Dgeni([require('./config')]);
  return dgeni.generate().catch(function() {
    process.exit(1);
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`// Override me with ?jquery=/bower_components/jquery/dist/jquery.js`
				`@@ -0,0 +1 @@`
				.visible-phone{display:none}.visible-desktop{display:block}.navbar{display:block}.navbar .container{padding:0 16px;width:auto}.navbar .brand{float:left;margin:8px 80px 0 8px;padding:0}.navbar .brand a{display:block;height:30px;margin:6px 0 5px 0;overflow:hidden;padding:0;width:117px}.navbar .nav{float:right}.navbar .nav .dropdown-toggle{color:rgba(255,255,255,0.87);font-size:16px;font-weight:300;line-height:56px;padding:0 24px;text-transform:uppercase;transition:all .3s}.navbar .nav .dropdown-toggle:hover,.navbar .nav .dropdown-toggle:active,.navbar .nav .dropdown-toggle:focus{background:#37474F;color:#fff}.navbar .nav .dropdown-menu{background:#37474F;border:none;border-radius:0;box-shadow:0 0 16px rgba(0,0,0,0.12),0 16px 16px rgba(0,0,0,0.24);color:#fff;left:auto;margin:0;padding:0;right:0}.navbar .nav .dropdown-menu:after,.navbar .nav .dropdown-menu:before{display:none}.navbar .nav .dropdown-menu li{border-bottom:1px solid rgba(38,50,56,0.56);box-sizing:border-box;line-height:48px}.navbar .nav .dropdown-menu li:last-child{border:none}.navbar .nav .dropdown-menu a{background:#37474F;color:#fff;font-weight:300;line-height:48px;padding:0 16px;transition:all .2s}.navbar .nav .dropdown-menu a:hover,.navbar .nav .dropdown-menu a:focus{background:#455A64}.navbar .navbar-search{left:200px;margin:0;position:absolute;right:440px;top:8px;width:auto}.navbar .navbar-search i{color:#546E7A;font-size:16px;left:12px;position:absolute;top:11px}.navbar .navbar-search .search-query{background:#37474F;border:none;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#546E7A;font-size:14px;height:40px;width:100%;padding:0 16px 0 32px;text-shadow:none;transition:all .3s}.navbar .navbar-search .search-query:-webkit-autofill,.navbar .navbar-search .search-query:-webkit-autofill:hover,.navbar .navbar-search .search-query:-webkit-autofill:focus{background-color:#fff;transition:background-color 5000s ease-in-out 0s;-webkit-text-fill-color:#455A64}.navbar .navbar-search .search-query:hover,.navbar .navbar-search .search-query:active,.navbar .navbar-search .search-query:focus{background:#fff;box-shadow:inset 0 2px 4px rgba(0,0,0,0.24);color:#2196F3}.navbar .navbar-search .search-query::-webkit-input-placeholder{color:#546E7A}.navbar .navbar-search .search-query::-moz-placeholder{color:#546E7A}.navbar .navbar-search .search-query:-ms-input-placeholder{color:#546E7A}.navbar .navbar-search .search-query:-moz-placeholder{color:#546E7A}#navbar-main .navbar-inner{background:#263238;height:56px}#navbar-notice{z-index:1029;top:56px}#navbar-notice .navbar-inner{background:#ECEFF1;box-shadow:0 0 3px rgba(0,0,0,0.12),0 3px 3px rgba(0,0,0,0.24);height:auto}.site-notice{padding:4px 0;text-align:center;font-size:13px;margin:0}@media handheld and (max-width: 800px), screen and (max-device-width: 800px), screen and (max-width: 800px){.visible-phone{display:block}.visible-desktop{display:none}}@media handheld and (max-width: 800px), screen and (max-device-width: 800px), screen and (max-width: 800px){.homepage .container{padding:16px;width:auto}.homepage .span1{width:auto}.homepage .span2{width:auto}.homepage .span3{width:auto}.homepage .span4{width:auto}.homepage .span5{width:auto}.homepage .span6{width:auto}.homepage .span7{width:auto}.homepage .span8{width:auto}.homepage .span9{width:auto}.homepage .span10{width:auto}.homepage .navbar .container{padding:0 8px}.homepage #navbar-main .navbar-inner{height:40px}.homepage #navbar-main .brand{margin:6px 0 0 0}.homepage #navbar-main .brand a{margin:0}.homepage #navbar-main .nav{margin:0}.homepage #navbar-main .nav .dropdown-toggle{font-size:12px;line-height:40px;padding:0 8px}.homepage #navbar-main .dropdown-menu a{padding:0 8px}.homepage #navbar-main .navbar-search{background:#263238;border-bottom:1px solid #263238;left:0;right:0;top:100%}.homepage #navbar-main .navbar-search i{left:12px;top:7px}.homepage #navbar-main .navbar-search .search-query{border-radius:0;height:32px}.homepage #navbar-notice{top:40px}.homepage #navbar-notice .site-notice{font-size:11px}.homepage .hero{padding:80px 32px 32px 32px}.homepage .hero h2{background-size:230px 60px;height:60px;width:230px}}