c0d3a019c2
**Pipes Sample Code** Migrated all sample code in the `examples/pipes` folder. Did not touch the pipes in the ToH or Testing folders. >The existing, complex discussion of the `CurrencyPipe` within `pipes-transform-data.md` cried out for a new `concurrency-formatting.component` example`. **Extracted "pipe precedence" into its own page** The topic had been extracted from `pipe.md` and tacked on to the bottom of the `pipes-overview.md` page. It's an advanced and somewhat obscure topic that doesn't belong in the overview. Rather than throw it away, I created a new `pipe-precedence.md` page and added it to the bottom of the pipes section navigation. I also tried to improve both the guide text and the companion component, `precedence.component`. **How to create a pipe is missing** The readers are told they can create their own pipes in several places throughout the docs. But there are no links and you can't navigate to a page that covers the topic. This is a serious omission! The topic is introduced in the `pipes-custom-data-trans.md` page (extracted verbatim from `pipes.md`). But you can't navigate to this page and their are no links to it. TODO: restore this page and add it to the left-nav. **Change `pipes.md` references to `pipe-overview.md`** The original, kitchen-sink page, `pipes.md`, was disconnected from navigation long ago, in favor of multiple pages such as `pipe-overview.md`. The page is still in the AIO documentation and can be found by searching or by links from 3rd party documenters. Landing on that page hides the left-nav. In this commit, we treat `pipes.md` as deprecated (which it seems to be). Therefore, this commit retargets previous `pipes.md` references to `pipe-overview.md`. >The `change-detection-slow-computations.md` is the exception. It refers to "pure pipes", a subject not covered in the current pipe documentation. That reference is retargeted to `api/core/Pipe#pure`. Certain code files are only referenced in `pipe.md`. They still work and are displayed in the overall pipes code sample as before. Now they are marked with deprecation comments for future treatment or removal. For consistency, certain sections of `pipes.md` were replaced by the contents of the corresponding current pages. PR Close #51333
13 KiB
Example applications
The following is a list of the example applications in the Angular documentation.
Fundamentals
These examples demonstrate minimal, fundamental concepts.
Getting started application
Introductory application demonstrating Angular features. For more information, see Getting started.
Launching your app
Demonstrates the Angular bootstrapping process. For more information, see Launching your app with a root module.
Structure of Angular applications
Demonstrates the fundamental architecture of Angular applications. For more information, see Introduction to Angular concepts.
Tour of Heroes tutorial application
The Tour of Heroes is a comprehensive tutorial that guides you through the process of building an application with many of Angular's most popular features.
Tour of Heroes: completed application
Completed Tour of Heroes example application. For more information, see Tour of Heroes app and tutorial.
Tour of Heroes: Creating an application
Initial Tour of Heroes example application for beginning the tutorial. For more information, see Create a new project.
Tour of Heroes: The hero editor
First step of the Tour of Heroes example application. For more information, see The hero editor.
Tour of Heroes: Display a selection list
Second step of the Tour of Heroes example application. For more information, see Display a selection list.
Tour of Heroes: Create a feature component
Third step of the Tour of Heroes example application. For more information, see Create a feature component.
Tour of Heroes: Add services
Fourth step of the Tour of Heroes example application. For more information, see Add services.
Tour of Heroes: Add in-app navigation with routing
Fifth step of the Tour of Heroes example application. For more information, see Add in-app navigation with routing.
Tour of Heroes: Get data from a server
Sixth and final step of the Tour of Heroes example application. For more information, see Get data from a server.
Working with templates
These examples demonstrate features of Angular templates.
Accessibility
Demonstrates building Angular applications in a more accessible way. For more information, see Accessibility.
Animations
Demonstrates Angular's animation features. For more information, see Introduction to Angular animations.
Attribute, class, and style bindings
Demonstrates Angular attribute, class, and style bindings. For more information, see Attribute, class, and style bindings.
Attribute directives
Demonstrates Angular attribute directives. For more information, see Attribute directives.
Binding syntax
Demonstrates Angular's binding syntax. For more information, see Binding syntax: an overview.
Built-in directives
Demonstrates Angular built-in directives. For more information, see Built-in directives.
Built-in template functions
Demonstrates Angular built-in template functions.
For more information, see the $any() type cast function section of Template expression operators.
Content projection
Demonstrates how to use Angular's content projection feature when creating reusable components.
Interpolation
Demonstrates Angular interpolation. For more information, see Interpolation and template expressions.
Template expression operators
Demonstrates expression operators in Angular templates. For more information, see Template expression operators.
Template reference variables
Demonstrates Angular's template reference variables. For more information, see Template reference variables.
<ngcontainer>
Demonstrates <ngcontainer>.
For more information, see the ng-container section of Built-in directives .
Pipes
Demonstrates Angular pipes. For more information, see Transforming Data Using Pipes.
Property binding
Demonstrates property binding in Angular. For more information, see Property binding.
Structural directives
Demonstrates Angular structural directives. For more information, see Structural directives.
Two-way binding
Demonstrates two-way data binding in Angular applications. For more information, see Two-way binding.
Template syntax
Comprehensive demonstration of Angular's template syntax. For more information, see Template reference variables.
User input
Demonstrates responding to user actions. For more information, see User input.
Working with components
These examples demonstrate features of Angular components.
Component interaction
Demonstrates how Angular shares data between components. For more information, see Component interaction.
Component styles
Demonstrates styling in Angular applications. For more information, see Component styles.
Dynamic component loader
Demonstrates how to dynamically load components. For more information, see Dynamic component loader.
Elements
Demonstrates using Angular custom elements. For more information, see Angular elements overview.
Event binding
Demonstrates binding to events in Angular. For more information, see Event binding.
@Input() and @Output()
Demonstrates @Input() and @Output() in components and directives.
For more information, see @Input() and @Output() properties.
Lifecycle hooks
Demonstrates Angular lifecycle hooks such as ngOnInit() and ngOnChanges().
For more information, see Hooking into the component lifecycle.
Dependency injection
Dependency injection fundamentals
Demonstrates fundamentals of Angular dependency injection. For more information, see Dependency injection.
Dependency injection features
Demonstrates many of the features of Angular dependency injection. For more information, see Dependency injection in action.
Providing dependencies in NgModules
Demonstrates providing services in NgModules. For more information, see Providing dependencies in modules.
Hierarchical dependency injection
Demonstrates Angular injector trees and resolution modifiers. For more information, see Hierarchical injectors.
Dependency injection with providers and viewProviders
Demonstrates how providers and viewproviders affect dependency injection.
For more information, see the Providing services in @Component() section of Hierarchical injectors.
Resolution modifiers and dependency injection
Demonstrates Angular's resolution modifiers, such as @Self().
For more information, see the Modifying service visibility section of Hierarchical injectors.
Forms
Forms overview
Demonstrates foundational concepts of Angular forms. For more information, see Introduction to forms in Angular.
Reactive forms
Demonstrates Angular's reactive forms. For more information, see Reactive forms.
Template-driven forms
Demonstrates Angular template-driven forms. For more information, see Building a template-driven form.
Form validation
Demonstrates validating forms in Angular. For more information, see Validating form input.
Dynamic forms
Demonstrates creating dynamic forms. For more information, see Building dynamic forms.
NgModules
NgModules
Demonstrates fundamentals of NgModules. For more information, see NgModules.
Feature modules
Demonstrates using feature modules in Angular. For more information, see Feature modules.
Lazy loading NgModules
Demonstrates lazy loading NgModules. For more information, see Lazy-loading feature modules.
Routing
Router
Demonstrates Angular's routing features. For more information, see Router.
Router tutorial
Demonstrates Angular's fundamental routing techniques. For more information, see Using Angular routes in a single-page application.
Documentation
Style guide for Documentation contributions
Demonstrates Angular documentation style guidelines. For more information, see Angular documentation style guide.
Server communication
HttpClient
Demonstrates server interaction using HTTP. For more information, see Communicating with backend services using HTTP.
Workflow
Security
Demonstrates security concepts in Angular applications. For more information, see Security.
Testing
For the sample application that the testing guides describe, see the sample app.
Demonstrates techniques for testing Angular. For more information, see Testing.
Hybrid Angular applications
AngularJS to Angular concepts: Quick reference
Demonstrates Angular for those with an AngularJS background. For more information, see AngularJS to Angular concepts: Quick reference.
@reviewed 2023-08-14