docs: add http guide sample and adjust text

[wardbell]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[x] Documentation content changes
[ ] angular.io application / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

The current Http Guide does not have a working code sample. Worse, the code example for this guide is actually the code sample for the discontinued old HTTP module.

The guide does not reference that sample. Instead, it uses markdown ticks to present extracts from a hypothetical application. These extracts do not conform to style guidelines (e.g, they perform HTTP operations within the components instead of delegating to a service) and In several cases there are minor syntax errors.

What is the new behavior?

Added a working HttpClient sample that is Hero themed and loosely based on ToH part 6 (the HTTP lesson).

The guide prose is adjusted to incorporate excerpts from the code sample. All substantive points in the original prose are retained.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

[mary-poppins]

You can preview a3de0fe at https://pr21326-a3de0fe.ngbuilds.io/.
You can preview a53d83f at https://pr21326-a53d83f.ngbuilds.io/.

[mary-poppins]

You can preview 6636ebe at https://pr21326-6636ebe.ngbuilds.io/.

[mary-poppins]

You can preview 4912013 at https://pr21326-4912013.ngbuilds.io/.

[mary-poppins]

You can preview 40f81fe at https://pr21326-40f81fe.ngbuilds.io/.

[mary-poppins]

You can preview 07d5302 at https://pr21326-07d5302.ngbuilds.io/.

[mary-poppins]

You can preview 4f8e051 at https://pr21326-4f8e051.ngbuilds.io/.

[mary-poppins]

You can preview c4b6725 at https://pr21326-c4b6725.ngbuilds.io/.

[mary-poppins]

You can preview f9c029a at https://pr21326-f9c029a.ngbuilds.io/.

[mary-poppins]

You can preview edaa027 at https://pr21326-edaa027.ngbuilds.io/.

[mary-poppins]

You can preview 5c13889 at https://pr21326-5c13889.ngbuilds.io/.

[mary-poppins]

You can preview f602f33 at https://pr21326-f602f33.ngbuilds.io/.

[mary-poppins]

You can preview 9c29903 at https://pr21326-9c29903.ngbuilds.io/.

[mary-poppins]

You can preview 12eb0db at https://pr21326-12eb0db.ngbuilds.io/.

[mary-poppins]

You can preview 7569265 at https://pr21326-7569265.ngbuilds.io/.

[IgorMinar]

Can we get the stackblitz PR #20165 merged first before this lands? otherwise the stackblitz PR will suffer another huge merge conflict.

[wardbell]

I'm cool with fitting this in after StackBlitz lands. I anticipated that a bit by preparing the stackblitz.json files for this guide.

Sign me up for the conflict resolution when the time comes.

[wardbell]

The merge conflicts on Jan 24 are due to the Stackblitz merge. I will resolve and move to stackblitz at same time.

[wardbell]

Merge conflicts created by stackblitz PR resolved.
Stackblitz's for app and tests both working.
E2E tests and lint check pass
Docs are good and pass link check.

Ready to merge.

[mary-poppins]

You can preview 35ed0fe at https://pr21326-35ed0fe.ngbuilds.io/.

[mary-poppins]

You can preview 4bd2c96 at https://pr21326-4bd2c96.ngbuilds.io/.

[wardbell]

The CI failure (as of this comment) appears to be a known, reported, unrelated saucelabs flake.

[ngbot]

I see that you just added the PR action: merge label, but the following checks are still failing:
     missing required label: "PR target:"
     status "code-review/pullapprove" is pending

If you want your PR to be merged, it has to pass all the CI checks.

If you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}