From 62146365804ba4f50fb87f3173792d7a1dd3f97f Mon Sep 17 00:00:00 2001 From: David Shevitz Date: Fri, 5 Nov 2021 22:59:54 +0000 Subject: [PATCH] docs: add two new overview pages: developer-guide-overview and understanding-angular-overview (#44091) PR Close #44091 --- .pullapprove.yml | 2 + aio/content/guide/developer-guide-overview.md | 85 +++++++++++++++++++ .../guide/understanding-angular-overview.md | 59 +++++++++++++ aio/content/navigation.json | 20 +++-- 4 files changed, 161 insertions(+), 5 deletions(-) create mode 100644 aio/content/guide/developer-guide-overview.md create mode 100644 aio/content/guide/understanding-angular-overview.md diff --git a/.pullapprove.yml b/.pullapprove.yml index 30145da4fbb..8665f857d90 100644 --- a/.pullapprove.yml +++ b/.pullapprove.yml @@ -320,6 +320,7 @@ groups: 'aio/content/guide/component-overview.md', 'aio/content/examples/component-overview/**', 'aio/content/guide/component-styles.md', + 'aio/content/guide/developer-guide-overview.md', 'aio/content/guide/view-encapsulation.md', 'aio/content/examples/component-styles/**', 'aio/content/examples/content-projection/**', @@ -409,6 +410,7 @@ groups: 'aio/content/guide/style-precedence.md', 'aio/content/images/guide/structural-directives/**', 'aio/content/guide/template-statements.md', + 'aio/content/guide/understanding-angular-overview.md', 'aio/content/guide/user-input.md', 'aio/content/examples/user-input/**', 'aio/content/images/guide/user-input/**', diff --git a/aio/content/guide/developer-guide-overview.md b/aio/content/guide/developer-guide-overview.md new file mode 100644 index 00000000000..b9de664ac37 --- /dev/null +++ b/aio/content/guide/developer-guide-overview.md @@ -0,0 +1,85 @@ +# Angular Developer Guides + +As an application framework, Angular includes a collection of well-integrated libraries that cover a wide variety of features. + + +The Angular libraries include routing, forms management, client-server communication, and more. + +This topic lists the various developer guides for you to learn more about these Angular features and to help you determine the correct use of each in your application. + +## Prerequisites + +To get the most out of these developer guides, you should review the following topics: + +* [What is Angular][AioGuideWhatIsAngular] +* [Getting started tutorial][AioStart] +* [Understanding Angular][AioGuideUnderstandingAngularOverview] + +## Learn about Angular's features + +
+ +
Routing and Navigation
+

Learn how to use the Angular router to handle page navigation and other tasks.

+

Router

+ + +
Forms
+

Learn about the two approaches to forms in Angular: template-driven and reactive.

+

Forms

+ + +
HTTP
+

Learn how to connect to a server using the HTTP client service in Angular.

+

HTTP client

+ + +
Testing
+

Learn about tips and techniques for testing Angular applications.

+

Testing

+ + +
Internationalization
+

Learn how to localize your Angular application.

+

i18n and $localize

+ + +
Animations
+

Learn about how to add an animation to your Angular application.

+

Animations

+ + +
Service Workers and PWA
+

Learn about how to us a service worker to create a progressive web application.

+

Service workers and PWA

+ + +
Web Workers
+

Learn more about how to use a web worker to run a CPU-intensive computation in a background thread.

+

Web Workers

+ + +
Server-side rendering
+

Learn more about how to use Angular Universal to create a static application page.

+

Server-side rendering

+ + +
Pre-rendering
+

Learn about how to use pre-rendering to process a dynamic page at build time.

+

Pre-rendering

+ +
+ + + +[AioGuideUnderstandingAngularOverview]: guide/understanding-angular-overview "Understanding Angular | Angular" + +[AioGuideWhatIsAngular]: guide/what-is-angular "What is Angular\? | Angular" + +[AioStart]: start "Getting started with Angular | Angular" + + + + + +@reviewed 2021-11-05 diff --git a/aio/content/guide/understanding-angular-overview.md b/aio/content/guide/understanding-angular-overview.md new file mode 100644 index 00000000000..c9a386d06e0 --- /dev/null +++ b/aio/content/guide/understanding-angular-overview.md @@ -0,0 +1,59 @@ +# Understanding Angular + +To understand the capabilities of the Angular framework, you need to learn about the following: + +* Components +* Templates +* Directives +* Dependency injection + +The topics in this section explain these features and concepts, and how you can use them. + +## Prerequisites + +To get the most out of these developer guides, you should review the following topics: + +* [What is Angular][AioGuideWhatIsAngular] +* [Getting started tutorial][AioStart] + +## Learn about Angular basics + +
+ +
Components
+

Learn about Angular components. A component is a key building block of Angular development.

+

Components

+ + +
Templates
+

Learn about how to build an Angular template.

+

Templates

+ + +
Directives
+

Learn about Angular directives. A directive is a class that adds additional behavior to elements in your Angular applications.

+

Directives

+ + +
Dependency injection
+

Learn about dependency injection. Dependency injection refers to services or objects that a class needs to perform a specific function.

+

Dependency injection

+ + +
+ + + +[AioGuideWhatIsAngular]: guide/what-is-angular "What is Angular\? | Angular" + +[AioStart]: start "Getting started with Angular | Angular" + + + + + +@reviewed 2021-11-05 diff --git a/aio/content/navigation.json b/aio/content/navigation.json index 45d7483b747..5b5e4876351 100644 --- a/aio/content/navigation.json +++ b/aio/content/navigation.json @@ -100,11 +100,16 @@ }, { "title": "Understanding Angular", - "tooltip": "Learn the concepts essential to becoming a proficient Angular developer.", + "tooltip": "Learn the essential concepts to become a proficient Angular developer.", "children": [ + { + "title": "Overview", + "url": "guide/understanding-angular-overview", + "tooltip": "Learn about the most common parts of an Angular application." + }, { "title": "Components", - "tooltip": "Building dynamic views with data binding", + "tooltip": "Learn more about how to use data binding to build dynamic views", "children": [ { "url": "guide/component-overview", @@ -249,12 +254,17 @@ ] }, { - "title": "Developer Guides", + "title": "Developer guides", "tooltip": "Learn more about how to use Angular to build your applications.", "children": [ { - "title": "Routing & Navigation", - "tooltip": "Build in-app navigation among views using the Angular Router.", + "url": "guide/developer-guide-overview", + "title": "Overview", + "tooltip": "A list of developer guides for building Angular applications." + }, + { + "title": "Routing and Navigation", + "tooltip": "Learn how to use Angular Router to build in-app navigation between views.", "children": [ { "url": "guide/routing-overview",