From b4ac0ef4c6fa261685f30090de4cb61db9fd3147 Mon Sep 17 00:00:00 2001 From: David Shevitz Date: Mon, 8 Feb 2021 18:45:18 +0000 Subject: [PATCH] docs: add what is angular topic --- .pullapprove.yml | 4 +- .../what-is-angular/e2e/src/app.e2e-spec.ts | 61 +++++ .../what-is-angular/example-config.json | 0 .../src/app/app.component.html | 9 + .../what-is-angular/src/app/app.component.ts | 7 + .../what-is-angular/src/app/app.module.ts | 30 +++ .../hello-world-bindings.component.html | 6 + .../hello-world-bindings.component.ts | 17 ++ .../hello-world-di.component.html | 3 + .../hello-world-di.component.ts | 19 ++ .../src/app/hello-world-example.html | 4 + .../hello-world-interpolation.component.html | 3 + .../hello-world-interpolation.component.ts | 9 + .../hello-world-ngif.component.html | 9 + .../hello-world-ngif.component.ts | 21 ++ .../src/app/hello-world-template.component.ts | 24 ++ .../app/hello-world/hello-world.component.ts | 14 ++ .../what-is-angular/src/app/logger.service.ts | 8 + .../examples/what-is-angular/src/index.html | 13 ++ .../examples/what-is-angular/src/main.ts | 12 + .../examples/what-is-angular/stackblitz.json | 8 + aio/content/guide/what-is-angular.md | 209 ++++++++++++++++++ aio/content/marketing/docs.md | 6 + aio/content/navigation.json | 4 + 24 files changed, 499 insertions(+), 1 deletion(-) create mode 100644 aio/content/examples/what-is-angular/e2e/src/app.e2e-spec.ts create mode 100644 aio/content/examples/what-is-angular/example-config.json create mode 100644 aio/content/examples/what-is-angular/src/app/app.component.html create mode 100644 aio/content/examples/what-is-angular/src/app/app.component.ts create mode 100644 aio/content/examples/what-is-angular/src/app/app.module.ts create mode 100644 aio/content/examples/what-is-angular/src/app/hello-world-bindings/hello-world-bindings.component.html create mode 100644 aio/content/examples/what-is-angular/src/app/hello-world-bindings/hello-world-bindings.component.ts create mode 100644 aio/content/examples/what-is-angular/src/app/hello-world-di/hello-world-di.component.html create mode 100644 aio/content/examples/what-is-angular/src/app/hello-world-di/hello-world-di.component.ts create mode 100644 aio/content/examples/what-is-angular/src/app/hello-world-example.html create mode 100644 aio/content/examples/what-is-angular/src/app/hello-world-interpolation/hello-world-interpolation.component.html create mode 100644 aio/content/examples/what-is-angular/src/app/hello-world-interpolation/hello-world-interpolation.component.ts create mode 100644 aio/content/examples/what-is-angular/src/app/hello-world-ngif/hello-world-ngif.component.html create mode 100644 aio/content/examples/what-is-angular/src/app/hello-world-ngif/hello-world-ngif.component.ts create mode 100644 aio/content/examples/what-is-angular/src/app/hello-world-template.component.ts create mode 100644 aio/content/examples/what-is-angular/src/app/hello-world/hello-world.component.ts create mode 100644 aio/content/examples/what-is-angular/src/app/logger.service.ts create mode 100644 aio/content/examples/what-is-angular/src/index.html create mode 100644 aio/content/examples/what-is-angular/src/main.ts create mode 100644 aio/content/examples/what-is-angular/stackblitz.json create mode 100644 aio/content/guide/what-is-angular.md diff --git a/.pullapprove.yml b/.pullapprove.yml index 2122274820e0a..8f0b674aa49b2 100644 --- a/.pullapprove.yml +++ b/.pullapprove.yml @@ -920,7 +920,9 @@ groups: 'aio/content/examples/getting-started-v0/**', 'aio/content/examples/getting-started/**', 'aio/content/start/**', - 'aio/content/images/guide/start/**' + 'aio/content/images/guide/start/**', + 'aio/content/examples/what-is-angular/**', + 'aio/content/guide/what-is-angular.md' ]) reviewers: users: diff --git a/aio/content/examples/what-is-angular/e2e/src/app.e2e-spec.ts b/aio/content/examples/what-is-angular/e2e/src/app.e2e-spec.ts new file mode 100644 index 0000000000000..cdcd35a27344a --- /dev/null +++ b/aio/content/examples/what-is-angular/e2e/src/app.e2e-spec.ts @@ -0,0 +1,61 @@ +import { browser, element, by, logging } from 'protractor'; + + +describe('What is Angular', () => { + + const paragraphs = element.all(by.css('p')); + const buttons = element.all(by.css('button')); + const templateButton = buttons.get(1); + const templateText = paragraphs.get(3); + const messageButton = buttons.get(0); + const messageText = paragraphs.get(2); + const ngIfButton = buttons.get(2); + const ngIfText = paragraphs.get(4); + const diButton = buttons.get(3); + + beforeEach(() => browser.get('')); + + // helper function to test what's logged to the console + async function logChecker(contents) { + const logs = await browser.manage().logs().get(logging.Type.BROWSER); + const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1 ? true : false); + expect(messages.length).toBeGreaterThan(0); + } + + it('should display Hello World', async () => { + expect(await element(by.css('hello-world h2')).getText()).toEqual('Hello World'); + }); + + // Test for alert + it('should display js alert after button click', async () => { + await messageButton.click(); + const alert = browser.switchTo().alert(); + expect(await alert.getText()).toEqual('Hello, World'); + await alert.accept(); + }); + + it('should display blue a sentence', async () => { + expect(await messageText.getCssValue('color')).toEqual('rgba(0, 0, 255, 1)'); + }); + + // Hello World Template section + it('should add 123 to editable p tag', async () => { + await templateButton.click(); + await templateText.click(); + await templateText.sendKeys('123'); + expect(await templateText.getText()).toEqual('You can edit me!123'); + }); + + // Test for ngIf section + it('should display edit instructions after button click', async () => { + await ngIfButton.click(); + expect(await ngIfText.getText()).toEqual('You can edit the following paragraph.'); + }); + + // Test for DI section + it('should log the count', async () => { + await diButton.click(); + await logChecker(0); + }); + +}); diff --git a/aio/content/examples/what-is-angular/example-config.json b/aio/content/examples/what-is-angular/example-config.json new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/aio/content/examples/what-is-angular/src/app/app.component.html b/aio/content/examples/what-is-angular/src/app/app.component.html new file mode 100644 index 0000000000000..55bcdd8660694 --- /dev/null +++ b/aio/content/examples/what-is-angular/src/app/app.component.html @@ -0,0 +1,9 @@ +

Understanding Angular

+ + + + + + + + diff --git a/aio/content/examples/what-is-angular/src/app/app.component.ts b/aio/content/examples/what-is-angular/src/app/app.component.ts new file mode 100644 index 0000000000000..968036cb8c2ed --- /dev/null +++ b/aio/content/examples/what-is-angular/src/app/app.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html' +}) +export class AppComponent { } diff --git a/aio/content/examples/what-is-angular/src/app/app.module.ts b/aio/content/examples/what-is-angular/src/app/app.module.ts new file mode 100644 index 0000000000000..65e0a949ef785 --- /dev/null +++ b/aio/content/examples/what-is-angular/src/app/app.module.ts @@ -0,0 +1,30 @@ +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; + +import { AppComponent } from './app.component'; +import { HelloWorldComponent } from './hello-world/hello-world.component'; +import { HelloWorldTemplateComponent } from './hello-world-template.component'; +import { HelloWorldNgIfComponent } from './hello-world-ngif/hello-world-ngif.component'; +import { HelloWorldDependencyInjectionComponent } from './hello-world-di/hello-world-di.component'; +import { HelloWorldInterpolationComponent } from './hello-world-interpolation/hello-world-interpolation.component'; +import { HelloWorldBindingsComponent } from './hello-world-bindings/hello-world-bindings.component'; + + + +@NgModule({ + declarations: [ + AppComponent, + HelloWorldComponent, + HelloWorldTemplateComponent, + HelloWorldNgIfComponent, + HelloWorldDependencyInjectionComponent, + HelloWorldInterpolationComponent, + HelloWorldBindingsComponent + ], + imports: [ + BrowserModule + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/aio/content/examples/what-is-angular/src/app/hello-world-bindings/hello-world-bindings.component.html b/aio/content/examples/what-is-angular/src/app/hello-world-bindings/hello-world-bindings.component.html new file mode 100644 index 0000000000000..568f5d1a62656 --- /dev/null +++ b/aio/content/examples/what-is-angular/src/app/hello-world-bindings/hello-world-bindings.component.html @@ -0,0 +1,6 @@ + + + + +

You can set my color in the component!

+ diff --git a/aio/content/examples/what-is-angular/src/app/hello-world-bindings/hello-world-bindings.component.ts b/aio/content/examples/what-is-angular/src/app/hello-world-bindings/hello-world-bindings.component.ts new file mode 100644 index 0000000000000..7dd835680ace6 --- /dev/null +++ b/aio/content/examples/what-is-angular/src/app/hello-world-bindings/hello-world-bindings.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; + +@Component ({ + selector: 'hello-world-bindings', + templateUrl: './hello-world-bindings.component.html' +}) +export class HelloWorldBindingsComponent { + fontColor = 'blue'; + sayHelloId = 1; + canClick = false; + message = 'Hello, World'; +// #docregion method + sayMessage() { + alert(this.message); + } +// #enddocregion +} diff --git a/aio/content/examples/what-is-angular/src/app/hello-world-di/hello-world-di.component.html b/aio/content/examples/what-is-angular/src/app/hello-world-di/hello-world-di.component.html new file mode 100644 index 0000000000000..998a6d12525e8 --- /dev/null +++ b/aio/content/examples/what-is-angular/src/app/hello-world-di/hello-world-di.component.html @@ -0,0 +1,3 @@ +

Hello World: Dependency Injection

+ +

Be sure to open the console to view the output!

\ No newline at end of file diff --git a/aio/content/examples/what-is-angular/src/app/hello-world-di/hello-world-di.component.ts b/aio/content/examples/what-is-angular/src/app/hello-world-di/hello-world-di.component.ts new file mode 100644 index 0000000000000..e270f2f27b525 --- /dev/null +++ b/aio/content/examples/what-is-angular/src/app/hello-world-di/hello-world-di.component.ts @@ -0,0 +1,19 @@ +import { Component } from '@angular/core'; +import { Logger } from '../logger.service'; + +@Component({ + selector: 'hello-world-di', + templateUrl: './hello-world-di.component.html' +}) +export class HelloWorldDependencyInjectionComponent { + count = 0; + + constructor(private logger: Logger) { + } + + onLogMe(){ + this.logger.writeCount(this.count); + this.count++; + } +} + diff --git a/aio/content/examples/what-is-angular/src/app/hello-world-example.html b/aio/content/examples/what-is-angular/src/app/hello-world-example.html new file mode 100644 index 0000000000000..847ae08fa31c3 --- /dev/null +++ b/aio/content/examples/what-is-angular/src/app/hello-world-example.html @@ -0,0 +1,4 @@ + +

Hello World

+

This is my first component!

+ \ No newline at end of file diff --git a/aio/content/examples/what-is-angular/src/app/hello-world-interpolation/hello-world-interpolation.component.html b/aio/content/examples/what-is-angular/src/app/hello-world-interpolation/hello-world-interpolation.component.html new file mode 100644 index 0000000000000..5136b7b351489 --- /dev/null +++ b/aio/content/examples/what-is-angular/src/app/hello-world-interpolation/hello-world-interpolation.component.html @@ -0,0 +1,3 @@ + +

{{ message }}

+ diff --git a/aio/content/examples/what-is-angular/src/app/hello-world-interpolation/hello-world-interpolation.component.ts b/aio/content/examples/what-is-angular/src/app/hello-world-interpolation/hello-world-interpolation.component.ts new file mode 100644 index 0000000000000..fa150c10ad9e5 --- /dev/null +++ b/aio/content/examples/what-is-angular/src/app/hello-world-interpolation/hello-world-interpolation.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component ({ + selector: 'hello-world-interpolation', + templateUrl: './hello-world-interpolation.component.html' +}) +export class HelloWorldInterpolationComponent { + message = 'Hello, World!'; +} diff --git a/aio/content/examples/what-is-angular/src/app/hello-world-ngif/hello-world-ngif.component.html b/aio/content/examples/what-is-angular/src/app/hello-world-ngif/hello-world-ngif.component.html new file mode 100644 index 0000000000000..4c3fc12e983de --- /dev/null +++ b/aio/content/examples/what-is-angular/src/app/hello-world-ngif/hello-world-ngif.component.html @@ -0,0 +1,9 @@ +

Hello World: ngIf!

+ +
+

You can edit the following paragraph.

+
+ +

The following paragraph is read only. Try clicking the button!

+ +

{{ message }}

diff --git a/aio/content/examples/what-is-angular/src/app/hello-world-ngif/hello-world-ngif.component.ts b/aio/content/examples/what-is-angular/src/app/hello-world-ngif/hello-world-ngif.component.ts new file mode 100644 index 0000000000000..cbc2075d9d770 --- /dev/null +++ b/aio/content/examples/what-is-angular/src/app/hello-world-ngif/hello-world-ngif.component.ts @@ -0,0 +1,21 @@ +// #docplaster +import { Component } from '@angular/core'; + +@Component({ + selector: 'hello-world-ngif', + templateUrl: './hello-world-ngif.component.html' + }) +export class HelloWorldNgIfComponent { + message = 'I\'m read only!'; + canEdit = false; + + onEditClick(){ + this.canEdit = !this.canEdit; + if (this.canEdit) { + this.message = 'You can edit me!'; + } else { + this.message = 'I\'m read only!'; + } + } +} + diff --git a/aio/content/examples/what-is-angular/src/app/hello-world-template.component.ts b/aio/content/examples/what-is-angular/src/app/hello-world-template.component.ts new file mode 100644 index 0000000000000..665c9e493b1e8 --- /dev/null +++ b/aio/content/examples/what-is-angular/src/app/hello-world-template.component.ts @@ -0,0 +1,24 @@ +// #docplaster + +import { Component } from '@angular/core'; + +@Component({ + selector: 'hello-world-template', + template: ` +

Hello World Template

+ +

{{ message }}

+ ` + }) + export class HelloWorldTemplateComponent { + message = 'I am read only!'; + canEdit = false; + onEditClick(){ + this.canEdit = !this.canEdit; + if (this.canEdit) { + this.message = 'You can edit me!'; + } else { + this.message = 'I am read only!'; + } + } + } diff --git a/aio/content/examples/what-is-angular/src/app/hello-world/hello-world.component.ts b/aio/content/examples/what-is-angular/src/app/hello-world/hello-world.component.ts new file mode 100644 index 0000000000000..85d444f26629b --- /dev/null +++ b/aio/content/examples/what-is-angular/src/app/hello-world/hello-world.component.ts @@ -0,0 +1,14 @@ +// #docplaster + +import { Component } from '@angular/core'; + +@Component({ + selector: 'hello-world', + template: ` +

Hello World

+

This is my first component!

+ `, +}) +export class HelloWorldComponent { + // The code in this class drives the component's behavior. +} diff --git a/aio/content/examples/what-is-angular/src/app/logger.service.ts b/aio/content/examples/what-is-angular/src/app/logger.service.ts new file mode 100644 index 0000000000000..57e4b7eb357d2 --- /dev/null +++ b/aio/content/examples/what-is-angular/src/app/logger.service.ts @@ -0,0 +1,8 @@ +import { Injectable } from '@angular/core'; + +@Injectable({providedIn: 'root'}) +export class Logger { + writeCount(count: number) { + console.warn(count); + } +} diff --git a/aio/content/examples/what-is-angular/src/index.html b/aio/content/examples/what-is-angular/src/index.html new file mode 100644 index 0000000000000..fa064a68c7001 --- /dev/null +++ b/aio/content/examples/what-is-angular/src/index.html @@ -0,0 +1,13 @@ + + + + + Helloworld + + + + + + + + diff --git a/aio/content/examples/what-is-angular/src/main.ts b/aio/content/examples/what-is-angular/src/main.ts new file mode 100644 index 0000000000000..c7b673cf44b38 --- /dev/null +++ b/aio/content/examples/what-is-angular/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/aio/content/examples/what-is-angular/stackblitz.json b/aio/content/examples/what-is-angular/stackblitz.json new file mode 100644 index 0000000000000..7e420f790632d --- /dev/null +++ b/aio/content/examples/what-is-angular/stackblitz.json @@ -0,0 +1,8 @@ +{ + "description": "What is Angular?", + "files":[ + "!**/*.d.ts", + "!**/*.js" + ], + "tags":["overview", "angular"] +} diff --git a/aio/content/guide/what-is-angular.md b/aio/content/guide/what-is-angular.md new file mode 100644 index 0000000000000..7264a81c3847a --- /dev/null +++ b/aio/content/guide/what-is-angular.md @@ -0,0 +1,209 @@ +# What is Angular? + +This topic can help you understand Angular: what Angular is, what advantages it provides, and what you might expect as you start to build your applications. + +Angular is a development platform, built on [TypeScript](https://www.typescriptlang.org/). As a platform, Angular includes: + +* A component-based framework for building scalable web applications +* A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more +* A suite of developer tools to help you develop, build, test, and update your code + +When you build applications with Angular, you're taking advantage of a platform that can scale from single-developer projects to enterprise-level applications. Angular is designed to make updating as easy as possible, so you can take advantage of the latest developments with a minimum of effort. Best of all, the Angular ecosystem consists of a diverse group of over 1.7 million developers, library authors, and content creators. + +
+ +See the for a working example containing the code snippets in this guide. + +
+ +{@a essentials} +## Angular applications: The essentials + +This section explains the core ideas behind Angular. Understanding these ideas can help you design and build your applications more effectively. + +{@a components} +### Components + +Components are the building blocks that compose an application. A component includes a TypeScript class with a`@Component()` decorator, an HTML template, and styles. The `@Component()` decorator specifies the following Angular-specific information: + +* A CSS selector that defines how the component is used in a template. HTML elements in your template that match this selector become instances of the component. +* An HTML template that instructs Angular how to render the component. +* An optional set of CSS styles that define the appearance of the template's HTML elements. + +The following is a minimal Angular component. + + + +To use this component, you write the following in a template: + + + +When Angular renders this component, the resulting DOM looks like this: + + + +Angular's component model offers strong encapsulation and an intuitive application structure. Components also make your application easier to unit test and can improve the overall readability of your code. + +For more information on what you can do with components, see the [Components](guide/component-overview) section. + +{@a templates} +### Templates + +Every component has an HTML template that declares how that component renders. You define this template either inline or by file path. + +Angular extends HTML with additional syntax that lets you insert dynamic values from your component. Angular automatically updates the rendered DOM when your component’s state changes. One application of this feature is inserting dynamic text, as shown in the following example. + + + +The value for message comes from the component class: + + + +When the application loads the component and its template, the user sees the following: + + +<p>Hello, World!</p> + + +Notice the use of double curly braces--they instruct Angular to interpolate the contents within them. + +Angular also supports property bindings, to help you set values for properties and attributes of HTML elements and pass values to your application's presentation logic. + + + +Notice the use of the square brackets--that syntax indicates that you're binding the property or attribute to a value in the component class. + +You can also declare event listeners to listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches. You declare an event listener by specifying the event name in parentheses: + + + +The preceding example calls a method, which is defined in the component class: + + + +The following is an example of interpolation and bindings within an Angular template: + + + + + + + + +You can add additional functionality to your templates through the use of [directives](guide/built-in-directives). The most popular directives in Angular are `*ngIf` and `*ngFor`. You can use directives to perform a variety of tasks, such as dynamically modifying the DOM structure. And you can also create your own custom directives to create great user experiences. + +The following code is an example of the `*ngIf` directive. + + + + + + + + +Angular's declarative templates allow you to cleanly separate your application's logic from its presentation. Templates are based on standard HTML, so they're easy to build, maintain, and update. + +For more information on what you can do with templates, see the [Templates](guide/template-syntax) section. + +{@a di} +### Dependency injection + +Dependency injection allows you to declare the dependencies of your TypeScript classes without taking care of their instantiation. Instead, Angular handles the instantiation for you. This design pattern allows you to write more testable and flexible code. Even though understanding dependency injection is not critical to start using Angular, we strongly recommend it as a best practice and many aspects of Angular take advantage of it to some degree. + +To illustrate how dependency injection works, consider the following example. The first file, `logger.service.ts`, defines a `Logger` class. This class contains a `writeCount` function that logs a number to the console. + + + +Next, the `hello-world-di.component.ts` file defines an Angular component. This component contains a button that uses the `writeCount` function of the Logger class. To access that function, the `Logger` service is injected into the `HelloWorldDI` class by adding `private logger: Logger` to the constructor. + + + +For more information about dependency injection and Angular, see the [Dependency injection in Angular](guide/dependency-injection) section. + +{@a cli} + +## Angular CLI + +The Angular CLI is the fastest, easiest, and recommended way to develop Angular applications. The Angular CLI makes a number of tasks easy. Here are some examples: + + + + + + + + + + + + + + + + + + + + + + +
ng buildCompiles an Angular app into an output directory.
ng serveBuilds and serves your application, rebuilding on file changes
ng generateGenerates or modifies files based on a schematic.
ng testRuns unit tests on a given project.
ng e2eBuilds and serves an Angular application, then runs end-to-end tests.
+ +You'll find the Angular CLI a valuable tool for building out your applications. + +For more information about the Angular CLI, see the [CLI Reference](/cli) section. + +{@a 1p-libraries} +## First-party libraries + +The section, [Angular applications: The essentials](#essentials), provides a brief overview of a couple of the key architectural elements you'll use when building Angular applications. But the many benefits of Angular really become apparent when your application grows and you want to add additional functions such as site navigation or user input. That's when you can leverage the Angular platform to incorporate one of the many first-party libraries that Angular provides. + +Some of the libraries available to you include: + + + + + + + + + + + + + + + + + + + + + + + +
Angular RouterAdvanced client-side navigation and routing based on Angular components. Supports lazy-loading, nested routes, custom path matching, and more.
Angular FormsUniform system for form participation and validation.
Angular HttpClientRobust HTTP client that can power more advanced client-server communication.
Angular AnimationsRich system for driving animations based on application state.
Angular PWA +Tools for building Progressive Web Applications (PWAs) including a service worker and Web app manifest.
Angular SchematicsAutomated scaffolding, refactoring, and update tools that simplify development at large scale.
+ +These libraries expand your application's functionality while also allowing you to focus more on the features that make your application unique. And you can add these libraries knowing that they're designed to integrate seamlessly into and update simultaneously with the Angular framework. + +These libraries are only required if and when they can help you add functionality to your applications or solve a particular problem. + +## Next steps + +This topic is intended to give you a brief overview of what Angular is, the advantages it provides, and what you can expect as you start to build your applications. + +To see Angular in action, see our [Getting Started](https://angular.io/start) tutorial. This tutorial uses [stackblitz.com](https://stackblitz.com/), so you can explore a working example of Angular without any installation requirements. + +To explore Angular's capabilities further, we recommend reading through the sections, Understanding Angular and Developer Guides. diff --git a/aio/content/marketing/docs.md b/aio/content/marketing/docs.md index 23030db6902e0..a2478935973c0 100644 --- a/aio/content/marketing/docs.md +++ b/aio/content/marketing/docs.md @@ -7,6 +7,12 @@ Tutorials and guides include downloadable examples to accelerate your projects.
+ +
What is Angular
+

Get a high-level overview of the Angular platform.

+

Local setup

+
Get Started
diff --git a/aio/content/navigation.json b/aio/content/navigation.json index 1d5f9620078b6..c49e464b7aa12 100644 --- a/aio/content/navigation.json +++ b/aio/content/navigation.json @@ -55,6 +55,10 @@ "title": "Getting Started", "tooltip": "Set up your environment and learn basic concepts", "children": [ + { "url": "guide/what-is-angular", + "title": "What is Angular?", + "tooltip": "A brief description of the Angular platform." + }, { "title": "Try it", "tooltip": "Examine and work with a ready-made sample app, with no setup.",