docs(aio): reorganise the sidenav menu (#16934)
Reorganizes the items in the sidenav menu and consolidates the quickstart and cli-quickstart guides into one.
This commit is contained in:
Kapunahele Wong
Igor Minar
parent
db5e5067a0
commit
d56b7ed96d
|
|
@ -38,7 +38,7 @@ This page introduces modules; the [Angular modules](guide/ngmodule) page covers
|
|||
|
||||
<br class="clear">
|
||||
|
||||
Every Angular app has at least one Angular module class, [the _root module_](guide/appmodule "AppModule: the root module"),
|
||||
Every Angular app has at least one Angular module class, [the _root module_](guide/bootstrapping "AppModule: the root module"),
|
||||
conventionally named `AppModule`.
|
||||
|
||||
While the _root module_ may be the only module in a small application, most apps have many more
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
# AppModule: the root module
|
||||
# Bootstrapping
|
||||
|
||||
An Angular module class describes how the application parts fit together.
|
||||
Every application has at least one Angular module, the _root_ module
|
||||
that you [bootstrap](guide/appmodule#main) to launch the application.
|
||||
that you [bootstrap](guide/bootstrapping#main) to launch the application.
|
||||
You can call it anything you want. The conventional name is `AppModule`.
|
||||
|
||||
The [setup](guide/setup) instructions produce a new project with the following minimal `AppModule`.
|
||||
|
|
@ -10,7 +10,6 @@ You'll evolve this module as your application grows.
|
|||
|
||||
|
||||
<code-example path="setup/src/app/app.module.ts" title="src/app/app.module.ts" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
|
||||
|
|
@ -111,7 +110,7 @@ Do not put any other kind of class in `declarations`; _not_ `NgModule` classes,
|
|||
|
||||
### The _bootstrap_ array
|
||||
|
||||
You launch the application by [_bootstrapping_](guide/appmodule#main) the root `AppModule`.
|
||||
You launch the application by [_bootstrapping_](guide/bootstrapping#main) the root `AppModule`.
|
||||
Among other things, the _bootstrapping_ process creates the component(s) listed in the `bootstrap` array
|
||||
and inserts each one into the browser DOM.
|
||||
|
||||
|
|
@ -1,617 +0,0 @@
|
|||
# CLI QuickStart
|
||||
|
||||
Good tools make application development quicker and easier to maintain than
|
||||
if you did everything by hand.
|
||||
|
||||
The [**Angular CLI**](https://cli.angular.io/) is a **_command line interface_** tool
|
||||
that can create a project, add files, and perform a variety of ongoing development tasks such
|
||||
as testing, bundling, and deployment.
|
||||
|
||||
The goal in this guide is to build and run a simple Angular
|
||||
application in TypeScript, using the Angular CLI
|
||||
while adhering to the [Style Guide](guide/styleguide) recommendations that
|
||||
benefit _every_ Angular project.
|
||||
|
||||
By the end of the chapter, you'll have a basic understanding of development with the CLI
|
||||
and a foundation for both these documentation samples and for real world applications.
|
||||
|
||||
<!--
|
||||
|
||||
You'll pursue these ends in the following high-level steps:
|
||||
|
||||
1. [Set up](guide/cli-quickstart#devenv) the development environment.
|
||||
2. [Create](guide/cli-quickstart#create-proj) a new project and skeleton application.
|
||||
3. [Serve](guide/cli-quickstart#serve) the application.
|
||||
4. [Edit](guide/cli-quickstart#first-component) the application.
|
||||
|
||||
-->
|
||||
|
||||
And you can also <a href="generated/zips/cli-quickstart/cli-quickstart.zip" target="_blank">download the example.</a>
|
||||
|
||||
|
||||
|
||||
<h2 id='devenv'>
|
||||
Step 1. Set up the Development Environment
|
||||
</h2>
|
||||
|
||||
|
||||
|
||||
You need to set up your development environment before you can do anything.
|
||||
|
||||
Install **[Node.js® and npm](https://nodejs.org/en/download/)**
|
||||
if they are not already on your machine.
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
||||
|
||||
|
||||
**Verify that you are running at least node `6.9.x` and npm `3.x.x`**
|
||||
by running `node -v` and `npm -v` in a terminal/console window.
|
||||
Older versions produce errors, but newer versions are fine.
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globally.
|
||||
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
npm install -g @angular/cli
|
||||
|
||||
</code-example>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2 id='create-proj'>
|
||||
Step 2. Create a new project
|
||||
</h2>
|
||||
|
||||
|
||||
|
||||
Open a terminal window.
|
||||
|
||||
|
||||
Generate a new project and skeleton application by running the following commands:
|
||||
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
ng new my-app
|
||||
|
||||
</code-example>
|
||||
|
||||
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
||||
|
||||
|
||||
Patience please.
|
||||
It takes time to set up a new project, most of it spent installing npm packages.
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2 id='serve'>
|
||||
Step 3: Serve the application
|
||||
</h2>
|
||||
|
||||
|
||||
|
||||
Go to the project directory and launch the server.
|
||||
|
||||
|
||||
<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.
|
||||
|
||||
Using the `--open` (or just `-o`) option will automatically open your browser
|
||||
on `http://localhost:4200/`.
|
||||
|
||||
Your app greets you with a message:
|
||||
|
||||
|
||||
<figure>
|
||||
<img src='generated/images/guide/cli-quickstart/app-works.png' alt="The app works!">
|
||||
</figure>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2 id='first-component'>
|
||||
Step 4: Edit your first Angular component
|
||||
</h2>
|
||||
|
||||
|
||||
|
||||
The CLI created the first Angular component for you.
|
||||
This is the _root component_ and it is named `app-root`.
|
||||
You can find it in `./src/app/app.component.ts`.
|
||||
|
||||
|
||||
Open the component file and change the `title` property from _app works!_ to _My First Angular App_:
|
||||
|
||||
|
||||
<code-example path="cli-quickstart/src/app/app.component.ts" region="title" title="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.
|
||||
|
||||
Open `src/app/app.component.css` and give the component some style.
|
||||
|
||||
|
||||
<code-example path="cli-quickstart/src/app/app.component.css" title="src/app/app.component.css" linenums="false"></code-example>
|
||||
|
||||
|
||||
|
||||
<figure>
|
||||
<img src='generated/images/guide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app">
|
||||
</figure>
|
||||
|
||||
|
||||
|
||||
Looking good!
|
||||
|
||||
|
||||
|
||||
## What's next?
|
||||
That's about all you'd expect to do in a "Hello, World" app.
|
||||
|
||||
You're ready to take the [Tour of Heroes Tutorial](tutorial) and build
|
||||
a small application that demonstrates the great things you can build with Angular.
|
||||
|
||||
Or you can stick around a bit longer to learn about the files in your brand new project.
|
||||
|
||||
|
||||
|
||||
## Project file review
|
||||
|
||||
An Angular CLI project is the foundation for both quick experiments and enterprise solutions.
|
||||
|
||||
The first file you should check out is `README.md`.
|
||||
It has some basic information on how to use CLI commands.
|
||||
Whenever you want to know more about how Angular CLI works make sure to visit
|
||||
[the Angular CLI repository](https://github.com/angular/angular-cli) and
|
||||
[Wiki](https://github.com/angular/angular-cli/wiki).
|
||||
|
||||
Some of the generated files might be unfamiliar to you.
|
||||
|
||||
|
||||
|
||||
### The `src` folder
|
||||
Your app lives in the `src` folder.
|
||||
All Angular components, templates, styles, images, and anything else your app needs go here.
|
||||
Any files outside of this folder are meant to support building your app.
|
||||
|
||||
|
||||
<div class='filetree'>
|
||||
<div class='file'>src</div>
|
||||
<div class='children'>
|
||||
<div class='file'>app</div>
|
||||
<div class='children'>
|
||||
<div class='file'>app.component.css</div>
|
||||
<div class='file'>app.component.html</div>
|
||||
<div class="file">app.component.spec.ts</div>
|
||||
<div class="file">app.component.ts</div>
|
||||
<div class="file">app.module.ts</div>
|
||||
</div>
|
||||
<div class="file">assets</div>
|
||||
<div class='children'>
|
||||
<div class="file">.gitkeep</div>
|
||||
</div>
|
||||
<div class="file">environments</div>
|
||||
<div class='children'>
|
||||
<div class="file">environment.prod.ts</div>
|
||||
<div class="file">environment.ts</div>
|
||||
</div>
|
||||
<div class="file">favicon.ico</div>
|
||||
<div class="file">index.html</div>
|
||||
<div class="file">main.ts</div>
|
||||
<div class="file">polyfills.ts</div>
|
||||
<div class="file">styles.css</div>
|
||||
<div class="file">test.ts</div>
|
||||
<div class="file">tsconfig.app.json</div>
|
||||
<div class="file">tsconfig.spec.json</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
td, th {vertical-align: top}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<table width="100%">
|
||||
<col width="20%">
|
||||
</col>
|
||||
<col width="80%">
|
||||
</col>
|
||||
<tr>
|
||||
<th>
|
||||
File
|
||||
</th>
|
||||
<th>
|
||||
Purpose
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`app/app.component.{ts,html,css,spec.ts}`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Defines the `AppComponent` along with an HTML template, CSS stylesheet, and a unit test.
|
||||
It is the **root** component of what will become a tree of nested components
|
||||
as the application evolves.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`app/app.module.ts`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Defines `AppModule`, the [root module](guide/appmodule "AppModule: the root module") that tells Angular how to assemble the application.
|
||||
Right now it declares only the `AppComponent`.
|
||||
Soon there will be more components to declare.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`assets/*`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
A folder where you can put images and anything else to be copied wholesale
|
||||
when you build your application.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`environments/*`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
This folder contains one file for each of your destination environments,
|
||||
each exporting simple configuration variables to use in your application.
|
||||
The files are replaced on-the-fly when you build your app.
|
||||
You might use a different API endpoint for development than you do for production
|
||||
or maybe different analytics tokens.
|
||||
You might even use some mock services.
|
||||
Either way, the CLI has you covered.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`favicon.ico`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Every site wants to look good on the bookmark bar.
|
||||
Get started with your very own Angular icon.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`index.html`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
The main HTML page that is served when someone visits your site.
|
||||
Most of the time you'll never need to edit it.
|
||||
The CLI automatically adds all `js` and `css` files when building your app so you
|
||||
never need to add any `<script>` or `<link>` tags here manually.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`main.ts`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
The main entry point for your app.
|
||||
Compiles the application with the [JIT compiler](guide/glossary#jit)
|
||||
and bootstraps the application's root module (`AppModule`) to run in the browser.
|
||||
You can also use the [AOT compiler](guide/glossary#ahead-of-time-aot-compilation)
|
||||
without changing any code by passing in `--aot` to `ng build` or `ng serve`.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`polyfills.ts`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Different browsers have different levels of support of the web standards.
|
||||
Polyfills help normalize those differences.
|
||||
You should be pretty safe with `core-js` and `zone.js`, but be sure to check out
|
||||
the [Browser Support guide](guide/browser-support) for more information.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`styles.css`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Your global styles go here.
|
||||
Most of the time you'll want to have local styles in your components for easier maintenance,
|
||||
but styles that affect all of your app need to be in a central place.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`test.ts`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
This is the main entry point for your unit tests.
|
||||
It has some custom configuration that might be unfamiliar, but it's not something you'll
|
||||
need to edit.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`tsconfig.{app|spec}.json`
|
||||
</td>
|
||||
<td>
|
||||
|
||||
TypeScript compiler configuration for the Angular app (`tsconfig.app.json`)
|
||||
and for the unit tests (`tsconfig.spec.json`).
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### The root folder
|
||||
|
||||
The `src/` folder is just one of the items inside the project's root folder.
|
||||
Other files help you build, test, maintain, document, and deploy the app.
|
||||
These files go in the root folder next to `src/`.
|
||||
|
||||
|
||||
<div class='filetree'>
|
||||
<div class="file">my-app</div>
|
||||
<div class='children'>
|
||||
<div class="file">e2e</div>
|
||||
<div class='children'>
|
||||
<div class="file">app.e2e-spec.ts</div>
|
||||
<div class="file">app.po.ts</div>
|
||||
<div class="file">tsconfig.e2e.json</div>
|
||||
</div>
|
||||
<div class="file">node_modules/...</div>
|
||||
<div class="file">src/...</div>
|
||||
<div class="file">.angular-cli.json</div>
|
||||
<div class="file">.editorconfig</div>
|
||||
<div class="file">.gitignore</div>
|
||||
<div class="file">karma.conf.js</div>
|
||||
<div class="file">package.json</div>
|
||||
<div class="file">protractor.conf.js</div>
|
||||
<div class="file">README.md</div>
|
||||
<div class="file">tsconfig.json</div>
|
||||
<div class="file">tslint.json</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
td, th {vertical-align: top}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<table width="100%">
|
||||
<col width="20%">
|
||||
</col>
|
||||
<col width="80%">
|
||||
</col>
|
||||
<tr>
|
||||
<th>
|
||||
File
|
||||
</th>
|
||||
<th>
|
||||
Purpose
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`e2e/`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Inside `e2e/` live the End-to-End tests.
|
||||
They shouldn't be inside `src/` because e2e tests are really a separate app that
|
||||
just so happens to test your main app.
|
||||
That's also why they have their own `tsconfig.e2e.json`.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`node_modules/`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
`Node.js` creates this folder and puts all third party modules listed in
|
||||
`package.json` inside of it.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`.angular-cli.json`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Configuration for Angular CLI.
|
||||
In this file you can set several defaults and also configure what files are included
|
||||
when your project is build.
|
||||
Check out the official documentation if you want to know more.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`.editorconfig`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Simple configuration for your editor to make sure everyone that uses your project
|
||||
has the same basic configuration.
|
||||
Most editors support an `.editorconfig` file.
|
||||
See http://editorconfig.org for more information.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`.gitignore`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Git configuration to make sure autogenerated files are not commited to source control.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`karma.conf.js`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Unit test configuration for the [Karma test runner](https://karma-runner.github.io),
|
||||
used when running `ng test`.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`package.json`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
`npm` configuration listing the third party packages your project uses.
|
||||
You can also add your own [custom scripts](https://docs.npmjs.com/misc/scripts) here.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`protractor.conf.js`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
End-to-end test configuration for [Protractor](http://www.protractortest.org/),
|
||||
used when running `ng e2e`.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`README.md`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Basic documentation for your project, pre-filled with CLI command information.
|
||||
Make sure to enhance it with project documentation so that anyone
|
||||
checking out the repo can build your app!
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`tsconfig.json`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`tslint.json`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Linting configuration for [TSLint](https://palantir.github.io/tslint/) together with
|
||||
[Codelyzer](http://codelyzer.com/), used when running `ng lint`.
|
||||
Linting helps keep your code style consistent.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
||||
### Next Step
|
||||
|
||||
If you're new to Angular, continue with the
|
||||
[tutorial](tutorial "Tour of Heroes tutorial").
|
||||
You can skip the "Setup" step since you're already using the Angular CLI setup.
|
||||
|
||||
</div>
|
||||
|
|
@ -12,7 +12,7 @@ making some of them public so external components can use them.
|
|||
And there are many more options covered here.
|
||||
|
||||
Before reading this page, read the
|
||||
[The Root Module](guide/appmodule) page, which introduces NgModules and the essentials
|
||||
[The Root Module](guide/bootstrapping) page, which introduces NgModules and the essentials
|
||||
of creating and maintaining a single root `AppModule` for the entire application.
|
||||
|
||||
This page covers NgModules in greater depth.
|
||||
|
|
|
|||
|
|
@ -1,79 +1,617 @@
|
|||
<h1 class="no-toc">QuickStart</h1>
|
||||
# QuickStart
|
||||
|
||||
Angular applications are made up of _components_.
|
||||
A _component_ is the combination of an HTML template and a component class that controls a portion of the screen. Here is an example of a component that displays a simple string:
|
||||
Good tools make application development quicker and easier to maintain than
|
||||
if you did everything by hand.
|
||||
|
||||
The [**Angular CLI**](https://cli.angular.io/) is a **_command line interface_** tool
|
||||
that can create a project, add files, and perform a variety of ongoing development tasks such
|
||||
as testing, bundling, and deployment.
|
||||
|
||||
The goal in this guide is to build and run a simple Angular
|
||||
application in TypeScript, using the Angular CLI
|
||||
while adhering to the [Style Guide](guide/styleguide) recommendations that
|
||||
benefit _every_ Angular project.
|
||||
|
||||
By the end of the chapter, you'll have a basic understanding of development with the CLI
|
||||
and a foundation for both these documentation samples and for real world applications.
|
||||
|
||||
<!--
|
||||
|
||||
You'll pursue these ends in the following high-level steps:
|
||||
|
||||
1. [Set up](guide/cli-quickstart#devenv) the development environment.
|
||||
2. [Create](guide/cli-quickstart#create-proj) a new project and skeleton application.
|
||||
3. [Serve](guide/cli-quickstart#serve) the application.
|
||||
4. [Edit](guide/cli-quickstart#first-component) the application.
|
||||
|
||||
-->
|
||||
|
||||
And you can also <a href="generated/zips/cli-quickstart/cli-quickstart.zip" target="_blank">download the example.</a>
|
||||
|
||||
|
||||
<code-example path="quickstart/src/app/app.component.ts" title="src/app/app.component.ts" linenums="false">
|
||||
|
||||
<h2 id='devenv'>
|
||||
Step 1. Set up the Development Environment
|
||||
</h2>
|
||||
|
||||
|
||||
|
||||
You need to set up your development environment before you can do anything.
|
||||
|
||||
Install **[Node.js® and npm](https://nodejs.org/en/download/)**
|
||||
if they are not already on your machine.
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
||||
|
||||
|
||||
**Verify that you are running at least node `6.9.x` and npm `3.x.x`**
|
||||
by running `node -v` and `npm -v` in a terminal/console window.
|
||||
Older versions produce errors, but newer versions are fine.
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globally.
|
||||
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
npm install -g @angular/cli
|
||||
|
||||
</code-example>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2 id='create-proj'>
|
||||
Step 2. Create a new project
|
||||
</h2>
|
||||
|
||||
|
||||
|
||||
Open a terminal window.
|
||||
|
||||
|
||||
Generate a new project and skeleton application by running the following commands:
|
||||
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
ng new my-app
|
||||
|
||||
</code-example>
|
||||
|
||||
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
||||
|
||||
|
||||
Try this **<live-example noDownload>QuickStart example on Plunker</live-example>** without installing anything.
|
||||
Try it locally with the [***QuickStart seed***](guide/setup "Setup for local development with the QuickStart seed")
|
||||
and prepare for development of a real Angular application.
|
||||
Patience please.
|
||||
It takes time to set up a new project, most of it spent installing npm packages.
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
Every component begins with an `@Component` [decorator](guide/glossary#decorator '"decorator" explained')
|
||||
function that takes a _metadata_ object. The metadata object describes how the HTML template and component class work together.
|
||||
|
||||
The `selector` property tells Angular to display the component inside a custom `<my-app>` tag in the `index.html`.
|
||||
<h2 id='serve'>
|
||||
Step 3: Serve the application
|
||||
</h2>
|
||||
|
||||
<code-example path="quickstart/src/index.html" region="my-app" title="index.html (inside <body>)" linenums="false">
|
||||
|
||||
|
||||
Go to the project directory and launch the server.
|
||||
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
cd my-app
|
||||
ng serve --open
|
||||
|
||||
</code-example>
|
||||
|
||||
|
||||
|
||||
The `template` property defines a message inside an `<h1>` header.
|
||||
The message starts with "Hello" and ends with `{{name}}`,
|
||||
which is an Angular [interpolation binding](guide/displaying-data) expression.
|
||||
At runtime, Angular replaces `{{name}}` with the value of the component's `name` property.
|
||||
Interpolation binding is one of many Angular features you'll discover in this documentation.
|
||||
The `ng serve` command launches the server, watches your files,
|
||||
and rebuilds the app as you make changes to those files.
|
||||
|
||||
Using the `--open` (or just `-o`) option will automatically open your browser
|
||||
on `http://localhost:4200/`.
|
||||
|
||||
Your app greets you with a message:
|
||||
|
||||
|
||||
In the example, change the component class's `name` property from `'Angular'` to `'World'` and see what happens.
|
||||
|
||||
|
||||
<div class="callout is-helpful">
|
||||
<figure>
|
||||
<img src='generated/images/guide/cli-quickstart/app-works.png' alt="The app works!">
|
||||
</figure>
|
||||
|
||||
|
||||
|
||||
<header>
|
||||
A word about TypeScript
|
||||
</header>
|
||||
|
||||
<h2 id='first-component'>
|
||||
Step 4: Edit your first Angular component
|
||||
</h2>
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
This example is written in <a href="http://www.typescriptlang.org/" title="TypeScript">TypeScript</a>, a superset of JavaScript. Angular
|
||||
uses TypeScript because its types make it easy to support developer productivity with tooling. You can also write Angular code in JavaScript; [this guide](guide/ts-to-js] explains how.
|
||||
The CLI created the first Angular component for you.
|
||||
This is the _root component_ and it is named `app-root`.
|
||||
You can find it in `./src/app/app.component.ts`.
|
||||
|
||||
</p>
|
||||
|
||||
Open the component file and change the `title` property from _app works!_ to _My First Angular App_:
|
||||
|
||||
|
||||
<code-example path="cli-quickstart/src/app/app.component.ts" region="title" title="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.
|
||||
|
||||
Open `src/app/app.component.css` and give the component some style.
|
||||
|
||||
|
||||
<code-example path="cli-quickstart/src/app/app.component.css" title="src/app/app.component.css" linenums="false"></code-example>
|
||||
|
||||
|
||||
|
||||
<figure>
|
||||
<img src='generated/images/guide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app">
|
||||
</figure>
|
||||
|
||||
|
||||
|
||||
Looking good!
|
||||
|
||||
|
||||
|
||||
## What's next?
|
||||
That's about all you'd expect to do in a "Hello, World" app.
|
||||
|
||||
You're ready to take the [Tour of Heroes Tutorial](tutorial) and build
|
||||
a small application that demonstrates the great things you can build with Angular.
|
||||
|
||||
Or you can stick around a bit longer to learn about the files in your brand new project.
|
||||
|
||||
|
||||
|
||||
## Project file review
|
||||
|
||||
An Angular CLI project is the foundation for both quick experiments and enterprise solutions.
|
||||
|
||||
The first file you should check out is `README.md`.
|
||||
It has some basic information on how to use CLI commands.
|
||||
Whenever you want to know more about how Angular CLI works make sure to visit
|
||||
[the Angular CLI repository](https://github.com/angular/angular-cli) and
|
||||
[Wiki](https://github.com/angular/angular-cli/wiki).
|
||||
|
||||
Some of the generated files might be unfamiliar to you.
|
||||
|
||||
|
||||
|
||||
### The `src` folder
|
||||
Your app lives in the `src` folder.
|
||||
All Angular components, templates, styles, images, and anything else your app needs go here.
|
||||
Any files outside of this folder are meant to support building your app.
|
||||
|
||||
|
||||
<div class='filetree'>
|
||||
<div class='file'>src</div>
|
||||
<div class='children'>
|
||||
<div class='file'>app</div>
|
||||
<div class='children'>
|
||||
<div class='file'>app.component.css</div>
|
||||
<div class='file'>app.component.html</div>
|
||||
<div class="file">app.component.spec.ts</div>
|
||||
<div class="file">app.component.ts</div>
|
||||
<div class="file">app.module.ts</div>
|
||||
</div>
|
||||
<div class="file">assets</div>
|
||||
<div class='children'>
|
||||
<div class="file">.gitkeep</div>
|
||||
</div>
|
||||
<div class="file">environments</div>
|
||||
<div class='children'>
|
||||
<div class="file">environment.prod.ts</div>
|
||||
<div class="file">environment.ts</div>
|
||||
</div>
|
||||
<div class="file">favicon.ico</div>
|
||||
<div class="file">index.html</div>
|
||||
<div class="file">main.ts</div>
|
||||
<div class="file">polyfills.ts</div>
|
||||
<div class="file">styles.css</div>
|
||||
<div class="file">test.ts</div>
|
||||
<div class="file">tsconfig.app.json</div>
|
||||
<div class="file">tsconfig.spec.json</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
td, th {vertical-align: top}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<table width="100%">
|
||||
<col width="20%">
|
||||
</col>
|
||||
<col width="80%">
|
||||
</col>
|
||||
<tr>
|
||||
<th>
|
||||
File
|
||||
</th>
|
||||
<th>
|
||||
Purpose
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`app/app.component.{ts,html,css,spec.ts}`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Defines the `AppComponent` along with an HTML template, CSS stylesheet, and a unit test.
|
||||
It is the **root** component of what will become a tree of nested components
|
||||
as the application evolves.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`app/app.module.ts`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Defines `AppModule`, the [root module](guide/bootstrapping "AppModule: the root module") that tells Angular how to assemble the application.
|
||||
Right now it declares only the `AppComponent`.
|
||||
Soon there will be more components to declare.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`assets/*`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
A folder where you can put images and anything else to be copied wholesale
|
||||
when you build your application.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`environments/*`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
This folder contains one file for each of your destination environments,
|
||||
each exporting simple configuration variables to use in your application.
|
||||
The files are replaced on-the-fly when you build your app.
|
||||
You might use a different API endpoint for development than you do for production
|
||||
or maybe different analytics tokens.
|
||||
You might even use some mock services.
|
||||
Either way, the CLI has you covered.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`favicon.ico`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Every site wants to look good on the bookmark bar.
|
||||
Get started with your very own Angular icon.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`index.html`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
The main HTML page that is served when someone visits your site.
|
||||
Most of the time you'll never need to edit it.
|
||||
The CLI automatically adds all `js` and `css` files when building your app so you
|
||||
never need to add any `<script>` or `<link>` tags here manually.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`main.ts`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
The main entry point for your app.
|
||||
Compiles the application with the [JIT compiler](guide/glossary#jit)
|
||||
and bootstraps the application's root module (`AppModule`) to run in the browser.
|
||||
You can also use the [AOT compiler](guide/glossary#ahead-of-time-aot-compilation)
|
||||
without changing any code by passing in `--aot` to `ng build` or `ng serve`.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`polyfills.ts`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Different browsers have different levels of support of the web standards.
|
||||
Polyfills help normalize those differences.
|
||||
You should be pretty safe with `core-js` and `zone.js`, but be sure to check out
|
||||
the [Browser Support guide](guide/browser-support) for more information.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`styles.css`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Your global styles go here.
|
||||
Most of the time you'll want to have local styles in your components for easier maintenance,
|
||||
but styles that affect all of your app need to be in a central place.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`test.ts`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
This is the main entry point for your unit tests.
|
||||
It has some custom configuration that might be unfamiliar, but it's not something you'll
|
||||
need to edit.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`tsconfig.{app|spec}.json`
|
||||
</td>
|
||||
<td>
|
||||
|
||||
TypeScript compiler configuration for the Angular app (`tsconfig.app.json`)
|
||||
and for the unit tests (`tsconfig.spec.json`).
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### The root folder
|
||||
|
||||
The `src/` folder is just one of the items inside the project's root folder.
|
||||
Other files help you build, test, maintain, document, and deploy the app.
|
||||
These files go in the root folder next to `src/`.
|
||||
|
||||
|
||||
<div class='filetree'>
|
||||
<div class="file">my-app</div>
|
||||
<div class='children'>
|
||||
<div class="file">e2e</div>
|
||||
<div class='children'>
|
||||
<div class="file">app.e2e-spec.ts</div>
|
||||
<div class="file">app.po.ts</div>
|
||||
<div class="file">tsconfig.e2e.json</div>
|
||||
</div>
|
||||
<div class="file">node_modules/...</div>
|
||||
<div class="file">src/...</div>
|
||||
<div class="file">.angular-cli.json</div>
|
||||
<div class="file">.editorconfig</div>
|
||||
<div class="file">.gitignore</div>
|
||||
<div class="file">karma.conf.js</div>
|
||||
<div class="file">package.json</div>
|
||||
<div class="file">protractor.conf.js</div>
|
||||
<div class="file">README.md</div>
|
||||
<div class="file">tsconfig.json</div>
|
||||
<div class="file">tslint.json</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
td, th {vertical-align: top}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<table width="100%">
|
||||
<col width="20%">
|
||||
</col>
|
||||
<col width="80%">
|
||||
</col>
|
||||
<tr>
|
||||
<th>
|
||||
File
|
||||
</th>
|
||||
<th>
|
||||
Purpose
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`e2e/`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Inside `e2e/` live the End-to-End tests.
|
||||
They shouldn't be inside `src/` because e2e tests are really a separate app that
|
||||
just so happens to test your main app.
|
||||
That's also why they have their own `tsconfig.e2e.json`.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`node_modules/`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
`Node.js` creates this folder and puts all third party modules listed in
|
||||
`package.json` inside of it.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`.angular-cli.json`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Configuration for Angular CLI.
|
||||
In this file you can set several defaults and also configure what files are included
|
||||
when your project is build.
|
||||
Check out the official documentation if you want to know more.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`.editorconfig`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Simple configuration for your editor to make sure everyone that uses your project
|
||||
has the same basic configuration.
|
||||
Most editors support an `.editorconfig` file.
|
||||
See http://editorconfig.org for more information.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`.gitignore`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Git configuration to make sure autogenerated files are not commited to source control.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`karma.conf.js`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Unit test configuration for the [Karma test runner](https://karma-runner.github.io),
|
||||
used when running `ng test`.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`package.json`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
`npm` configuration listing the third party packages your project uses.
|
||||
You can also add your own [custom scripts](https://docs.npmjs.com/misc/scripts) here.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`protractor.conf.js`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
End-to-end test configuration for [Protractor](http://www.protractortest.org/),
|
||||
used when running `ng e2e`.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`README.md`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Basic documentation for your project, pre-filled with CLI command information.
|
||||
Make sure to enhance it with project documentation so that anyone
|
||||
checking out the repo can build your app!
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`tsconfig.json`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`tslint.json`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Linting configuration for [TSLint](https://palantir.github.io/tslint/) together with
|
||||
[Codelyzer](http://codelyzer.com/), used when running `ng lint`.
|
||||
Linting helps keep your code style consistent.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
||||
### Next Step
|
||||
|
||||
|
||||
### Next step
|
||||
|
||||
Start the [**tutorial**](tutorial "Tour of Heroes tutorial").
|
||||
If you're new to Angular, continue with the
|
||||
[tutorial](tutorial "Tour of Heroes tutorial").
|
||||
You can skip the "Setup" step since you're already using the Angular CLI setup.
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -253,7 +253,7 @@ The following are all in `src/`
|
|||
<td>
|
||||
|
||||
|
||||
Defines `AppModule`, the [root module](guide/appmodule "AppModule: the root module") that tells Angular how to assemble the application.
|
||||
Defines `AppModule`, the [root module](guide/bootstrapping "AppModule: the root module") that tells Angular how to assemble the application.
|
||||
Right now it declares only the `AppComponent`.
|
||||
Soon there will be more components to declare.
|
||||
</td>
|
||||
|
|
@ -270,7 +270,7 @@ The following are all in `src/`
|
|||
|
||||
|
||||
Compiles the application with the [JIT compiler](guide/glossary#jit) and
|
||||
[bootstraps](guide/appmodule#main "bootstrap the application")
|
||||
[bootstraps](guide/bootstrapping#main "bootstrap the application")
|
||||
the application's main module (`AppModule`) to run in the browser.
|
||||
The JIT compiler is a reasonable choice during the development of most projects and
|
||||
it's the only viable choice for a sample running in a _live-coding_ environment like Plunker.
|
||||
|
|
|
|||
|
|
@ -16,8 +16,6 @@ Angular is a platform that makes it easy to build applications with the web. Ang
|
|||
<p class="card-footer" >
|
||||
<a href="guide/quickstart" title="Angular Quickstart">Quickstart</a>
|
||||
</p>
|
||||
<!--<p class="card-footer"><a href="guide/quickstart">Quickstart</a></p>
|
||||
<p class="card-footer"><a href="guide/tutorial">Tutorial</a></p>-->
|
||||
</div>
|
||||
|
||||
<a href="guide/architecture" class="docs-card" title="Angular Architecture">
|
||||
|
|
|
|||
|
|
@ -54,23 +54,12 @@
|
|||
"hidden": true
|
||||
},
|
||||
|
||||
{
|
||||
"title": "Getting Started",
|
||||
"tooltip": "A gentle introduction to Angular.",
|
||||
"children": [
|
||||
{
|
||||
"url": "guide/quickstart",
|
||||
"title": "Basic Quickstart",
|
||||
"tooltip": "A quick look at an Angular app without tooling."
|
||||
"title": "Getting Started",
|
||||
"tooltip": "A gentle introduction to Angular."
|
||||
},
|
||||
|
||||
{
|
||||
"url": "guide/cli-quickstart",
|
||||
"title": "CLI Quickstart",
|
||||
"tooltip": "A quick look at an Angular app built with the Angular CLI."
|
||||
}
|
||||
]},
|
||||
|
||||
{
|
||||
"title": "Tutorial",
|
||||
"tooltip": "The Tour of Heroes tutorial takes you through the steps of creating an Angular application in TypeScript.",
|
||||
|
|
@ -117,43 +106,14 @@
|
|||
"title": "Fundamentals",
|
||||
"tooltip": "The fundamentals of Angular",
|
||||
"children": [
|
||||
|
||||
{
|
||||
"url": "guide/animations",
|
||||
"title": "Animations",
|
||||
"tooltip": "A guide to Angular's animation system."
|
||||
},
|
||||
|
||||
{
|
||||
"title": "Angular Modules",
|
||||
"tooltip": "Learn how directives modify the layout and behavior of elements.",
|
||||
"children": [
|
||||
{
|
||||
"url": "guide/appmodule",
|
||||
"title": "The Root AppModule",
|
||||
"tooltip": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\"."
|
||||
},
|
||||
{
|
||||
"url": "guide/ngmodule",
|
||||
"title": "NgModule",
|
||||
"tooltip": "Define application modules with @NgModule."
|
||||
},
|
||||
{
|
||||
"url": "guide/ngmodule-faq",
|
||||
"title": "Angular Module FAQs",
|
||||
"tooltip": "Answers to frequently asked questions about @NgModule."
|
||||
}
|
||||
]},
|
||||
|
||||
{
|
||||
"url": "guide/architecture",
|
||||
"title": "Architecture",
|
||||
"tooltip": "The basic building blocks of Angular applications."
|
||||
},
|
||||
|
||||
{
|
||||
"title": "Components",
|
||||
"tooltip": "Components present information to users and collect their input.",
|
||||
"title": "Template & Data Binding",
|
||||
"tooltip": "Template & Data Binding",
|
||||
"children": [
|
||||
{
|
||||
"url": "guide/displaying-data",
|
||||
|
|
@ -175,23 +135,86 @@
|
|||
"title": "Component Interaction",
|
||||
"tooltip": "Share information between different directives and components."
|
||||
},
|
||||
{
|
||||
"url": "guide/component-styles",
|
||||
"title": "Component Styles",
|
||||
"tooltip": "Learn how to apply CSS styles to components."
|
||||
},
|
||||
{
|
||||
"url": "guide/dynamic-component-loader",
|
||||
"title": "Dynamic Components",
|
||||
"tooltip": "Load components dynamically."
|
||||
},
|
||||
{
|
||||
"url": "guide/attribute-directives",
|
||||
"title": "Attribute Directives",
|
||||
"tooltip": "Attribute directives attach behavior to elements."
|
||||
},
|
||||
{
|
||||
"url": "guide/structural-directives",
|
||||
"title": "Structural Directives",
|
||||
"tooltip": "Structural directives manipulate the layout of the page."
|
||||
},
|
||||
{
|
||||
"url": "guide/pipes",
|
||||
"title": "Pipes",
|
||||
"tooltip": "Pipes transform displayed values within a template."
|
||||
},
|
||||
{
|
||||
"url": "guide/animations",
|
||||
"title": "Animations",
|
||||
"tooltip": "A guide to Angular's animation system."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Forms",
|
||||
"tooltip": "Angular Forms",
|
||||
"children": [
|
||||
{
|
||||
"url": "guide/user-input",
|
||||
"title": "User Input",
|
||||
"tooltip": "User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models."
|
||||
},
|
||||
{
|
||||
"url": "guide/forms",
|
||||
"title": "Template-driven Forms",
|
||||
"tooltip": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors."
|
||||
},
|
||||
{
|
||||
"url": "guide/form-validation",
|
||||
"title": "Form Validation",
|
||||
"tooltip": "Validate user's form entries."
|
||||
},
|
||||
{
|
||||
"url": "guide/reactive-forms",
|
||||
"title": "Reactive Forms",
|
||||
"tooltip": "Create a reactive form using FormBuilder, groups, and arrays."
|
||||
},
|
||||
{
|
||||
"url": "guide/dynamic-form",
|
||||
"title": "Dynamic forms",
|
||||
"tooltip": "Render dynamic forms with FormGroup."
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"url": "guide/bootstrapping",
|
||||
"title": "Bootstrapping",
|
||||
"tooltip": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\"."
|
||||
},
|
||||
|
||||
{
|
||||
"title": "NgModules",
|
||||
"tooltip": "Learn how to use NgModules to make your apps efficient.",
|
||||
"children": [
|
||||
{
|
||||
"url": "guide/ngmodule",
|
||||
"title": "NgModules",
|
||||
"tooltip": "Define application modules with @NgModule."
|
||||
},
|
||||
{
|
||||
"url": "guide/ngmodule-faq",
|
||||
"title": "NgModule FAQs",
|
||||
"tooltip": "Answers to frequently asked questions about @NgModule."
|
||||
}
|
||||
]},
|
||||
|
||||
{
|
||||
"title": "Dependency Injection",
|
||||
|
|
@ -215,73 +238,26 @@
|
|||
]
|
||||
},
|
||||
|
||||
{
|
||||
"title": "Directives",
|
||||
"tooltip": "Learn how directives modify the layout and behavior of elements.",
|
||||
"children": [
|
||||
{
|
||||
"url": "guide/attribute-directives",
|
||||
"title": "Attribute Directives",
|
||||
"tooltip": "Attribute directives attach behavior to elements."
|
||||
},
|
||||
{
|
||||
"url": "guide/structural-directives",
|
||||
"title": "Structural Directives",
|
||||
"tooltip": "Structural directives manipulate the layout of the page."
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"url": "guide/http",
|
||||
"title": "HTTP",
|
||||
"title": "Server Communication",
|
||||
"tooltip": "Use HTTP to talk to a remote server."
|
||||
},
|
||||
|
||||
{
|
||||
"url": "guide/i18n",
|
||||
"title": "Internationalization (i18n)",
|
||||
"tooltip": "Translate the app's template text into multiple languages."
|
||||
},
|
||||
|
||||
{
|
||||
"url": "guide/router",
|
||||
"title": "Routing & Navigation",
|
||||
"tooltip": "Discover the basics of screen navigation with the Angular Router."
|
||||
},
|
||||
|
||||
{
|
||||
"title": "User Input",
|
||||
"tooltip": "User Input",
|
||||
"children": [
|
||||
{
|
||||
"url": "guide/user-input",
|
||||
"title": "User Input",
|
||||
"tooltip": "User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models."
|
||||
},
|
||||
|
||||
{
|
||||
"url": "guide/forms",
|
||||
"title": "Template-driven Forms",
|
||||
"tooltip": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors."
|
||||
},
|
||||
|
||||
{
|
||||
"url": "guide/reactive-forms",
|
||||
"title": "Reactive Forms",
|
||||
"tooltip": "Create a reactive form using FormBuilder, groups, and arrays."
|
||||
"url": "guide/testing",
|
||||
"title": "Testing",
|
||||
"tooltip": "Techniques and practices for testing an Angular app."
|
||||
},
|
||||
{
|
||||
"url": "guide/form-validation",
|
||||
"title": "Form Validation",
|
||||
"tooltip": "Validate user's form entries."
|
||||
},
|
||||
{
|
||||
"url": "guide/dynamic-form",
|
||||
"title": "Dynamic forms",
|
||||
"tooltip": "Render dynamic forms with FormGroup."
|
||||
"url": "guide/cheatsheet",
|
||||
"title": "Cheat Sheet",
|
||||
"tooltip": "A quick guide to common Angular coding techniques."
|
||||
}
|
||||
]}
|
||||
]},
|
||||
|
||||
{
|
||||
|
|
@ -289,18 +265,21 @@
|
|||
"tooltip": "Techniques for putting Angular to work in your environment",
|
||||
"children": [
|
||||
|
||||
{
|
||||
"url": "guide/i18n",
|
||||
"title": "Internationalization (i18n)",
|
||||
"tooltip": "Translate the app's template text into multiple languages."
|
||||
},
|
||||
{
|
||||
"url": "guide/security",
|
||||
"title": "Security",
|
||||
"tooltip": "Developing for content security in Angular applications."
|
||||
},
|
||||
|
||||
{
|
||||
"url": "guide/set-document-title",
|
||||
"title": "Set the document tab title",
|
||||
"tooltip": "Set the browser tab title dynamically with the Angular Title service"
|
||||
"url": "guide/ts-to-js",
|
||||
"title": "TypeScript to JavaScript",
|
||||
"tooltip": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript."
|
||||
},
|
||||
|
||||
{
|
||||
"title": "Setup & Deployment",
|
||||
"tooltip": "Setup and Deployment",
|
||||
|
|
@ -344,31 +323,19 @@
|
|||
]
|
||||
},
|
||||
|
||||
{
|
||||
"url": "guide/testing",
|
||||
"title": "Testing",
|
||||
"tooltip": "Techniques and practices for testing an Angular app."
|
||||
},
|
||||
|
||||
{
|
||||
"url": "guide/ts-to-js",
|
||||
"title": "TypeScript to JavaScript",
|
||||
"tooltip": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript."
|
||||
},
|
||||
|
||||
{
|
||||
"title": "Upgrading",
|
||||
"tooltip": "Incrementally upgrade an AngularJS application to Angular.",
|
||||
"children": [
|
||||
{
|
||||
"url": "guide/ajs-quick-reference",
|
||||
"title": "AngularJS to Angular",
|
||||
"tooltip": "Learn how AngularJS concepts and techniques map to Angular."
|
||||
},
|
||||
{
|
||||
"url": "guide/upgrade",
|
||||
"title": "Upgrading from AngularJS",
|
||||
"tooltip": "Incrementally upgrade an AngularJS application to Angular."
|
||||
},
|
||||
{
|
||||
"url": "guide/ajs-quick-reference",
|
||||
"title": "AngularJS to Angular",
|
||||
"tooltip": "Learn how AngularJS concepts and techniques map to Angular."
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -378,11 +345,15 @@
|
|||
"title": "Visual Studio 2015 QuickStart",
|
||||
"tooltip": "Use Visual Studio 2015 with the QuickStart files."
|
||||
},
|
||||
|
||||
{
|
||||
"url": "guide/webpack",
|
||||
"title": "Webpack: An Introduction",
|
||||
"tooltip": "Create Angular applications with Webpack based tooling."
|
||||
"url": "guide/styleguide",
|
||||
"title": "Style Guide",
|
||||
"tooltip": "Write Angular with style."
|
||||
},
|
||||
{
|
||||
"url": "guide/glossary",
|
||||
"title": "Glossary",
|
||||
"tooltip": "Brief definitions of the most important words in the Angular vocabulary."
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -391,36 +362,6 @@
|
|||
"title": "API",
|
||||
"tooltip": "Details of the Angular classes and values.",
|
||||
"url": "api"
|
||||
},
|
||||
|
||||
{
|
||||
"title": "References",
|
||||
"tooltip": "References on Angular usage and style.",
|
||||
"children": [
|
||||
{
|
||||
"url": "guide/change-log",
|
||||
"title": "Change Log",
|
||||
"tooltip": "An annotated history of recent documentation improvements."
|
||||
},
|
||||
|
||||
{
|
||||
"url": "guide/cheatsheet",
|
||||
"title": "Cheat Sheet",
|
||||
"tooltip": "A quick guide to common Angular coding techniques."
|
||||
},
|
||||
|
||||
{
|
||||
"url": "guide/glossary",
|
||||
"title": "Glossary",
|
||||
"tooltip": "Brief definitions of the most important words in the Angular vocabulary."
|
||||
},
|
||||
|
||||
{
|
||||
"url": "guide/styleguide",
|
||||
"title": "Style Guide",
|
||||
"tooltip": "Write Angular with style."
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,5 @@
|
|||
@title
|
||||
Tutorial: Tour of Heroes
|
||||
|
||||
@intro
|
||||
The Tour of Heroes tutorial takes you through the steps of creating an Angular application in TypeScript.
|
||||
|
||||
@description
|
||||
|
||||
|
||||
# Tutorial: Tour of Heroes
|
||||
|
||||
The grand plan for this tutorial is to build an app that helps a staffing agency manage its stable of heroes.
|
||||
|
||||
|
|
@ -34,7 +27,7 @@ When you're done with this tutorial, the app will look like this <live-example n
|
|||
|
||||
|
||||
|
||||
## The end game
|
||||
## What you'll build
|
||||
|
||||
Here's a visual idea of where this tutorial leads, beginning with the "Dashboard"
|
||||
view and the most heroic heroes:
|
||||
|
|
|
|||
|
|
@ -135,6 +135,7 @@ button.vertical-menu-item {
|
|||
font-weight: 400;
|
||||
padding-left: 20px;
|
||||
transition: background-color 0.2s;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.level-2 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue