docs: move old quick start content into new local setup guide (#29651)
PR Close #29651
This commit is contained in:
jenniferfell
Jason Aden
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"open": false,
|
||||
"logLevel": "silent",
|
||||
"port": 8080,
|
||||
"server": {
|
||||
"baseDir": "dist",
|
||||
"middleware": {
|
||||
"0": 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!!');
|
||||
});
|
||||
});
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"build": "build:cli",
|
||||
"run": "serve:cli"
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
/* #docregion */
|
||||
h1 {
|
||||
color: #369;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 250%;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
<!--The content below is only a placeholder and can be replaced.-->
|
||||
<div style="text-align:center">
|
||||
<h1>
|
||||
Welcome to {{ title }}!
|
||||
</h1>
|
||||
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
|
||||
</div>
|
||||
<h2>Here are some links to help you start: </h2>
|
||||
<ul>
|
||||
<li>
|
||||
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -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);
|
||||
}));
|
||||
});
|
||||
@@ -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
|
||||
@@ -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 { }
|
||||
@@ -1,14 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>MyApp</title>
|
||||
<base href="/">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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);
|
||||
@@ -1,9 +0,0 @@
|
||||
{
|
||||
"files":[
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js",
|
||||
"!**/*.[0-9].*",
|
||||
"angular.json",
|
||||
"protractor.conf.js"
|
||||
]
|
||||
}
|
||||
@@ -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).
|
||||
|
||||
@@ -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`.
|
||||
|
||||
<figure>
|
||||
<img src="generated/images/guide/cli-quickstart/quickstart-sourcemap-explorer.png" alt="quickstart sourcemap explorer">
|
||||
<img src="generated/images/guide/deployment/quickstart-sourcemap-explorer.png" alt="quickstart sourcemap explorer">
|
||||
</figure>
|
||||
|
||||
{@a base-tag}
|
||||
|
||||
@@ -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 <code>displaying-data</code>.
|
||||
Use the CLI command [`ng new displaying-data`](cli/new) to create a workspace and app named `displaying-data`.
|
||||
|
||||
Delete the <code>app.component.html</code> file. It is not needed for this example.
|
||||
|
||||
|
||||
@@ -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).
|
||||
|
||||
@@ -9,7 +9,7 @@ Alternatively, you can use the [yarn client](https://yarnpkg.com/) for downloadi
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
npm install -g @angular/cli
|
||||
|
||||
</code-example>
|
||||
|
||||
|
||||
|
||||
{@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:
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
ng new my-app
|
||||
|
||||
</code-example>
|
||||
|
||||
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.
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
cd my-app
|
||||
ng serve --open
|
||||
</code-example>
|
||||
|
||||
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:
|
||||
|
||||
|
||||
<figure>
|
||||
<img src='generated/images/guide/cli-quickstart/app-works.png' alt="Welcome to my-app!">
|
||||
</figure>
|
||||
|
||||
|
||||
|
||||
|
||||
## 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.
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
<div class="callout is-helpful">
|
||||
<header>Getting Started - Stackblitz</header>
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
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:
|
||||
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
npm install -g @angular/cli
|
||||
|
||||
</code-example>
|
||||
|
||||
|
||||
|
||||
{@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:
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
ng new my-app
|
||||
|
||||
</code-example>
|
||||
|
||||
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.
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
cd my-app
|
||||
ng serve --open
|
||||
</code-example>
|
||||
|
||||
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:
|
||||
|
||||
|
||||
<figure>
|
||||
<img src='generated/images/guide/cli-quickstart/app-works.png' alt="Welcome to my-app!">
|
||||
</figure>
|
||||
|
||||
|
||||
|
||||
{@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'`.
|
||||
|
||||
<code-example path="cli-quickstart/src/app/app.component.ts" region="component" header="src/app/app.component.ts" linenums="false"></code-example>
|
||||
|
||||
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.
|
||||
|
||||
<code-example path="cli-quickstart/src/app/app.component.css" header="src/app/app.component.css" linenums="false"></code-example>
|
||||
|
||||
Looking good!
|
||||
|
||||
<figure>
|
||||
<img src='generated/images/guide/cli-quickstart/my-first-app.png' alt="Output of Getting Started app">
|
||||
</figure>
|
||||
|
||||
|
||||
|
||||
|
||||
{@a project-file-review}
|
||||
|
||||
## Final code review
|
||||
|
||||
You can <a href="generated/zips/cli-quickstart/cli-quickstart.zip" target="_blank">download an example</a> of the app that you created in this Getting Started guide.
|
||||
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
**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.
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
<div class="callout is-helpful">
|
||||
<header>Learning Angular</header>
|
||||
|
||||
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.
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{@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:
|
||||
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
npm install -g @angular/cli
|
||||
|
||||
</code-example>
|
||||
|
||||
|
||||
|
||||
{@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:
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
ng new my-app
|
||||
|
||||
</code-example>
|
||||
|
||||
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.
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
cd my-app
|
||||
ng serve --open
|
||||
</code-example>
|
||||
|
||||
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:
|
||||
|
||||
|
||||
<figure>
|
||||
<img src='generated/images/guide/setup-local/app-works.png' alt="Welcome to my-app!">
|
||||
</figure>
|
||||
|
||||
|
||||
## 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.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
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.
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
* 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).
|
||||
|
||||
+30
-49
@@ -1,20 +1,32 @@
|
||||
# Setup for local development
|
||||
# Setup for Upgrading from AngularJS
|
||||
|
||||
{@a develop-locally}
|
||||
<!--
|
||||
Question: Can we remove this file and instead direct readers to https://github.com/angular/quickstart/blob/master/README.md
|
||||
-->
|
||||
|
||||
<div class="alert is-critical">
|
||||
|
||||
**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").
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
The <live-example name=quickstart>QuickStart live-coding</live-example> example is an Angular _playground_.
|
||||
It's not where you'd develop a real application.
|
||||
You [should develop locally](guide/setup#why-locally "Why develop locally") on your own machine ... and that's also how we think you should learn Angular.
|
||||
There are also some differences from a local app, to simplify that live-coding experience.
|
||||
In particular, the QuickStart live-coding example shows just the AppComponent file; it creates the equivalent of app.module.ts and main.ts internally for the playground only.
|
||||
-->
|
||||
|
||||
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, <a href="https://msdn.microsoft.com/library/ee330736%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396#websocket_maxconn" title="MSDN WebSocket settings">MSDN WebSocket Settings</a>.
|
||||
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-example title="QuickStart Seed in Stackblitz">Live coding</live-example> 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-example title="QuickStart Seed in Stackblitz">live coding</live-example> 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
|
||||
<a href="https://github.com/angular/angular/issues/new" title="File a documentation issue">file a documentation issue</a> or
|
||||
<a href="https://github.com/angular/angular/issues/new" title="File an Angular issue">file an issue with Angular itself</a>.
|
||||
|
||||
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, <a href="https://msdn.microsoft.com/library/ee330736%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396#websocket_maxconn" title="MSDN WebSocket settings">MSDN WebSocket Settings</a>.
|
||||
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.
|
||||
|
||||
<div class="alert is-important">
|
||||
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.
|
||||
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.
|
||||
|
||||
@@ -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.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
</div>
|
||||
@@ -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.
|
||||
|
||||
|
||||
<h2 id='download'>
|
||||
Step 1: Download the Angular Getting Started app
|
||||
Step 1: Create a starter Angular app
|
||||
</h2>
|
||||
|
||||
|
||||
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
|
||||
|
||||
|
||||
<h2 id='copy'>
|
||||
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
|
||||
</h2>
|
||||
|
||||
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.
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user