diff --git a/aio/content/examples/cli-quickstart/bs-config.cli.json b/aio/content/examples/cli-quickstart/bs-config.cli.json deleted file mode 100644 index ac61d35f83..0000000000 --- a/aio/content/examples/cli-quickstart/bs-config.cli.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "open": false, - "logLevel": "silent", - "port": 8080, - "server": { - "baseDir": "dist", - "middleware": { - "0": null - } - } -} diff --git a/aio/content/examples/cli-quickstart/e2e/src/app.e2e-spec.ts b/aio/content/examples/cli-quickstart/e2e/src/app.e2e-spec.ts deleted file mode 100644 index 3f0760b56e..0000000000 --- a/aio/content/examples/cli-quickstart/e2e/src/app.e2e-spec.ts +++ /dev/null @@ -1,14 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('cli-quickstart App', () => { - beforeEach(() => { - return browser.get('/'); - }); - - it('should display message saying app works', () => { - let pageTitle = element(by.css('app-root h1')).getText(); - expect(pageTitle).toEqual('Welcome to My First Angular App!!'); - }); -}); diff --git a/aio/content/examples/cli-quickstart/example-config.json b/aio/content/examples/cli-quickstart/example-config.json deleted file mode 100644 index 313764c3c6..0000000000 --- a/aio/content/examples/cli-quickstart/example-config.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "build": "build:cli", - "run": "serve:cli" -} diff --git a/aio/content/examples/cli-quickstart/src/app/app.component.css b/aio/content/examples/cli-quickstart/src/app/app.component.css deleted file mode 100644 index a2b21fae82..0000000000 --- a/aio/content/examples/cli-quickstart/src/app/app.component.css +++ /dev/null @@ -1,6 +0,0 @@ -/* #docregion */ -h1 { - color: #369; - font-family: Arial, Helvetica, sans-serif; - font-size: 250%; -} diff --git a/aio/content/examples/cli-quickstart/src/app/app.component.html b/aio/content/examples/cli-quickstart/src/app/app.component.html deleted file mode 100644 index 24c56edee4..0000000000 --- a/aio/content/examples/cli-quickstart/src/app/app.component.html +++ /dev/null @@ -1,19 +0,0 @@ - -
-

- Welcome to {{ title }}! -

- Angular Logo -
-

Here are some links to help you start:

- diff --git a/aio/content/examples/cli-quickstart/src/app/app.component.spec.ts b/aio/content/examples/cli-quickstart/src/app/app.component.spec.ts deleted file mode 100644 index 1f5da50d19..0000000000 --- a/aio/content/examples/cli-quickstart/src/app/app.component.spec.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { TestBed, async } from '@angular/core/testing'; -import { AppComponent } from './app.component'; -describe('AppComponent', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], - }).compileComponents(); - })); - - it('should create the app', async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app).toBeTruthy(); - })); - - it(`should have as title 'app'`, async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app.title).toMatch(/app/i); - })); - - it('should render title in a h1 tag', async(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toMatch(/app/i); - })); -}); diff --git a/aio/content/examples/cli-quickstart/src/app/app.component.ts b/aio/content/examples/cli-quickstart/src/app/app.component.ts deleted file mode 100644 index 1c462d321b..0000000000 --- a/aio/content/examples/cli-quickstart/src/app/app.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docregion import -import { Component } from '@angular/core'; -// #enddocregion import - -// #docregion metadata, component -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -// #enddocregion metadata -// #docregion title, class -export class AppComponent { - title = 'My First Angular App!'; -} -// #enddocregion title, class, component diff --git a/aio/content/examples/cli-quickstart/src/app/app.module.ts b/aio/content/examples/cli-quickstart/src/app/app.module.ts deleted file mode 100644 index f65716351a..0000000000 --- a/aio/content/examples/cli-quickstart/src/app/app.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; - -import { AppComponent } from './app.component'; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/aio/content/examples/cli-quickstart/src/index.html b/aio/content/examples/cli-quickstart/src/index.html deleted file mode 100644 index 0450fa57c3..0000000000 --- a/aio/content/examples/cli-quickstart/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - MyApp - - - - - - - - - diff --git a/aio/content/examples/cli-quickstart/src/main.ts b/aio/content/examples/cli-quickstart/src/main.ts deleted file mode 100644 index a9ca1caf8c..0000000000 --- a/aio/content/examples/cli-quickstart/src/main.ts +++ /dev/null @@ -1,11 +0,0 @@ -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); diff --git a/aio/content/examples/cli-quickstart/zipper.json b/aio/content/examples/cli-quickstart/zipper.json deleted file mode 100644 index 1deb27d7fb..0000000000 --- a/aio/content/examples/cli-quickstart/zipper.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[0-9].*", - "angular.json", - "protractor.conf.js" - ] -} diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md index bc8e3ccacc..3cfcfada88 100644 --- a/aio/content/guide/attribute-directives.md +++ b/aio/content/guide/attribute-directives.md @@ -15,7 +15,7 @@ There are three kinds of directives in Angular: 1. Attribute directives—change the appearance or behavior of an element, component, or another directive. *Components* are the most common of the three directives. -You saw a component for the first time in the [Getting Started](guide/quickstart). +You saw a component for the first time in the [Getting Started](start "Getting Started with Angular") tutorial. *Structural Directives* change the structure of the view. Two examples are [NgFor](guide/template-syntax#ngFor) and [NgIf](guide/template-syntax#ngIf). diff --git a/aio/content/guide/deployment.md b/aio/content/guide/deployment.md index caa0c08a0d..9c66e47139 100644 --- a/aio/content/guide/deployment.md +++ b/aio/content/guide/deployment.md @@ -338,10 +338,10 @@ The following example displays the graph for the _main_ bundle. The `source-map-explorer` analyzes the source map generated with the bundle and draws a map of all dependencies, showing exactly which classes are included in the bundle. -Here's the output for the _main_ bundle of the QuickStart. +Here's the output for the _main_ bundle of an example app called `cli-quickstart`.
- quickstart sourcemap explorer + quickstart sourcemap explorer
{@a base-tag} diff --git a/aio/content/guide/displaying-data.md b/aio/content/guide/displaying-data.md index 073b23a59d..85902da4ae 100644 --- a/aio/content/guide/displaying-data.md +++ b/aio/content/guide/displaying-data.md @@ -31,8 +31,7 @@ The easiest way to display a component property is to bind the property name through interpolation. With interpolation, you put the property name in the view template, enclosed in double curly braces: `{{myHero}}`. -Follow the [Getting Started](guide/quickstart) instructions for creating a new project -named displaying-data. +Use the CLI command [`ng new displaying-data`](cli/new) to create a workspace and app named `displaying-data`. Delete the app.component.html file. It is not needed for this example. diff --git a/aio/content/guide/glossary.md b/aio/content/guide/glossary.md index 7bbc718f8e..6f37759986 100644 --- a/aio/content/guide/glossary.md +++ b/aio/content/guide/glossary.md @@ -176,7 +176,7 @@ In Angular, a set of related [schematics](#schematic) collected in an [npm packa The [Angular CLI](cli) is a command-line tool for managing the Angular development cycle. Use it to create the initial filesystem scaffolding for a [workspace](#workspace) or [project](#project), and to run [schematics](#schematic) that add and modify code for initial generic versions of various elements. The CLI supports all stages of the development cycle, including building, testing, bundling, and deployment. -* To begin using the CLI for a new project, see [Getting Started](guide/quickstart). +* To begin using the CLI for a new project, see [Local Environment Setup](guide/setup-local "Setting up for Local Development"). * To learn more about the full capabilities of the CLI, see the [CLI command reference](cli). See also [Schematics CLI](#schematics-cli). diff --git a/aio/content/guide/npm-packages.md b/aio/content/guide/npm-packages.md index 376b4c03f6..4942d3930a 100644 --- a/aio/content/guide/npm-packages.md +++ b/aio/content/guide/npm-packages.md @@ -9,7 +9,7 @@ Alternatively, you can use the [yarn client](https://yarnpkg.com/) for downloadi
-See [Getting Started](guide/quickstart#prerequisites) for information about the required versions and installation of Node.js and npm. +See [Local Environment Setup](guide/setup-local "Setting up for Local Development") for information about the required versions and installation of `Node.js` and `npm`. If you already have projects running on your machine that use other versions of Node.js and npm, consider using [nvm](https://github.com/creationix/nvm) to manage the multiple versions of Node.js and npm. diff --git a/aio/content/guide/prerequisites-setup.md b/aio/content/guide/prerequisites-setup.md deleted file mode 100644 index 2151f2991f..0000000000 --- a/aio/content/guide/prerequisites-setup.md +++ /dev/null @@ -1,148 +0,0 @@ -# Prerequisites and Setup / Creating a workspace / Local development / Local environment - -This guide describes how to get started with local development. - -It includes: -* Prerequisites -* How to install the Angular CLI -* How to create a workspace and initial app project -* How to serve an app project locally -* Additional resources - -{@a devenv} -{@a prerequisites} -## Prerequisites - - -{@a nodejs} -### Node.js - -Angular requires `Node.js` version 8.x or 10.x. - -* To check your version, run `node -v` in a terminal/console window. - -* To get `Node.js`, go to [nodejs.org](https://nodejs.org "Nodejs.org"). - -{@a npm} -### npm package manager: npm or yarn - -Angular, the Angular CLI, and Angular apps depend on features and functionality provided by libraries that are available as [npm packages](https://docs.npmjs.com/getting-started/what-is-npm). To download and install npm packages, you must have an npm package manager. - -The following package managers have been verified with Angular: - -* The [npm client](https://docs.npmjs.com/cli/npm) command line interface, which is installed with `Node.js` by default. To check if you have the npm client installed, run `npm -v` in a terminal/console window. Most of the documentation for Angular assumes the npm client. - -* The [yarn client](https://yarnpkg.com/) command line interface. - -{@a install-cli} - -## Step 1: Install the Angular CLI - -You use the Angular CLI -to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. - -Install the Angular CLI globally. - -To install the CLI using `npm`, open a terminal/console window and enter the following command: - - - - npm install -g @angular/cli - - - - - -{@a create-proj} - -## Step 2: Create a workspace and initial application - -You develop apps in the context of an Angular [**workspace**](guide/glossary#workspace). A workspace contains the files for one or more [**projects**](guide/glossary/#project). A project is the set of files that comprise an app, a library, or end-to-end (e2e) tests. - -To create a new workspace and initial app project: - -1. Run the CLI command `ng new` and provide the name `my-app`, as shown here: - - - ng new my-app - - - -2. The `ng new` command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key. - -The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes. - -It also creates the following workspace and starter project files: - -* A new workspace, with a root folder named `my-app` -* An initial skeleton app project, also called `my-app` (in the `src` subfolder) -* An end-to-end test project (in the `e2e` subfolder) -* Related configuration files - -The initial app project contains a simple Welcome app, ready to run. - -{@a serve} - -## Step 3: Serve the application - -Angular includes a server, so that you can easily build and serve your app locally. - -1. Go to the workspace folder (`my-app`). - -1. Launch the server by using the CLI command `ng serve`, with the `--open` option. - - - cd my-app - ng serve --open - - -The `ng serve` command launches the server, watches your files, -and rebuilds the app as you make changes to those files. - -The `--open` (or just `-o`) option automatically opens your browser -to `http://localhost:4200/`. - -Your app greets you with a message: - - -
- Welcome to my-app! -
- - - - -## Additional resources - -If you're new to Angular: - -* The [Getting Started](tutorial/) provides hands-on learning. It walks you through the steps to build your first app in an online environment and then deploy that app to your local system. While building a basic catalog and shopping cart app, you'll be introduced to components (the building blocks of Angular), Angular's HTML template syntax, basic display and navigation between views, using services and external data, and scaling and tuning your app. - -* The [Tour of Heroes tutorial](tutorial "Tour of Heroes tutorial") provides additional hands-on learning. It walks you through the steps to build an app that helps a staffing agency manage a group of superhero employees. All of the steps are done locally. - - -* The [Architecture guide](guide/architecture "Architecture guide") describes key concepts such as modules, components, services, and dependency injection (DI). It provides a foundation for more in-depth guides about specific Angular concepts and features. - -After the Tutorial and Architecture guide, you'll be ready to continue exploring Angular on your own through the other guides and references in this documentation set, focusing on the features most important for your apps. - - - - -## Related technologies and tools - -Angular assumes specific versions of many related technologies and tools, such as TypeScript, Karma, Protractor, tsickle, zone.js. - -The `package.json` is organized into two groups of packages: - -* [Dependencies](guide/npm-packages#dependencies) are essential to *running* applications. -* [DevDependencies](guide/npm-packages#dev-dependencies) are only necessary to *develop* applications. - -These packages are described in more detail in [Workspace dependencies](guide/npm-packages). - - - -{@a others} -## Managing different development environments - -If you already have projects running on your machine that use other versions of Node.js and npm, consider using [nvm](https://github.com/creationix/nvm) on Mac or Linux, or [nvm-windows](https://github.com/coreybutler/nvm-windows) on Windows, to manage the multiple versions of Node.js and npm. - diff --git a/aio/content/guide/quickstart.md b/aio/content/guide/quickstart.md deleted file mode 100644 index be5dbd2bd6..0000000000 --- a/aio/content/guide/quickstart.md +++ /dev/null @@ -1,192 +0,0 @@ -# QuickStart to Local Environment Setup and Development - -Welcome to Angular! Angular helps you build modern applications for the web, mobile, or desktop. - - -
-
Getting Started - Stackblitz
- - -We recently introduced a [**new Getting Started**](getting-started) that leverages the [StackBlitz](https://stackblitz.com/) online development environment. -We recommend the new Getting Started for anyone who wants to quickly learn the essentials of Angular, in the context of building a basic online store app. - - -
- - -This guide shows you how to build and run a simple Angular app in your local development environment using the [Angular CLI tool](cli "CLI command reference"). -At the end of this guide—as part of final code review—there is a link to download a copy of the final application code, so that you can compare your work, validate your local setup, or just explore a simple Angular app. -This guide takes less than 30 minutes to complete. - - -{@a devenv} -{@a prerequisites} -## Prerequisites - -Before you begin, make sure your development environment includes `Node.js®` and an npm package manager. - -{@a nodejs} -### Node.js - -Angular requires `Node.js` version 8.x or 10.x. - -* To check your version, run `node -v` in a terminal/console window. - -* To get `Node.js`, go to [nodejs.org](https://nodejs.org "Nodejs.org"). - -{@a npm} -### npm package manager - -Angular, the Angular CLI, and Angular apps depend on features and functionality provided by libraries that are available as [npm packages](https://docs.npmjs.com/getting-started/what-is-npm). To download and install npm packages, you must have an npm package manager. - -This Quick Start uses the [npm client](https://docs.npmjs.com/cli/install) command line interface, which is installed with `Node.js` by default. - -To check that you have the npm client installed, run `npm -v` in a terminal/console window. - - -{@a install-cli} - -## Step 1: Install the Angular CLI - -You use the Angular CLI -to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. - -Install the Angular CLI globally. - -To install the CLI using `npm`, open a terminal/console window and enter the following command: - - - - npm install -g @angular/cli - - - - - -{@a create-proj} - -## Step 2: Create a workspace and initial application - -You develop apps in the context of an Angular [**workspace**](guide/glossary#workspace). A workspace contains the files for one or more [**projects**](guide/glossary/#project). A project is the set of files that comprise an app, a library, or end-to-end (e2e) tests. - -To create a new workspace and initial app project: - -1. Run the CLI command `ng new` and provide the name `my-app`, as shown here: - - - ng new my-app - - - -2. The `ng new` command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key. - -The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes. - -It also creates the following workspace and starter project files: - -* A new workspace, with a root folder named `my-app` -* An initial skeleton app project, also called `my-app` (in the `src` subfolder) -* An end-to-end test project (in the `e2e` subfolder) -* Related configuration files - -The initial app project contains a simple Welcome app, ready to run. - -{@a serve} - -## Step 3: Serve the application - -Angular includes a server, so that you can easily build and serve your app locally. - -1. Go to the workspace folder (`my-app`). - -1. Launch the server by using the CLI command `ng serve`, with the `--open` option. - - - cd my-app - ng serve --open - - -The `ng serve` command launches the server, watches your files, -and rebuilds the app as you make changes to those files. - -The `--open` (or just `-o`) option automatically opens your browser -to `http://localhost:4200/`. - -Your app greets you with a message: - - -
- Welcome to my-app! -
- - - -{@a first-component} - -## Step 4: Edit your first Angular component - -[**_Components_**](guide/glossary#component) are the fundamental building blocks of Angular applications. -They display data on the screen, listen for user input, and take action based on that input. - -As part of the initial app, the CLI created the first Angular component for you. It is the _root component_, and it is named `app-root`. - -1. Open `./src/app/app.component.ts`. - -2. Change the `title` property from `'my-app'` to `'My First Angular App'`. - - - - The browser reloads automatically with the revised title. That's nice, but it could look better. - -3. Open `./src/app/app.component.css` and give the component some style. - - - -Looking good! - -
- Output of Getting Started app -
- - - - -{@a project-file-review} - -## Final code review - -You can download an example of the app that you created in this Getting Started guide. - - -
- -**Tip:** Most Angular guides include links to download example files and run live examples in [Stackblitz](http://www.stackblitz.com), so that you can see Angular concepts and code in action. - - -
- - -For more information about Angular project files and the file structure, see [Workspace and project file structure](guide/file-structure). - - - - -## Next steps - -Now that you've seen the essentials of an Angular app and the Angular CLI, continue with these other introductory materials: - -* The [Tour of Heroes tutorial](tutorial "Tour of Heroes tutorial") provides additional hands-on learning. It walks you through the steps to build an app that helps a staffing agency manage a group of superhero employees. -It has many of the features you'd expect to find in a data-driven application: - - - Acquiring and displaying a list of items - - - Editing a selected item's detail - - - Navigating among different views of the data - - -* The [Architecture guide](guide/architecture "Architecture guide") describes key concepts such as modules, components, services, and dependency injection (DI). It provides a foundation for more in-depth guides about specific Angular concepts and features. - -After the Tutorial and Architecture guide, you'll be ready to continue exploring Angular on your own through the other guides and references in this documentation set, focusing on the features most important for your apps. - - diff --git a/aio/content/guide/setup-local.md b/aio/content/guide/setup-local.md new file mode 100644 index 0000000000..81fe83feb0 --- /dev/null +++ b/aio/content/guide/setup-local.md @@ -0,0 +1,129 @@ +# Setting up the Local Environment and Workspace + + +This guide explains how to set up your environment for Angular development using the [Angular CLI tool](cli "CLI command reference"). +It includes information about prerequisites, installing the CLI, creating an initial workspace and starter app, and running that app locally to verify your setup. + + +
+
Learning Angular
+ +If you are new to Angular, see [Getting Started](start). Getting Started helps you quickly learn the essentials of Angular, in the context of building a basic online store app. It leverages the [StackBlitz](https://stackblitz.com/) online development environment, so you don't need to set up your local environment until you're ready. + + +
+ + +{@a devenv} +{@a prerequisites} +## Prerequisites + +Before you begin, make sure your development environment includes `Node.js®` and an npm package manager. + +{@a nodejs} +### Node.js + +Angular requires `Node.js` version 8.x or 10.x. + +* To check your version, run `node -v` in a terminal/console window. + +* To get `Node.js`, go to [nodejs.org](https://nodejs.org "Nodejs.org"). + +{@a npm} +### npm package manager + +Angular, the Angular CLI, and Angular apps depend on features and functionality provided by libraries that are available as [npm packages](https://docs.npmjs.com/getting-started/what-is-npm). To download and install npm packages, you must have an npm package manager. + +This setup guide uses the [npm client](https://docs.npmjs.com/cli/install) command line interface, which is installed with `Node.js` by default. + +To check that you have the npm client installed, run `npm -v` in a terminal/console window. + + +{@a install-cli} + +## Step 1: Install the Angular CLI + +You use the Angular CLI +to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. + +Install the Angular CLI globally. + +To install the CLI using `npm`, open a terminal/console window and enter the following command: + + + + npm install -g @angular/cli + + + + + +{@a create-proj} + +## Step 2: Create a workspace and initial application + +You develop apps in the context of an Angular [**workspace**](guide/glossary#workspace). + +To create a new workspace and initial starter app: + +1. Run the CLI command `ng new` and provide the name `my-app`, as shown here: + + + ng new my-app + + + +2. The `ng new` command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key. + +The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes. + +The CLI creates a new workspace and a simple Welcome app, ready to run. + + +{@a serve} + +## Step 3: Run the application + +The Angular CLI includes a server, so that you can easily build and serve your app locally. + +1. Go to the workspace folder (`my-app`). + +1. Launch the server by using the CLI command `ng serve`, with the `--open` option. + + + cd my-app + ng serve --open + + +The `ng serve` command launches the server, watches your files, +and rebuilds the app as you make changes to those files. + +The `--open` (or just `-o`) option automatically opens your browser +to `http://localhost:4200/`. + +Your app greets you with a message: + + +
+ Welcome to my-app! +
+ + +## Next steps + + +* If you are new to Angular, see the [Getting Started](start) tutorial. Getting Started helps you quickly learn the essentials of Angular, in the context of building a basic online store app. + +
+ + Getting Started assumes the [StackBlitz](https://stackblitz.com/) online development environment. + To learn how to export an app from StackBlitz to your local environment, skip ahead to the [Deployment](start/deployment "Getting Started: Deployment") section. + +
+ + +* To learn more about using the Angular CLI, see the [CLI Overview](cli "CLI Overview"). In addition to creating the initial workspace and app scaffolding, you can use the CLI to generate Angular code such as components and services. The CLI supports the full development cycle, including building, testing, bundling, and deployment. + + +* For more information about the Angular files generated by `ng new`, see [Workspace and Project File Structure](guide/file-structure). + diff --git a/aio/content/guide/setup.md b/aio/content/guide/setup.md index 8c5725fa14..26c98d7d03 100644 --- a/aio/content/guide/setup.md +++ b/aio/content/guide/setup.md @@ -1,20 +1,32 @@ -# Setup for local development +# Setup for Upgrading from AngularJS -{@a develop-locally} + +
+ +**Audience:** Use this guide **only** in the context of [Upgrading from AngularJS](guide/upgrade "Upgrading from AngularJS to Angular") or [Upgrading for Performance](guide/upgrade-performance "Upgrading for Performance"). +Those Upgrade guides refer to this Setup guide for information about using the [deprecated QuickStart GitHub repository](https://github.com/angular/quickstart "Deprecated Angular QuickStart GitHub repository"), which was created prior to the current Angular [CLI](cli "CLI Overview"). + +**For all other scenarios,** see the current instructions in [Local Environment Setup](guide/setup-local "Setting up for Local Development"). + + +
+ + -Setting up a new project on your machine is quick and easy with the **QuickStart seed**, -maintained [on github](https://github.com/angular/quickstart "Install the github QuickStart repo"). +This guide describes how to develop locally on your own machine. +Setting up a new project on your machine is quick and easy with the [QuickStart seed on github](https://github.com/angular/quickstart "Install the github QuickStart repo"). +**Prerequisite:** Make sure you have [Node.js® and npm installed](guide/setup-local#prerequisites "Angular prerequisites"). -Make sure you have [Node.js® and npm installed](guide/setup#install-prerequisites "What if you don't have Node.js and npm?"). {@a clone} - - ## Clone Perform the _clone-to-launch_ steps with these terminal commands. @@ -122,9 +134,8 @@ Open a terminal window in the project folder and enter the following commands fo -The **QuickStart seed** contains the same application as the QuickStart playground. -But its true purpose is to provide a solid foundation for _local_ development. -Consequently, there are _many more files_ in the project folder on your machine, +The **QuickStart seed** provides a basic QuickStart playground application and other files necessary for local development. +Consequently, there are many files in the project folder on your machine, most of which you can [learn about later](guide/file-structure). @@ -319,47 +330,17 @@ We recommend [nvm](https://github.com/creationix/nvm) for managing multiple vers You may need [nvm](https://github.com/creationix/nvm) if you already have projects running on your machine that use other versions of Node.js and npm. -{@a why-locally} +## Appendix: Develop locally with IE +If you develop angular locally with `ng serve`, a `websocket` connection is set up automatically between browser and local dev server, so when your code changes, the browser can automatically refresh. -## Appendix: Why develop locally +In Windows, by default, one application can only have 6 websocket connections, MSDN WebSocket Settings. +So when IE is refreshed (manually or automatically by `ng serve`), sometimes the websocket does not close properly. When websocket connections exceed the limitations, a `SecurityError` will be thrown. This error will not affect the angular application, you can just restart IE to clear this error, or modify the windows registry to update the limitations. -Live coding in the browser is a great way to explore Angular. +## Appendix: Test using `fakeAsync()/async()` -Links on almost every documentation page open completed samples in the browser. -You can play with the sample code, share your changes with friends, and download and run the code on your own machine. - -The [Getting Started](guide/quickstart "Angular QuickStart Playground") shows just the `AppComponent` file. -It creates the equivalent of `app.module.ts` and `main.ts` internally _for the playground only_. -so the reader can discover Angular without distraction. -The other samples are based on the QuickStart seed. - -As much fun as this is ... - -* you can't ship your app in Stackblitz -* you aren't always online when writing code -* transpiling TypeScript in the browser is slow -* the type support, refactoring, and code completion only work in your local IDE - -Use the live coding environment as a _playground_, -a place to try the documentation samples and experiment on your own. -It's the perfect place to reproduce a bug when you want to -file a documentation issue or -file an issue with Angular itself. - -For real development, we strongly recommend [developing locally](guide/setup#develop-locally). - -## Appendix: develop locally with IE - -If you develop angular locally with `ng serve`, there will be `websocket` connection being setup automatically between browser and local dev server, so when your code change, browser can automatically refresh. - -In windows, by default one application can only have 6 websocket connections, MSDN WebSocket Settings. -So if IE was refreshed manunally or automatically by `ng serve`, sometimes, the websocket will not close properly, when websocket connections exceed limitations, `SecurityError` will be thrown, this error will not affect the angular application, you can just restart IE to clear this error, or modify the windows registry to update the limitations. - -## Appendix: test using `fakeAsync()/async()` - -If you use the `fakeAsync()/async()` helper function to run unit tests (for details, read [testing guide](guide/testing#async-test-with-fakeasync)), you need to import `zone.js/dist/zone-testing` in your test setup file. +If you use the `fakeAsync()/async()` helper function to run unit tests (for details, read the [Testing guide](guide/testing#async-test-with-fakeasync)), you need to import `zone.js/dist/zone-testing` in your test setup file.
If you create project with `Angular/CLI`, it is already imported in `src/test.ts`. @@ -376,4 +357,4 @@ import 'zone.js/dist/async-test'; import 'zone.js/dist/fake-async-test'; ``` -You can still load those files separately, but the order is important, you must import `proxy` before `sync-test`, `async-test`, `fake-async-test` and `jasmine-patch`. And you also need to import `sync-test` before `jasmine-patch`, so it is recommended to just import `zone-testing` instead of loading those separated files. \ No newline at end of file +You can still load those files separately, but the order is important, you must import `proxy` before `sync-test`, `async-test`, `fake-async-test` and `jasmine-patch`. And you also need to import `sync-test` before `jasmine-patch`, so it is recommended to just import `zone-testing` instead of loading those separated files. diff --git a/aio/content/guide/visual-studio-2015.md b/aio/content/guide/visual-studio-2015.md index 90b18d3872..e09aea2d84 100644 --- a/aio/content/guide/visual-studio-2015.md +++ b/aio/content/guide/visual-studio-2015.md @@ -4,15 +4,14 @@ Some developers prefer Visual Studio as their Integrated Development Environment (IDE). -This cookbook describes the steps required to set up and use the -Angular [Getting Started](guide/quickstart) files in Visual Studio 2015 within an ASP.NET 4.x project. +This cookbook describes the steps required to set up and use Angular app files in Visual Studio 2015 within an ASP.NET 4.x project.
There is no *live example* for this cookbook because it describes Visual Studio, not -the Angular Getting Started application itself. +the Angular application itself. It uses the starter Angular application created by the CLI command [`ng new`](cli/new) as an example.
@@ -48,7 +47,7 @@ Note that the resulting code does not map to the docs. Adjust accordingly. Install **[Node.js® and npm](https://nodejs.org/en/download/)** if they are not already on your machine. -See [Getting Started](guide/quickstart) for supported versions and instructions. +See [Local Environment Setup](guide/setup-local "Setting up for Local Development") for supported versions and instructions. @@ -114,11 +113,13 @@ restart it to make sure everything is clean.

- Step 1: Download the Angular Getting Started app + Step 1: Create a starter Angular app

+ + Follow the instructions in [Local Environment Setup](guide/setup-local "Setting up for Local Development") to create a starter Angular app using the CLI command [`ng new`](cli/new). -Go to the final code review in [Getting Started](guide/quickstart) and download the solution app project. These files contain a starter Angular app. + @@ -150,10 +151,10 @@ no authentication, and no hosting. Pick the template and options appropriate for

- Step 3: Copy the Angular Getting Started project files into the ASP.NET project folder + Step 3: Copy the Angular project files into the ASP.NET project folder

-Copy the files you downloaded from [Getting Started](guide/quickstart) into the folder containing the `.csproj` file. +Copy files from the starter Angular app into the folder containing the `.csproj` file. Include the files in the Visual Studio project as follows: * Click the `Show All Files` button in Solution Explorer to reveal all of the hidden files in the project. diff --git a/aio/content/images/guide/cli-quickstart/my-first-app.png b/aio/content/images/guide/cli-quickstart/my-first-app.png deleted file mode 100644 index e2346a6111..0000000000 Binary files a/aio/content/images/guide/cli-quickstart/my-first-app.png and /dev/null differ diff --git a/aio/content/images/guide/cli-quickstart/quickstart-sourcemap-explorer.png b/aio/content/images/guide/deployment/quickstart-sourcemap-explorer.png similarity index 100% rename from aio/content/images/guide/cli-quickstart/quickstart-sourcemap-explorer.png rename to aio/content/images/guide/deployment/quickstart-sourcemap-explorer.png diff --git a/aio/content/images/guide/getting-started/cart-page-checkout-form-empty.png b/aio/content/images/guide/getting-started/cart-page-checkout-form-empty.png deleted file mode 100644 index 6d094aa091..0000000000 Binary files a/aio/content/images/guide/getting-started/cart-page-checkout-form-empty.png and /dev/null differ diff --git a/aio/content/images/guide/getting-started/cart-page-no-items.png b/aio/content/images/guide/getting-started/cart-page-no-items.png deleted file mode 100644 index 304eda983a..0000000000 Binary files a/aio/content/images/guide/getting-started/cart-page-no-items.png and /dev/null differ diff --git a/aio/content/images/guide/getting-started/cart-with-shipping-link.png b/aio/content/images/guide/getting-started/cart-with-shipping-link.png deleted file mode 100644 index 23c7846277..0000000000 Binary files a/aio/content/images/guide/getting-started/cart-with-shipping-link.png and /dev/null differ diff --git a/aio/content/images/guide/getting-started/new-project.png b/aio/content/images/guide/getting-started/new-project.png deleted file mode 100644 index 36878c25c7..0000000000 Binary files a/aio/content/images/guide/getting-started/new-project.png and /dev/null differ diff --git a/aio/content/images/guide/getting-started/product-details.png b/aio/content/images/guide/getting-started/product-details.png deleted file mode 100644 index 65dd36e726..0000000000 Binary files a/aio/content/images/guide/getting-started/product-details.png and /dev/null differ diff --git a/aio/content/images/guide/getting-started/shipping-prices-via-route.png b/aio/content/images/guide/getting-started/shipping-prices-via-route.png deleted file mode 100644 index a7f099d360..0000000000 Binary files a/aio/content/images/guide/getting-started/shipping-prices-via-route.png and /dev/null differ diff --git a/aio/content/images/guide/getting-started/stackblitz-angular-icon.png b/aio/content/images/guide/getting-started/stackblitz-angular-icon.png deleted file mode 100644 index 75a2daddc0..0000000000 Binary files a/aio/content/images/guide/getting-started/stackblitz-angular-icon.png and /dev/null differ diff --git a/aio/content/images/guide/getting-started/stackblitz-icon-only-small.png b/aio/content/images/guide/getting-started/stackblitz-icon-only-small.png deleted file mode 100644 index c6ff5df84e..0000000000 Binary files a/aio/content/images/guide/getting-started/stackblitz-icon-only-small.png and /dev/null differ diff --git a/aio/content/images/guide/getting-started/stackblitz-icon-only.png b/aio/content/images/guide/getting-started/stackblitz-icon-only.png deleted file mode 100644 index 93bce1aaa6..0000000000 Binary files a/aio/content/images/guide/getting-started/stackblitz-icon-only.png and /dev/null differ diff --git a/aio/content/images/guide/getting-started/stackblitz-icon-small.png b/aio/content/images/guide/getting-started/stackblitz-icon-small.png deleted file mode 100644 index edffbd1573..0000000000 Binary files a/aio/content/images/guide/getting-started/stackblitz-icon-small.png and /dev/null differ diff --git a/aio/content/images/guide/getting-started/stackblitz-icon-smallest.png b/aio/content/images/guide/getting-started/stackblitz-icon-smallest.png deleted file mode 100644 index 3397527510..0000000000 Binary files a/aio/content/images/guide/getting-started/stackblitz-icon-smallest.png and /dev/null differ diff --git a/aio/content/images/guide/getting-started/stackblitz-icon.png b/aio/content/images/guide/getting-started/stackblitz-icon.png deleted file mode 100644 index d115fd8545..0000000000 Binary files a/aio/content/images/guide/getting-started/stackblitz-icon.png and /dev/null differ diff --git a/aio/content/images/guide/getting-started/starter-app-components.png b/aio/content/images/guide/getting-started/starter-app-components.png deleted file mode 100644 index 2ad1088661..0000000000 Binary files a/aio/content/images/guide/getting-started/starter-app-components.png and /dev/null differ diff --git a/aio/content/images/guide/cli-quickstart/app-works.png b/aio/content/images/guide/setup-local/app-works.png similarity index 100% rename from aio/content/images/guide/cli-quickstart/app-works.png rename to aio/content/images/guide/setup-local/app-works.png diff --git a/aio/content/images/guide/getting-started/app-components.png b/aio/content/images/guide/start/app-components.png similarity index 100% rename from aio/content/images/guide/getting-started/app-components.png rename to aio/content/images/guide/start/app-components.png diff --git a/aio/content/images/guide/getting-started/buy-alert.png b/aio/content/images/guide/start/buy-alert.png similarity index 100% rename from aio/content/images/guide/getting-started/buy-alert.png rename to aio/content/images/guide/start/buy-alert.png diff --git a/aio/content/images/guide/getting-started/cart-empty-with-shipping-prices.png b/aio/content/images/guide/start/cart-empty-with-shipping-prices.png similarity index 100% rename from aio/content/images/guide/getting-started/cart-empty-with-shipping-prices.png rename to aio/content/images/guide/start/cart-empty-with-shipping-prices.png diff --git a/aio/content/images/guide/getting-started/cart-page-full.png b/aio/content/images/guide/start/cart-page-full.png similarity index 100% rename from aio/content/images/guide/getting-started/cart-page-full.png rename to aio/content/images/guide/start/cart-page-full.png diff --git a/aio/content/images/guide/getting-started/cart-with-items-and-form.png b/aio/content/images/guide/start/cart-with-items-and-form.png similarity index 100% rename from aio/content/images/guide/getting-started/cart-with-items-and-form.png rename to aio/content/images/guide/start/cart-with-items-and-form.png diff --git a/aio/content/images/guide/getting-started/cart-works.png b/aio/content/images/guide/start/cart-works.png similarity index 100% rename from aio/content/images/guide/getting-started/cart-works.png rename to aio/content/images/guide/start/cart-works.png diff --git a/aio/content/images/guide/getting-started/generate-component.png b/aio/content/images/guide/start/generate-component.png similarity index 100% rename from aio/content/images/guide/getting-started/generate-component.png rename to aio/content/images/guide/start/generate-component.png diff --git a/aio/content/images/guide/getting-started/new-app.png b/aio/content/images/guide/start/new-app.png similarity index 100% rename from aio/content/images/guide/getting-started/new-app.png rename to aio/content/images/guide/start/new-app.png diff --git a/aio/content/images/guide/getting-started/product-alert-button.png b/aio/content/images/guide/start/product-alert-button.png similarity index 100% rename from aio/content/images/guide/getting-started/product-alert-button.png rename to aio/content/images/guide/start/product-alert-button.png diff --git a/aio/content/images/guide/getting-started/product-alert-notification.png b/aio/content/images/guide/start/product-alert-notification.png similarity index 100% rename from aio/content/images/guide/getting-started/product-alert-notification.png rename to aio/content/images/guide/start/product-alert-notification.png diff --git a/aio/content/images/guide/getting-started/product-details-buy.png b/aio/content/images/guide/start/product-details-buy.png similarity index 100% rename from aio/content/images/guide/getting-started/product-details-buy.png rename to aio/content/images/guide/start/product-details-buy.png diff --git a/aio/content/images/guide/getting-started/product-details-routed.png b/aio/content/images/guide/start/product-details-routed.png similarity index 100% rename from aio/content/images/guide/getting-started/product-details-routed.png rename to aio/content/images/guide/start/product-details-routed.png diff --git a/aio/content/images/guide/getting-started/product-details-works.png b/aio/content/images/guide/start/product-details-works.png similarity index 100% rename from aio/content/images/guide/getting-started/product-details-works.png rename to aio/content/images/guide/start/product-details-works.png diff --git a/aio/content/images/guide/getting-started/shipping-prices.png b/aio/content/images/guide/start/shipping-prices.png similarity index 100% rename from aio/content/images/guide/getting-started/shipping-prices.png rename to aio/content/images/guide/start/shipping-prices.png diff --git a/aio/content/images/guide/getting-started/template-syntax-product-anchor.png b/aio/content/images/guide/start/template-syntax-product-anchor.png similarity index 100% rename from aio/content/images/guide/getting-started/template-syntax-product-anchor.png rename to aio/content/images/guide/start/template-syntax-product-anchor.png diff --git a/aio/content/images/guide/getting-started/template-syntax-product-description.png b/aio/content/images/guide/start/template-syntax-product-description.png similarity index 100% rename from aio/content/images/guide/getting-started/template-syntax-product-description.png rename to aio/content/images/guide/start/template-syntax-product-description.png diff --git a/aio/content/images/guide/getting-started/template-syntax-product-names.png b/aio/content/images/guide/start/template-syntax-product-names.png similarity index 100% rename from aio/content/images/guide/getting-started/template-syntax-product-names.png rename to aio/content/images/guide/start/template-syntax-product-names.png diff --git a/aio/content/images/guide/getting-started/template-syntax-product-share-alert.png b/aio/content/images/guide/start/template-syntax-product-share-alert.png similarity index 100% rename from aio/content/images/guide/getting-started/template-syntax-product-share-alert.png rename to aio/content/images/guide/start/template-syntax-product-share-alert.png diff --git a/aio/content/images/guide/getting-started/template-syntax-product-share-button.png b/aio/content/images/guide/start/template-syntax-product-share-button.png similarity index 100% rename from aio/content/images/guide/getting-started/template-syntax-product-share-button.png rename to aio/content/images/guide/start/template-syntax-product-share-button.png diff --git a/aio/content/marketing/docs.md b/aio/content/marketing/docs.md index 5bc6bafca9..0fed2f5a3a 100644 --- a/aio/content/marketing/docs.md +++ b/aio/content/marketing/docs.md @@ -1,50 +1,52 @@ -

What is Angular?

+

Introduction to the Angular Docs

+ + + +These Angular docs help you learn and use the Angular platform and framework, from your first app to optimizing complex enterprise apps. +Tutorials and guides include downloadable example to accelerate your projects. -Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.
- -
Get a Glimpse of Angular
-

A quick look at an Angular "hello world" application.

-

Angular in Action

+ +
Learn
+

Create your first Angular app, without any setup

+

Getting Started

 - - -
Get Going with Angular
-

Get going on your own environment with the Getting Started.

-

Quickstart

+ +
Start Working
+

Set up your local environment with the Angular CLI

+

Local Setup

 - -
Fundamentals
-

Learn Angular application fundamentals, starting with an architecture overview.

+
Explore
+

Learn more about Angular apps and framework features

Architecture
+ ## Assumptions -This documentation assumes that you are already familiar with -[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript "Learn JavaScript"), -and some of the tools from the -[latest standards](https://babeljs.io/learn-es2015/ "Latest JavaScript standards") such as -[classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes "ES2015 Classes") -and [modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import "ES2015 Modules"). -The code samples are written using [TypeScript](https://www.typescriptlang.org/ "TypeScript"). -Most Angular code can be written with just the latest JavaScript, -using [types](https://www.typescriptlang.org/docs/handbook/classes.html "TypeScript Types") for dependency injection, -and using [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html "Decorators") for metadata. -## Feedback -You can sit with us! +These docs assume that you are already familiar with HTML, CSS, [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript "Learn JavaScript"), +and some of the tools from the [latest standards](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources "Latest JavaScript standards"), such as [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes "ES2015 Classes") and [modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import "ES2015 Modules"). +The code samples are written using [TypeScript](https://www.typescriptlang.org/ "TypeScript"). +Most Angular code can be written with just the latest JavaScript, using [types](https://www.typescriptlang.org/docs/handbook/classes.html "TypeScript Types") for dependency injection, and using [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html "Decorators") for metadata. -You can file documentation -[issues](https://github.com/angular/angular/issues "Angular Github issues") and create + +## Feedback + +

You can sit with us!

+ +We want to hear from you. [Report problems or submit suggestions for future docs.](https://github.com/angular/angular/issues/new/choose "Angular GitHub repository new issue form") + +Contribute to Angular docs by creating [pull requests](https://github.com/angular/angular/pulls "Angular Github pull requests") on the Angular Github repository. -The [contributing guide](https://github.com/angular/angular/blob/master/CONTRIBUTING.md "Contributing guide") -will help you contribute to the community. -Our community values respectful, supportive communication. -Please consult and adhere to the -[code of conduct](https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md "contributor code of conduct"). +See [Contributing to Angular](https://github.com/angular/angular/blob/master/CONTRIBUTING.md "Contributing guide") +for information about submission guidelines. + +Our community values respectful, supportive communication. +Please consult and adhere to the [Code of Conduct](https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md "Contributor code of conduct"). + diff --git a/aio/content/marketing/features.html b/aio/content/marketing/features.html index a4f5fcd6e9..390a02af44 100755 --- a/aio/content/marketing/features.html +++ b/aio/content/marketing/features.html @@ -108,7 +108,7 @@
- Get Started + Get Started
diff --git a/aio/content/marketing/index.html b/aio/content/marketing/index.html index 8bcdf397aa..50b84b2a52 100755 --- a/aio/content/marketing/index.html +++ b/aio/content/marketing/index.html @@ -15,7 +15,7 @@
One framework.
Mobile & desktop.
- Get Started + Get Started
@@ -102,12 +102,12 @@
- +
- Angular quickstart + Getting Started with Angular
Get Started
-

Start building your Angular application.

+

Start building an Angular application.

 diff --git a/aio/content/navigation.json b/aio/content/navigation.json index 9a62adbdfe..ba97ed64cf 100644 --- a/aio/content/navigation.json +++ b/aio/content/navigation.json @@ -47,9 +47,9 @@ "SideNav": [ { "url": "docs", - "title": "Docs", - "tooltip": "Angular Documentation", - "hidden": true + "title": "Introduction", + "tooltip": "Introduction to the Angular documentation", + "hidden": false }, { "url": "guide/docs-style-guide", @@ -62,87 +62,87 @@ "tooltip": "Learn the basics by building your first Angular application.", "children": [ { - "url": "getting-started", + "url": "start", "title": "Your First App", - "tooltip": "Introduction to Angular's component model, template syntax, and component communication" + "tooltip": "Introduction to Angular's component model, template syntax, and component communication." }, { - "url": "getting-started/routing", + "url": "start/routing", "title": "Routing", - "tooltip": "Introduction to routing between components using the browser's URL" + "tooltip": "Introduction to routing between components using the browser's URL." }, { - "url": "getting-started/data", + "url": "start/data", "title": "Managing Data", - "tooltip": "Introduction to services, and accessing external data" + "tooltip": "Introduction to services and accessing external data via HTTP." }, { - "url": "getting-started/forms", + "url": "start/forms", "title": "Forms", - "tooltip": "Learn about fetching and managing data from users with forms" + "tooltip": "Learn about fetching and managing data from users with forms." }, { - "url": "getting-started/deployment", + "url": "start/deployment", "title": "Deployment", - "tooltip": "Share your application with the world by hosting it on Firebase or your own server" + "tooltip": "Move to local development, or deploy your application to Firebase or your own server." } ] }, { - "url": "guide/quickstart", - "title": "Environment Quickstart", - "tooltip": "A brief introduction to local development with the Angular CLI." - }, - { - "title": "Tutorial: Tour of Heroes", - "tooltip": "The Tour of Heroes tutorial takes you through the steps of creating an Angular application in TypeScript.", - "children": [ - { - "url": "tutorial", - "title": "Introduction", - "tooltip": "Introduction to the Tour of Heroes tutorial" - }, - { - "url": "tutorial/toh-pt0", - "title": "The Application Shell", - "tooltip": "Creating the application shell" - }, - { - "url": "tutorial/toh-pt1", - "title": "1. The Hero Editor", - "tooltip": "Part 1: Build a simple hero editor" - }, - { - "url": "tutorial/toh-pt2", - "title": "2. Displaying a List", - "tooltip": "Part 2: Build a master/detail page with a list of heroes." - }, - { - "url": "tutorial/toh-pt3", - "title": "3. Master/Detail Components", - "tooltip": "Part 3: Refactor the master/detail view into separate components." - }, - { - "url": "tutorial/toh-pt4", - "title": "4. Services", - "tooltip": "Part 4: Create a reusable service to manage hero data." - }, - { - "url": "tutorial/toh-pt5", - "title": "5. Routing", - "tooltip": "Part 5: Add the Angular router and navigate among the views." - }, - { - "url": "tutorial/toh-pt6", - "title": "6. HTTP", - "tooltip": "Part 6: Use HTTP to retrieve and save hero data." - } - ] + "url": "guide/setup-local", + "title": "Setup", + "tooltip": "Setting up for local development with the Angular CLI." }, { "title": "Fundamentals", "tooltip": "The fundamentals of Angular", "children": [ + { + "title": "Tour of Heroes App", + "tooltip": "The Tour of Heroes app is used as a reference point in many Angular examples.", + "children": [ + { + "url": "tutorial", + "title": "Introduction", + "tooltip": "Introduction to the Tour of Heroes tutorial" + }, + { + "url": "tutorial/toh-pt0", + "title": "The Application Shell", + "tooltip": "Creating the application shell" + }, + { + "url": "tutorial/toh-pt1", + "title": "1. The Hero Editor", + "tooltip": "Part 1: Build a simple hero editor" + }, + { + "url": "tutorial/toh-pt2", + "title": "2. Displaying a List", + "tooltip": "Part 2: Build a master/detail page with a list of heroes." + }, + { + "url": "tutorial/toh-pt3", + "title": "3. Master/Detail Components", + "tooltip": "Part 3: Refactor the master/detail view into separate components." + }, + { + "url": "tutorial/toh-pt4", + "title": "4. Services", + "tooltip": "Part 4: Create a reusable service to manage hero data." + }, + { + "url": "tutorial/toh-pt5", + "title": "5. Routing", + "tooltip": "Part 5: Add the Angular router and navigate among the views." + }, + { + "url": "tutorial/toh-pt6", + "title": "6. HTTP", + "tooltip": "Part 6: Use HTTP to retrieve and save hero data." + } + ] + }, { "title": "Architecture", "tooltip": "The basic building blocks of Angular applications.", @@ -573,35 +573,15 @@ ] }, { - "title": "Setup & Deployment", - "tooltip": "Build, testing, and deployment environment, tool, and configuration information.", + "title": "Dev Workflow", + "tooltip": "Build, testing, and deployment information.", "children": [ { "url": "guide/setup", - "title": "Setup for local development", - "tooltip": "Install the Angular QuickStart seed for faster, more efficient development on your machine.", + "title": "Upgrade setup", + "tooltip": "How to set up the Angular QuickStart seed in the context of upgrading from AngularJS.", "hidden": true }, - { - "url": "guide/file-structure", - "title": "Project File Structure", - "tooltip": "How your Angular workspace looks on your filesystem." - }, - { - "url": "guide/workspace-config", - "title": "Workspace Configuration", - "tooltip": "The \"angular.json\" file contains workspace and project configuration defaults for Angular CLI commands." - }, - { - "url": "guide/npm-packages", - "title": "npm Dependencies", - "tooltip": "Description of npm packages required at development time and at runtime." - }, - { - "url": "guide/typescript-configuration", - "title": "TypeScript Configuration", - "tooltip": "TypeScript configuration for Angular developers." - }, { "url": "guide/aot-compiler", "title": "Ahead-of-Time Compilation", @@ -627,11 +607,6 @@ "title": "Deployment", "tooltip": "Learn how to deploy your Angular app." }, - { - "url": "guide/browser-support", - "title": "Browser Support", - "tooltip": "Browser support and polyfills guide." - }, { "title": "Dev Tool Integration", "tooltip": "Integrate with your development environment and tools.", @@ -651,6 +626,37 @@ } ] }, + { + "title": "Configuration", + "tooltip": "Workspace and project structure, configuration files.", + "children": [ + { + "url": "guide/file-structure", + "title": "Project File Structure", + "tooltip": "How your Angular workspace looks on your filesystem." + }, + { + "url": "guide/workspace-config", + "title": "Workspace Configuration", + "tooltip": "The \"angular.json\" file contains workspace and project configuration defaults for Angular CLI commands." + }, + { + "url": "guide/npm-packages", + "title": "npm Dependencies", + "tooltip": "Description of npm packages required at development time and at runtime." + }, + { + "url": "guide/typescript-configuration", + "title": "TypeScript Configuration", + "tooltip": "TypeScript configuration for Angular developers." + }, + { + "url": "guide/browser-support", + "title": "Browser Support", + "tooltip": "Browser support and polyfills guide." + } + ] + }, { "title": "Release Information", "tooltip": "Angular release practices, updating, and upgrading.", diff --git a/aio/content/getting-started/data.md b/aio/content/start/data.md similarity index 91% rename from aio/content/getting-started/data.md rename to aio/content/start/data.md index 5d2967ee09..a95b48c2cf 100644 --- a/aio/content/getting-started/data.md +++ b/aio/content/start/data.md @@ -1,6 +1,6 @@ # Managing Data -At the end of [Routing](getting-started/routing "Getting Started: Routing"), the online store application has a product catalog with two views: a product list and product details. +At the end of [Routing](start/routing "Getting Started: Routing"), the online store application has a product catalog with two views: a product list and product details. Users can click on a product name from the list to see details in a new view, with a distinct URL (route). In this section, you'll create the shopping cart. You'll: @@ -25,7 +25,7 @@ You'll also set up a cart service to store information about products in the car
-Later, in the [Forms](getting-started/forms "Getting Started: Forms") part of this tutorial, this cart service also will be accessed from the page where the user checks out. +Later, in the [Forms](start/forms "Getting Started: Forms") part of this tutorial, this cart service also will be accessed from the page where the user checks out.
@@ -106,13 +106,13 @@ When the "Buy" button is clicked, you'll use the cart service to add the current 1. To see the new "Buy" button, refresh the application and click on a product's name to display its details.
- Display details for selected product with a Buy button + Display details for selected product with a Buy button
1. Click the "Buy" button. The product is added to the stored list of items in the cart, and a message is displayed.
- Display details for selected product with a Buy button + Display details for selected product with a Buy button
@@ -151,7 +151,7 @@ We'll create the cart page in two steps: (Note: The "Checkout" button that we provided in the top-bar component was already configured with a `routerLink` for `/cart`.)
- Display cart page before customizing + Display cart page before customizing
@@ -205,7 +205,7 @@ Services can be used to share data across components: 1. To add another product, click "My Store" to return to the product list. Repeat the steps above.
- Cart page with products added + Cart page with products added
@@ -364,13 +364,13 @@ Now that your app can retrieve shipping data, you'll create a shipping component Click on the "Checkout" button to see the updated cart. (Remember that changing the app causes the preview to refresh, which empties the cart.)
- Cart with link to shipping prices + Cart with link to shipping prices
Click on the link to navigate to the shipping prices.
- Display shipping prices + Display shipping prices
@@ -379,7 +379,7 @@ Now that your app can retrieve shipping data, you'll create a shipping component Congratulations! You have an online store application with a product catalog and shopping cart. You also have the ability to look up and display shipping prices. To continue exploring Angular, choose either of the following options: -* [Continue to the "Forms" section](getting-started/forms "Getting Started: Forms") to finish the app by adding the shopping cart page and a form-based checkout feature. You'll create a form to collect user information as part of checkout. -* [Skip ahead to the "Deployment" section](getting-started/deployment "Getting Started: Deployment") to deploy your app to Firebase or move to local development. +* [Continue to the "Forms" section](start/forms "Getting Started: Forms") to finish the app by adding the shopping cart page and a form-based checkout feature. You'll create a form to collect user information as part of checkout. +* [Skip ahead to the "Deployment" section](start/deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server. diff --git a/aio/content/getting-started/deployment.md b/aio/content/start/deployment.md similarity index 84% rename from aio/content/getting-started/deployment.md rename to aio/content/start/deployment.md index 0f60f03fe7..e5fa6e971a 100644 --- a/aio/content/getting-started/deployment.md +++ b/aio/content/start/deployment.md @@ -6,7 +6,7 @@ To deploy your application, you have to compile it, and then host the JavaScript
-Whether you came here directly from [Your First App](getting-started "Getting Started: Your First App"), or completed the entire online store application through the [Routing](getting-started/routing "Getting Started: Routing"), [Managing Data](getting-started/data "Getting Started: Managing Data"), and [Forms](getting-started/forms "Getting Started: Forms") sections, you have an application that you can deploy by following the instructions in this section. +Whether you came here directly from [Your First App](start "Getting Started: Your First App"), or completed the entire online store application through the [Routing](start/routing "Getting Started: Routing"), [Managing Data](start/data "Getting Started: Managing Data"), and [Forms](start/forms "Getting Started: Forms") sections, you have an application that you can deploy by following the instructions in this section.
@@ -76,7 +76,7 @@ Learn more about development and distribution of your application in the [Buildi ## Join our community -You are now an Angular developer! [Share this moment](https://twitter.com/intent/tweet?url=https://next.angular.io/getting-started&text=I%20just%20finished%20the%20Angular%20Getting%20Started%20Tutorial "Angular on Twitter"), tell us what you thought of this Getting Started, or submit [suggestions for future editions](https://github.com/angular/angular/issues/new/choose "Angular GitHub repository new issue form"). +You are now an Angular developer! [Share this moment](https://twitter.com/intent/tweet?url=https://next.angular.io/start&text=I%20just%20finished%20the%20Angular%20Getting%20Started%20Tutorial "Angular on Twitter"), tell us what you thought of this Getting Started, or submit [suggestions for future editions](https://github.com/angular/angular/issues/new/choose "Angular GitHub repository new issue form"). Angular offers many more capabilities, and you now have a foundation that empowers you to build an application and explore those other capabilities: diff --git a/aio/content/getting-started/forms.md b/aio/content/start/forms.md similarity index 91% rename from aio/content/getting-started/forms.md rename to aio/content/start/forms.md index 922a2f15f3..5cb36dc515 100644 --- a/aio/content/getting-started/forms.md +++ b/aio/content/start/forms.md @@ -1,6 +1,6 @@ # Forms -At the end of [Managing Data](getting-started/data "Getting Started: Managing Data"), the online store application has a product catalog and a shopping cart. +At the end of [Managing Data](start/data "Getting Started: Managing Data"), the online store application has a product catalog and a shopping cart. In this section, you'll finish the app by adding a form-based checkout feature. You'll create a form to collect user information as part of checkout. @@ -75,7 +75,7 @@ Next, you'll add a checkout form at the bottom of the "Cart" page. After putting a few items in the cart, users can now review their items, enter name and address, and submit their purchase:
- Cart page with checkout form + Cart page with checkout form
@@ -83,5 +83,5 @@ After putting a few items in the cart, users can now review their items, enter n Congratulations! You have a complete online store application with a product catalog, a shopping cart, and a checkout function. -[Continue to the "Deployment" section](getting-started/deployment "Getting Started: Deployment") to deploy your app to Firebase or move to local development. +[Continue to the "Deployment" section](start/deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server. diff --git a/aio/content/getting-started/index.md b/aio/content/start/index.md similarity index 90% rename from aio/content/getting-started/index.md rename to aio/content/start/index.md index 639a22c66e..c648a05cdd 100644 --- a/aio/content/getting-started/index.md +++ b/aio/content/start/index.md @@ -28,12 +28,9 @@ You'll find many resources to complement the Angular docs. Mozilla's MDN docs in StackBlitz creates a starter Angular app. We've seeded this particular app with a top bar—containing the store name and checkout icon—and the title for a product list. -
- Starter online store app + Starter online store app
@@ -83,7 +80,7 @@ In this section, you'll learn about template syntax by enhancing the "Products" The preview pane immediately updates to display the name of each product in the list.
- Product names added to list + Product names added to list
1. In the final app, each product name will be a link to product details. Add the anchor now, and set the anchor's title to be the product's name by using the property binding [ ] syntax, as shown below: @@ -98,7 +95,7 @@ In this section, you'll learn about template syntax by enhancing the "Products" In the preview pane, hover over the displayed product name to see the bound name property value. They are the same. Interpolation {{ }} lets you render the property value as text; property binding [ ] lets you use the property value in a template expression.
- Product name anchor text is product name property + Product name anchor text is product name property
@@ -110,7 +107,7 @@ In this section, you'll learn about template syntax by enhancing the "Products" The app now displays the name and description of each product in the list, as shown below. Notice that the final product does not have a description paragraph at all. Because the product's description property is empty, the paragraph element—including the word "Description"—is not created.
- Product descriptions added to list + Product descriptions added to list
1. Add a button so users can share a product with friends. Bind the button's `click` event to the `share()` event that we defined for you (in `product-list.component.ts`). Event binding is done by using ( ) around the event, as shown below: @@ -121,13 +118,13 @@ In this section, you'll learn about template syntax by enhancing the "Products" Each product now has a "Share" button:
- Share button added for each product + Share button added for each product
Test the "Share" button:
- Alert box indicating product has been shared + Alert box indicating product has been shared
The app now has a product list and sharing feature. @@ -180,7 +177,7 @@ An Angular application is composed of a tree of components, in which each Angula Currently, our app has three components:
- Online store with three components + Online store with three components
* `app-root` (orange box) is the application shell. This is the first component to load, and the parent of all other components. You can think of it as the base page. @@ -210,7 +207,7 @@ We're going to create a new alert feature. The alert feature will take a product 1. Right click on the `app` folder and use the `Angular Generator` to generate a new component named `product-alerts`.
- StackBlitz command to generate component + StackBlitz command to generate component
The generator creates starter files for all three parts of the component: @@ -259,7 +256,7 @@ We're going to create a new alert feature. The alert feature will take a product The new product alert component takes a product as input from the product list. With that input, it shows or hides the "Notify Me" button, based on the price of the product. The Phone XL price is over $700, so the "Notify Me" button appears on that product.
- Product alert button added to products over $700 + Product alert button added to products over $700
@@ -302,7 +299,7 @@ The "Notify Me" button doesn't do anything yet. In this section, you'll set up t 1. Try out the "Notify Me" button:
- Product alert notification confirmation dialog + Product alert notification confirmation dialog
@@ -323,6 +320,6 @@ You've learned about the foundation of Angular: components and template syntax. You've also learned how the component class and template interact, and how components communicate with each other. To continue exploring Angular, choose either of the following options: -* [Continue to the "Routing" section](getting-started/routing "Getting Started: Routing") to create a product details page that can be accessed by clicking a product name and that has its own URL pattern. -* [Skip ahead to the "Deployment" section](getting-started/deployment "Getting Started: Deployment") to deploy your app to Firebase or move to local development. +* [Continue to the "Routing" section](start/routing "Getting Started: Routing") to create a product details page that can be accessed by clicking a product name and that has its own URL pattern. +* [Skip ahead to the "Deployment" section](start/deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server. diff --git a/aio/content/getting-started/routing.md b/aio/content/start/routing.md similarity index 88% rename from aio/content/getting-started/routing.md rename to aio/content/start/routing.md index 452fbca4e9..7c9c0510cf 100644 --- a/aio/content/getting-started/routing.md +++ b/aio/content/start/routing.md @@ -1,6 +1,6 @@ # Routing -At the end of [Your First App](getting-started "Getting Started: Your First App"), the online store application has a basic product catalog. +At the end of [Your First App](start "Getting Started: Your First App"), the online store application has a basic product catalog. The app doesn't have any variable states or navigation. There is one URL, and that URL always displays the "My Store" page with a list of products and their descriptions. @@ -55,7 +55,7 @@ The app is already set up to use the Angular router and to use routing to naviga Notice that the URL in the preview window changes. The final segment is `products/1`.
- Product details page with updated URL + Product details page with updated URL
@@ -101,7 +101,7 @@ The product details component handles the display of each product. The Angular R Now, when the user clicks on a name in the product list, the router navigates you to the distinct URL for the product, swaps out the product list component for the product details component, and displays the product details.
- Product details page with updated URL and full details displayed + Product details page with updated URL and full details displayed
@@ -121,6 +121,6 @@ Congratulations! You have integrated routing into your online store. * Users can click on a product name from the list to see details in a new view, with a distinct URL (route) To continue exploring Angular, choose either of the following options: -* [Continue to the "Managing Data" section](getting-started/data "Getting Started: Managing Data") to add the shopping cart feature, using a service to manage the cart data and using HTTP to retrieve external data for shipping prices. -* [Skip ahead to the Deployment section](getting-started/deployment "Getting Started: Deployment") to deploy your app to Firebase or move to local development. +* [Continue to the "Managing Data" section](start/data "Getting Started: Managing Data") to add the shopping cart feature, using a service to manage the cart data and using HTTP to retrieve external data for shipping prices. +* [Skip ahead to the Deployment section](start/deployment "Getting Started: Deployment") to deploy your app to Firebase or move to local development. diff --git a/aio/content/tutorial/index.md b/aio/content/tutorial/index.md index 5d4eb677d9..81ef34586f 100644 --- a/aio/content/tutorial/index.md +++ b/aio/content/tutorial/index.md @@ -1,19 +1,20 @@ -

Tutorial: Tour of Heroes

+

Tour of Heroes App and Tutorial

-This _Tour of Heroes_ tutorial provides a deep dive into the fundamentals of Angular. -It shows you how to set up your local development environment and develop an app using the [Angular CLI tool](cli "CLI command reference").
-
Getting Started - Stackblitz
+
Getting Started Tutorial
-We recently introduced a [**new Getting Started**](getting-started) that leverages the [StackBlitz](https://stackblitz.com/) online development environment. -We recommend the new Getting Started for anyone who wants to quickly learn the essentials of Angular, in the context of building an online store app. -The new Getting Started covers the same major topics as this Tour of Heroes—components, template syntax, routing, services, and accessing data via HTTP—in a condensed format. +If you're new to Angular, see the [**Getting Started tutorial.**](start) +The Getting Started tutorial covers the same major topics as this Tour of Heroes—components, template syntax, routing, services, and accessing data via HTTP—in a condensed format, following the most current best practices. +**This Tour of Heroes tutorial** is the conceptual basis for many examples in this documentation set. Reading this introduction page provides sufficient context for working with those examples. You do not need to do this tutorial to understand those other examples. The Tour of Heroes tutorial is maintained here for context and continuity.
+This _Tour of Heroes_ tutorial provides an introduction to the fundamentals of Angular. +It shows you how to set up your local development environment and develop an app using the [Angular CLI tool](cli "CLI command reference"). + In this _Tour of Heroes_ tutorial, you will build an app that helps a staffing agency manage its stable of heroes. This app has many of the features you'd expect to find in a data-driven application. @@ -34,8 +35,14 @@ By the end of this tutorial you will be able to do the following: You'll learn enough Angular to get started and gain confidence that Angular can do whatever you need it to do. +
+
Solution
+ After completing all tutorial steps, the final app will look like this: . +
+ + ## What you'll build diff --git a/aio/content/tutorial/toh-pt0.md b/aio/content/tutorial/toh-pt0.md index 0a69dce874..afd3b14a4e 100644 --- a/aio/content/tutorial/toh-pt0.md +++ b/aio/content/tutorial/toh-pt0.md @@ -12,15 +12,7 @@ In this part of the tutorial, you'll do the following: ## Set up your environment -To set up your development environment, follow these instructions in [Getting Started](guide/quickstart): - -* [Prerequisites](guide/quickstart#prerequisites) -* [Install the Angular CLI](guide/quickstart#install-cli) - -
- -**Note:** You do not need to complete the entire Getting Started. After you complete the above two sections of Getting Started, your environment is set up. Continue below to create the Tour of Heroes workspace and an initial app project. -
+To set up your development environment, follow the instructions in [Local Environment Setup](guide/setup-local "Setting up for Local Development"). ## Create a new workspace and an initial application diff --git a/aio/firebase.json b/aio/firebase.json index a506a10892..5f3b52588d 100644 --- a/aio/firebase.json +++ b/aio/firebase.json @@ -16,18 +16,21 @@ {"type": 301, "source": "/api/api/:rest*", "destination": "/api/:rest*"}, // Guide renames/removals - {"type": 301, "source": "/docs/*/latest/cli-quickstart.html", "destination": "/guide/quickstart"}, + {"type": 301, "source": "/docs/*/latest/cli-quickstart.html", "destination": "/start"}, {"type": 301, "source": "/docs/*/latest/glossary.html", "destination": "/guide/glossary"}, - {"type": 301, "source": "/docs/*/latest/quickstart.html", "destination": "/guide/quickstart"}, + {"type": 301, "source": "/docs/*/latest/quickstart.html", "destination": "/start"}, {"type": 301, "source": "/docs/*/latest/guide/server-communication.html", "destination": "/guide/http"}, {"type": 301, "source": "/docs/*/latest/guide/style-guide.html", "destination": "/guide/styleguide"}, - {"type": 301, "source": "/guide/cli-quickstart", "destination": "/guide/quickstart"}, + {"type": 301, "source": "/guide/cli-quickstart", "destination": "/start"}, {"type": 301, "source": "/guide/service-worker-getstart", "destination": "/guide/service-worker-getting-started"}, {"type": 301, "source": "/guide/service-worker-comm", "destination": "/guide/service-worker-communications"}, {"type": 301, "source": "/guide/service-worker-configref", "destination": "/guide/service-worker-config"}, {"type": 301, "source": "/guide/webpack", "destination": "https://v5.angular.io/guide/webpack"}, {"type": 301, "source": "/guide/setup-systemjs-anatomy", "destination": "/guide/file-structure"}, {"type": 301, "source": "/guide/change-log", "destination": "https://github.com/angular/angular/blob/master/CHANGELOG.md"}, + {"type": 301, "source": "/guide/quickstart", "destination": "/start"}, + {"type": 301, "source": "/getting-started", "destination": "/start"}, + {"type": 301, "source": "/getting-started/:rest*", "destination": "/start/:rest*"}, // some top level guide pages on old site were moved below the guide folder {"type": 301, "source": "/styleguide", "destination": "/guide/styleguide"}, @@ -108,7 +111,7 @@ {"type": 301, "source": "/docs/styleguide*", "destination": "/guide/styleguide"}, {"type": 301, "source": "/guide/metadata", "destination": "/guide/aot-compiler"}, {"type": 301, "source": "/guide/ngmodule", "destination": "/guide/ngmodules"}, - {"type": 301, "source": "/guide/learning-angular*", "destination": "/guide/quickstart"}, + {"type": 301, "source": "/guide/learning-angular*", "destination": "/start"}, {"type": 301, "source": "/testing", "destination": "/guide/testing"}, {"type": 301, "source": "/testing/**", "destination": "/guide/testing"}, diff --git a/aio/ngsw-config.json b/aio/ngsw-config.json index 269ad7e6d6..eefdd3d1a9 100644 --- a/aio/ngsw-config.json +++ b/aio/ngsw-config.json @@ -95,6 +95,9 @@ "!/docs/?*", "!/docs/*/**", "!/guide/change-log", + "!/getting-started", + "!/getting-started.html", + "!/getting-started/**", "!/guide/cli-quickstart", "!/guide/cli-quickstart.html", "!/guide/cli-quickstart/", @@ -121,6 +124,8 @@ "!/guide/webpack/", "!/guide/setup-systemjs-anatomy", "!/guide/setup-systemjs-anatomy.html", + "!/guide/quickstart", + "!/guide/quickstart.html", "!/news", "!/news.html", "!/news/", diff --git a/aio/tests/deployment/e2e/smoke-tests.e2e-spec.ts b/aio/tests/deployment/e2e/smoke-tests.e2e-spec.ts index fe9e8025c8..7c954f9c0d 100644 --- a/aio/tests/deployment/e2e/smoke-tests.e2e-spec.ts +++ b/aio/tests/deployment/e2e/smoke-tests.e2e-spec.ts @@ -25,7 +25,7 @@ describe(browser.baseUrl, () => { describe('(marketing pages)', () => { const textPerUrl: { [key: string]: string } = { features: 'features & benefits', - docs: 'what is angular?', + docs: 'introduction to the angular docs', events: 'events', resources: 'explore angular resources', }; @@ -45,9 +45,9 @@ describe(browser.baseUrl, () => { api: 'api list', 'guide/architecture': 'architecture', 'guide/http': 'httpclient', - 'guide/quickstart': 'getting started', 'guide/security': 'security', tutorial: 'tutorial', + start: 'getting started', }; Object.keys(textPerUrl).forEach(url => { diff --git a/aio/tests/deployment/shared/URLS_TO_REDIRECT.txt b/aio/tests/deployment/shared/URLS_TO_REDIRECT.txt index 1f86c1ed97..2928dddbbb 100644 --- a/aio/tests/deployment/shared/URLS_TO_REDIRECT.txt +++ b/aio/tests/deployment/shared/URLS_TO_REDIRECT.txt @@ -171,10 +171,16 @@ /docs/ts/latest/api/platform-browser-dynamic/index/workerAppDynamicPlatform-let.html /api/platform-browser-dynamic/workerAppDynamicPlatform /docs/ts/latest/api/testing/fakeAsync-function.html /api/core/testing/fakeAsync /docs/ts/latest/cookbook/ts-to-js.html https://v2.angular.io/docs/ts/latest/cookbook/ts-to-js.html -/guide/cli-quickstart /guide/quickstart -/guide/learning-angular /guide/quickstart -/guide/learning-angular.html /guide/quickstart +/getting-started /start +/getting-started/routing /start/routing +/getting-started/data /start/data +/getting-started/forms /start/forms +/getting-started/deployment /start/deployment +/guide/cli-quickstart /start +/guide/learning-angular /start +/guide/learning-angular.html /start /guide/metadata /guide/aot-compiler +/guide/quickstart /start /guide/service-worker-getstart /guide/service-worker-getting-started /guide/service-worker-comm /guide/service-worker-communications /guide/service-worker-configref /guide/service-worker-config diff --git a/aio/tests/e2e/src/app.e2e-spec.ts b/aio/tests/e2e/src/app.e2e-spec.ts index 48f68b904a..db162c5660 100644 --- a/aio/tests/e2e/src/app.e2e-spec.ts +++ b/aio/tests/e2e/src/app.e2e-spec.ts @@ -75,7 +75,7 @@ describe('site App', function() { it('should show the tutorial index page at `/tutorial` after jitterbugging through features', () => { // check that we can navigate directly to the tutorial page page.navigateTo('tutorial'); - expect(page.getDocViewerText()).toMatch(/Tutorial: Tour of Heroes/i); + expect(page.getDocViewerText()).toMatch(/Tour of Heroes App and Tutorial/i); // navigate to a different page page.click(page.getTopMenuLink('features')); @@ -86,8 +86,8 @@ describe('site App', function() { // Tutorial folder should still be expanded because this test runs in wide mode // Navigate to the tutorial introduction via a link in the sidenav - page.click(page.getNavItem(/introduction/i)); - expect(page.getDocViewerText()).toMatch(/Tutorial: Tour of Heroes/i); + page.click(page.getNavItem(/The Hero Editor/i)); + expect(page.getDocViewerText()).toMatch(/The Hero Editor/i); }); it('should render `{@example}` dgeni tags as `` elements with HTML escaped content', () => { diff --git a/aio/tools/transforms/angular-content-package/index.js b/aio/tools/transforms/angular-content-package/index.js index 1775220085..51cd650655 100644 --- a/aio/tools/transforms/angular-content-package/index.js +++ b/aio/tools/transforms/angular-content-package/index.js @@ -43,7 +43,7 @@ module.exports = new Package('angular-content', [basePackage, contentPackage]) readFilesProcessor.sourceFiles = readFilesProcessor.sourceFiles.concat([ { basePath: CONTENTS_PATH, - include: CONTENTS_PATH + '/{getting-started,guide,tutorial}/**/*.md', + include: CONTENTS_PATH + '/{start,guide,tutorial}/**/*.md', fileReader: 'contentFileReader' }, { diff --git a/aio/tools/transforms/authors-package/getting-started-package.js b/aio/tools/transforms/authors-package/getting-started-package.js index d7a1277d00..350cee340e 100644 --- a/aio/tools/transforms/authors-package/getting-started-package.js +++ b/aio/tools/transforms/authors-package/getting-started-package.js @@ -16,7 +16,7 @@ const { CONTENTS_PATH } = require('../config'); function createPackage(tutorialName) { - const tutorialFilePath = `${CONTENTS_PATH}/getting-started/${tutorialName}.md`; + const tutorialFilePath = `${CONTENTS_PATH}/start/${tutorialName}.md`; const tutorialFile = readFileSync(tutorialFilePath, 'utf8'); const examples = []; tutorialFile.replace(/]*path="([^"]+)"/g, (_, path) => examples.push('examples/' + path)); diff --git a/aio/tools/transforms/authors-package/index.js b/aio/tools/transforms/authors-package/index.js index b747bc8302..f8bad88e37 100644 --- a/aio/tools/transforms/authors-package/index.js +++ b/aio/tools/transforms/authors-package/index.js @@ -22,7 +22,7 @@ function createPackage(changedFile) { return require('./tutorial-package').createPackage(tutorialName); } - const gettingStartedMatch = /^aio\/content\/getting-started\/([^.]+)\.md/.exec(changedFile); + const gettingStartedMatch = /^aio\/content\/start\/([^.]+)\.md/.exec(changedFile); const gettingStartedExampleMatch = /^aio\/content\/examples\/getting-started\/([^\/]+)\//.exec(changedFile); if (gettingStartedMatch || gettingStartedExampleMatch) { const gettingStartedName = gettingStartedMatch && gettingStartedMatch[1] || 'index';