merge
This commit is contained in:
rexebin
parent
edda524d0d
commit
3c1d528a1c
|
|
@ -1,44 +1,44 @@
|
||||||
block includes
|
block includes
|
||||||
include ../_util-fns
|
include ../_util-fns
|
||||||
|
|
||||||
figure
|
figure
|
||||||
img(src="/resources/images/devguide/intro/people.png" width="200px" height="152px" alt="Us" align="left" style="margin-left:-40px;margin-right:10px" )
|
img(src="/resources/images/devguide/intro/people.png" width="200px" height="152px" alt="Us" align="left" style="margin-left:-40px;margin-right:10px" )
|
||||||
:marked
|
:marked
|
||||||
Everyone learns differently.
|
Everyone learns differently.
|
||||||
You don't have to read the documentation straight through. Most pages stand on their own.
|
You don't have to read the documentation straight through. Most pages stand on their own.
|
||||||
Those new to Angular may wish to follow this popular learning path.
|
Those new to Angular may wish to follow this popular learning path.
|
||||||
<br class="l-clear-left">
|
<br class="l-clear-left">
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
1. [Setup](setup.html "Setup locally withe Quickstart seed") for local Angular development, if you haven't already done so.
|
1. [Setup](setup.html "Setup locally withe Quickstart seed") for local Angular development, if you haven't already done so.
|
||||||
|
|
||||||
1. Take the [*Tour of Heroes* tutorial](../tutorial "Tour of Heroes").
|
1. Take the [*Tour of Heroes* tutorial](../tutorial "Tour of Heroes").
|
||||||
|
|
||||||
The *Tour of Heroes* takes you step-by-step from [setup](setup.html)
|
The *Tour of Heroes* takes you step-by-step from [setup](setup.html)
|
||||||
to a full-featured example that demonstrates the essential characteristics of a professional application:
|
to a full-featured example that demonstrates the essential characteristics of a professional application:
|
||||||
a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access.
|
a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access.
|
||||||
|
|
||||||
1. <a id="architecture"></a>Read the [Architecture](architecture.html) overview for the big picture.
|
1. <a id="architecture"></a>Read the [Architecture](architecture.html) overview for the big picture.
|
||||||
<li if-docs="ts"><p>
|
<li if-docs="ts"><p>
|
||||||
[The Root Module](appmodule.html) introduces the `NgModule` class that tells Angular how to compile and run your application.
|
[The Root Module](appmodule.html) introduces the `NgModule` class that tells Angular how to compile and run your application.
|
||||||
</p></li>
|
</p></li>
|
||||||
|
|
||||||
1. [Displaying Data](displaying-data.html) shows how data binding puts component property values on screen.
|
1. [Displaying Data](displaying-data.html) shows how data binding puts component property values on screen.
|
||||||
|
|
||||||
1. [User Input](user-input.html) explains how to respond to user-initiated DOM events.
|
1. [User Input](user-input.html) explains how to respond to user-initiated DOM events.
|
||||||
|
|
||||||
1. [Forms](forms.html) covers data entry and validation within the UI.
|
1. [Forms](forms.html) covers data entry and validation within the UI.
|
||||||
|
|
||||||
1. [Dependency Injection](dependency-injection.html) is the way to build large, maintainable applications
|
1. [Dependency Injection](dependency-injection.html) is the way to build large, maintainable applications
|
||||||
from small, single-purpose parts.
|
from small, single-purpose parts.
|
||||||
|
|
||||||
1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML.
|
1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML.
|
||||||
|
|
||||||
After reading the above sections, feel free to skip around among the other pages on this site.
|
After reading the above sections, feel free to skip around among the other pages on this site.
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
### Next Step
|
### Next Step
|
||||||
|
|
||||||
Try the [tutorial](../tutorial "Tour of Heroes") if you're ready to start coding or
|
Try the [tutorial](../tutorial "Tour of Heroes") if you're ready to start coding or
|
||||||
visit the [Architecture](architecture.html "Basic Concepts") guide if you prefer to learn the basic concepts first.
|
visit the [Architecture](architecture.html "Basic Concepts") guide if you prefer to learn the basic concepts first.
|
||||||
|
|
|
||||||
|
|
@ -1,180 +1,180 @@
|
||||||
block includes
|
block includes
|
||||||
include ../_util-fns
|
include ../_util-fns
|
||||||
- var _prereq = 'node and npm';
|
- var _prereq = 'node and npm';
|
||||||
- var _playground = 'playground';
|
- var _playground = 'playground';
|
||||||
- var _Install = 'Install';
|
- var _Install = 'Install';
|
||||||
//- npm commands
|
//- npm commands
|
||||||
- var _install = 'install';
|
- var _install = 'install';
|
||||||
- var _start = 'start';
|
- var _start = 'start';
|
||||||
|
|
||||||
a#develop-locally
|
a#develop-locally
|
||||||
:marked
|
:marked
|
||||||
## Setup a local development environment
|
## Setup a local development environment
|
||||||
|
|
||||||
<span if-docs="ts">
|
<span if-docs="ts">
|
||||||
The <live-example name=quickstart>QuickStart live-coding</live-example> example is an Angular _playground_.
|
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.
|
It's not where you'd develop a real application.
|
||||||
You [should develop locally](#why-locally "Why develop locally") on your own machine ... and that's also how we think you should learn Angular.
|
You [should develop locally](#why-locally "Why develop locally") on your own machine ... and that's also how we think you should learn Angular.
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
Setting up a new project on your machine is quick and easy with the **QuickStart seed**,
|
Setting up a new project on your machine is quick and easy with the **QuickStart seed**,
|
||||||
maintained [on github](!{_qsRepo} "Install the github QuickStart repo").
|
maintained [on github](!{_qsRepo} "Install the github QuickStart repo").
|
||||||
|
|
||||||
Make sure you have [!{_prereq} installed](#install-prerequisites "What if you don't have !{_prereq}?").
|
Make sure you have [!{_prereq} installed](#install-prerequisites "What if you don't have !{_prereq}?").
|
||||||
Then ...
|
Then ...
|
||||||
1. Create a project folder (you can call it `quickstart` and rename it later).
|
1. Create a project folder (you can call it `quickstart` and rename it later).
|
||||||
1. [Clone](#clone "Clone it from github") or [download](#download "download it from github") the **QuickStart seed** into your project folder.
|
1. [Clone](#clone "Clone it from github") or [download](#download "download it from github") the **QuickStart seed** into your project folder.
|
||||||
1. !{_Install} [!{_npm}](#install-prerequisites "What if you don't have !{_prereq}?") packages.
|
1. !{_Install} [!{_npm}](#install-prerequisites "What if you don't have !{_prereq}?") packages.
|
||||||
1. Run `!{_npm} !{_start}` to launch the sample application.
|
1. Run `!{_npm} !{_start}` to launch the sample application.
|
||||||
|
|
||||||
a#clone
|
a#clone
|
||||||
:marked
|
:marked
|
||||||
### Clone
|
### Clone
|
||||||
|
|
||||||
Perform the _clone-to-launch_ steps with these terminal commands.
|
Perform the _clone-to-launch_ steps with these terminal commands.
|
||||||
|
|
||||||
code-example(language="sh" class="code-shell").
|
code-example(language="sh" class="code-shell").
|
||||||
git clone !{_qsRepo}.git quickstart
|
git clone !{_qsRepo}.git quickstart
|
||||||
cd quickstart
|
cd quickstart
|
||||||
!{_npm} !{_install}
|
!{_npm} !{_install}
|
||||||
!{_npm} !{_start}
|
!{_npm} !{_start}
|
||||||
|
|
||||||
a#download
|
a#download
|
||||||
:marked
|
:marked
|
||||||
### Download
|
### Download
|
||||||
<a href="!{_qsRepoZip}" title="Download the QuickStart seed repository">Download the QuickStart seed</a>
|
<a href="!{_qsRepoZip}" title="Download the QuickStart seed repository">Download the QuickStart seed</a>
|
||||||
and unzip it into your project folder. Then perform the remaining steps with these terminal commands.
|
and unzip it into your project folder. Then perform the remaining steps with these terminal commands.
|
||||||
|
|
||||||
code-example(language="sh" class="code-shell").
|
code-example(language="sh" class="code-shell").
|
||||||
cd quickstart
|
cd quickstart
|
||||||
!{_npm} !{_install}
|
!{_npm} !{_install}
|
||||||
!{_npm} !{_start}
|
!{_npm} !{_start}
|
||||||
|
|
||||||
.l-main-section#seed
|
.l-main-section#seed
|
||||||
:marked
|
:marked
|
||||||
## What's in the QuickStart seed?
|
## What's in the QuickStart seed?
|
||||||
|
|
||||||
block qs-seed
|
block qs-seed
|
||||||
:marked
|
:marked
|
||||||
The **QuickStart seed** contains the same application as the QuickStart playground
|
The **QuickStart seed** contains the same application as the QuickStart playground
|
||||||
and even has <live-example>its own _playground_</live-example>
|
and even has <live-example>its own _playground_</live-example>
|
||||||
that accomodates development of richer examples in a live coding environment.
|
that accomodates development of richer examples in a live coding environment.
|
||||||
|
|
||||||
But it's true purpose is to provide a solid foundation for _local_ development.
|
But it's true purpose is to provide a solid foundation for _local_ development.
|
||||||
Consequently, there are _many more files_ in the project folder on your machine,
|
Consequently, there are _many more files_ in the project folder on your machine,
|
||||||
most of which you can [learn about later](setup-systemjs-anatomy.html "Setup Anatomy").
|
most of which you can [learn about later](setup-systemjs-anatomy.html "Setup Anatomy").
|
||||||
|
|
||||||
block core-files
|
block core-files
|
||||||
:marked
|
:marked
|
||||||
Focus on the following three TypeScript (`.ts`) files in the **`/app`** folder.
|
Focus on the following three TypeScript (`.ts`) files in the **`/app`** folder.
|
||||||
|
|
||||||
.filetree
|
.filetree
|
||||||
.file app
|
.file app
|
||||||
.children
|
.children
|
||||||
.file app.component.ts
|
.file app.component.ts
|
||||||
.file app.module.ts
|
.file app.module.ts
|
||||||
.file main.ts
|
.file main.ts
|
||||||
|
|
||||||
+makeTabs(`
|
+makeTabs(`
|
||||||
setup/ts/app/app.component.ts,
|
setup/ts/app/app.component.ts,
|
||||||
setup/ts/app/app.module.ts,
|
setup/ts/app/app.module.ts,
|
||||||
setup/ts/app/main.ts
|
setup/ts/app/main.ts
|
||||||
`, '', `
|
`, '', `
|
||||||
app/app.component.ts,
|
app/app.component.ts,
|
||||||
app/app.module.ts,
|
app/app.module.ts,
|
||||||
app/main.ts
|
app/main.ts
|
||||||
`)(format='.')
|
`)(format='.')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
All guides and cookbooks have _at least these core files_. Each file has a distinct purpose and evolves independently as the application grows.
|
All guides and cookbooks have _at least these core files_. Each file has a distinct purpose and evolves independently as the application grows.
|
||||||
|
|
||||||
style td, th {vertical-align: top}
|
style td, th {vertical-align: top}
|
||||||
table(width="100%")
|
table(width="100%")
|
||||||
col(width="20%")
|
col(width="20%")
|
||||||
col(width="80%")
|
col(width="80%")
|
||||||
tr
|
tr
|
||||||
th File
|
th File
|
||||||
th Purpose
|
th Purpose
|
||||||
tr
|
tr
|
||||||
td <ngio-ex>app.component.ts</ngio-ex>
|
td <ngio-ex>app.component.ts</ngio-ex>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
Defines the same `AppComponent` as the one in the QuickStart !{_playground}.
|
Defines the same `AppComponent` as the one in the QuickStart !{_playground}.
|
||||||
It is the **root** component of what will become a tree of nested components
|
It is the **root** component of what will become a tree of nested components
|
||||||
as the application evolves.
|
as the application evolves.
|
||||||
tr(if-docs="ts")
|
tr(if-docs="ts")
|
||||||
td <code>app.module.ts</code>
|
td <code>app.module.ts</code>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
Defines `AppModule`, the [root module](appmodule.html "AppModule: the root module") that tells Angular how to assemble the application.
|
Defines `AppModule`, the [root module](appmodule.html "AppModule: the root module") that tells Angular how to assemble the application.
|
||||||
Right now it declares only the `AppComponent`.
|
Right now it declares only the `AppComponent`.
|
||||||
Soon there will be more components to declare.
|
Soon there will be more components to declare.
|
||||||
tr
|
tr
|
||||||
td <ngio-ex>main.ts</ngio-ex>
|
td <ngio-ex>main.ts</ngio-ex>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
Compiles the application with the [JiT compiler](../glossary.html#jit)
|
Compiles the application with the [JiT compiler](../glossary.html#jit)
|
||||||
and [bootstraps](appmodule.html#main "bootstrap the application") the application to run in the browser.
|
and [bootstraps](appmodule.html#main "bootstrap the application") the application to run in the browser.
|
||||||
That's a reasonable choice for the development of most projects and
|
That's a reasonable choice for the development of most projects and
|
||||||
it's the only viable choice for a sample running in a _live-coding_ environment like Plunker.
|
it's the only viable choice for a sample running in a _live-coding_ environment like Plunker.
|
||||||
You'll learn about alternative compiling and deployment options later in the documentation.
|
You'll learn about alternative compiling and deployment options later in the documentation.
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
### Next Step
|
### Next Step
|
||||||
|
|
||||||
If you're new to Angular, we recommend staying on the [learning path](learning-angular.html).
|
If you're new to Angular, we recommend staying on the [learning path](learning-angular.html).
|
||||||
|
|
||||||
br
|
br
|
||||||
br
|
br
|
||||||
|
|
||||||
a#install-prerequisites
|
a#install-prerequisites
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Appendix: !{_prereq}
|
## Appendix: !{_prereq}
|
||||||
block install-tooling
|
block install-tooling
|
||||||
:marked
|
:marked
|
||||||
Node.js and npm are essential to modern web development with Angular and other platforms.
|
Node.js and npm are essential to modern web development with Angular and other platforms.
|
||||||
Node powers client development and build tools.
|
Node powers client development and build tools.
|
||||||
The _npm_ package manager, itself a _node_ application, installs JavaScript libraries.
|
The _npm_ package manager, itself a _node_ application, installs JavaScript libraries.
|
||||||
|
|
||||||
<a href="https://docs.npmjs.com/getting-started/installing-node" target="_blank" title="Installing Node.js and updating npm">
|
<a href="https://docs.npmjs.com/getting-started/installing-node" target="_blank" title="Installing Node.js and updating npm">
|
||||||
Get them now</a> if they're not already installed on your machine.
|
Get them now</a> if they're not already installed on your machine.
|
||||||
|
|
||||||
**Verify that you are running node `v4.x.x` or higher and npm `3.x.x` or higher**
|
**Verify that you are running node `v4.x.x` or higher and npm `3.x.x` or higher**
|
||||||
by running the commands `node -v` and `npm -v` in a terminal/console window.
|
by running the commands `node -v` and `npm -v` in a terminal/console window.
|
||||||
Older versions produce errors.
|
Older versions produce errors.
|
||||||
|
|
||||||
We recommend [nvm](https://github.com/creationix/nvm) for managing multiple versions of node and npm.
|
We recommend [nvm](https://github.com/creationix/nvm) for managing multiple versions of node and npm.
|
||||||
You may need [nvm](https://github.com/creationix/nvm) if you already have projects running on your machine that
|
You may need [nvm](https://github.com/creationix/nvm) if you already have projects running on your machine that
|
||||||
use other versions of node and npm.
|
use other versions of node and npm.
|
||||||
|
|
||||||
+ifDocsFor('ts')
|
+ifDocsFor('ts')
|
||||||
a#why-locally
|
a#why-locally
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Appendix: Why develop locally
|
## Appendix: Why develop locally
|
||||||
|
|
||||||
<live-example>Live coding</live-example> in the browser is a great way to explore Angular.
|
<live-example>Live coding</live-example> in the browser is a great way to explore Angular.
|
||||||
|
|
||||||
Links on almost every documentation page open completed samples in the browser.
|
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.
|
You can play with the sample code, share your changes with friends, and download and run the code on your own machine.
|
||||||
|
|
||||||
The [QuickStart](../quickstart.html "Angular QuickStart Playground") shows just the `AppComponent` file.
|
The [QuickStart](../quickstart.html "Angular QuickStart Playground") shows just the `AppComponent` file.
|
||||||
It creates the equivalent of `app.module.ts` and `main.ts` internally _for the playground only_.
|
It creates the equivalent of `app.module.ts` and `main.ts` internally _for the playground only_.
|
||||||
so the reader can discover Angular without distraction.
|
so the reader can discover Angular without distraction.
|
||||||
The other samples are based on the QuickStart seed.
|
The other samples are based on the QuickStart seed.
|
||||||
|
|
||||||
As much fun as this is ...
|
As much fun as this is ...
|
||||||
* you can't ship your app in plunker
|
* you can't ship your app in plunker
|
||||||
* you aren't always online when writing code
|
* you aren't always online when writing code
|
||||||
* transpiling TypeScript in the browser is slow
|
* transpiling TypeScript in the browser is slow
|
||||||
* the type support, refactoring, and code completion only work in your local IDE
|
* the type support, refactoring, and code completion only work in your local IDE
|
||||||
|
|
||||||
Use the <live-example><i>live coding</i></live-example> environment as a _playground_,
|
Use the <live-example><i>live coding</i></live-example> environment as a _playground_,
|
||||||
a place to try the documentation samples and experiment on your own.
|
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
|
It's the perfect place to reproduce a bug when you want to
|
||||||
<a href="https://github.com/angular/angular.io/issues/new" target="_blank" title="File a documentation issue">file a documentation issue</a> or
|
<a href="https://github.com/angular/angular.io/issues/new" target="_blank" title="File a documentation issue">file a documentation issue</a> or
|
||||||
<a href="https://github.com/angular/angular/issues/new" target="_blank" title="File an Angular issue">file an issue with Angular itself</a>.
|
<a href="https://github.com/angular/angular/issues/new" target="_blank" title="File an Angular issue">file an issue with Angular itself</a>.
|
||||||
|
|
||||||
For real development, we strongly recommend [developing locally](#develop-locally).
|
For real development, we strongly recommend [developing locally](#develop-locally).
|
||||||
|
|
|
||||||
|
|
@ -1,138 +1,138 @@
|
||||||
include ../_util-fns
|
include ../_util-fns
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
An Angular module class describes how the application parts fit together.
|
An Angular module class describes how the application parts fit together.
|
||||||
Every application has at least one Angular module, the _root_ module
|
Every application has at least one Angular module, the _root_ module
|
||||||
that you [bootstrap](#main) to launch the application.
|
that you [bootstrap](#main) to launch the application.
|
||||||
You can call it anything you want. The conventional name is `AppModule`.
|
You can call it anything you want. The conventional name is `AppModule`.
|
||||||
|
|
||||||
The [setup](setup.html) instructions produce a new project with the following minimal `AppModule`.
|
The [setup](setup.html) instructions produce a new project with the following minimal `AppModule`.
|
||||||
You'll evolve this module as your application grows.
|
You'll evolve this module as your application grows.
|
||||||
|
|
||||||
+makeExample('setup/ts/app/app.module.ts','', 'app/app.module.ts')(format='.')
|
+makeExample('setup/ts/app/app.module.ts','', 'app/app.module.ts')(format='.')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
After the `import` statements, you come to a class adorned with the
|
After the `import` statements, you come to a class adorned with the
|
||||||
**`@NgModule`** [_decorator_](glossary.html#decorator '"Decorator" explained').
|
**`@NgModule`** [_decorator_](glossary.html#decorator '"Decorator" explained').
|
||||||
|
|
||||||
The `@NgModule` decorator identifies `AppModule` as an Angular module class (also called an `NgModule` class).
|
The `@NgModule` decorator identifies `AppModule` as an Angular module class (also called an `NgModule` class).
|
||||||
`@NgModule` takes a _metadata_ object that tells Angular how to compile and launch the application.
|
`@NgModule` takes a _metadata_ object that tells Angular how to compile and launch the application.
|
||||||
|
|
||||||
* **_imports_** — the `BrowserModule` that this and every application needs to run in a browser.
|
* **_imports_** — the `BrowserModule` that this and every application needs to run in a browser.
|
||||||
* **_declarations_** — the application's lone component, which is also ...
|
* **_declarations_** — the application's lone component, which is also ...
|
||||||
* **_bootstrap_** — the _root_ component that Angular creates and inserts into the `index.html` host web page.
|
* **_bootstrap_** — the _root_ component that Angular creates and inserts into the `index.html` host web page.
|
||||||
|
|
||||||
The [Angular Modules (NgModules)](ngmodule.html) guide dives deeply into the details of Angular modules.
|
The [Angular Modules (NgModules)](ngmodule.html) guide dives deeply into the details of Angular modules.
|
||||||
All you need to know at the moment is a few basics about these three properties.
|
All you need to know at the moment is a few basics about these three properties.
|
||||||
|
|
||||||
a#imports
|
a#imports
|
||||||
:marked
|
:marked
|
||||||
### The _imports_ array
|
### The _imports_ array
|
||||||
|
|
||||||
Angular modules are a way to consolidate features that belong together into discrete units.
|
Angular modules are a way to consolidate features that belong together into discrete units.
|
||||||
Many features of Angular itself are organized as Angular modules.
|
Many features of Angular itself are organized as Angular modules.
|
||||||
HTTP services are in the `HttpModule`. The router is in the `RouterModule`.
|
HTTP services are in the `HttpModule`. The router is in the `RouterModule`.
|
||||||
Eventually you may create a feature module.
|
Eventually you may create a feature module.
|
||||||
|
|
||||||
Add a module to the `imports` array when the application requires its features.
|
Add a module to the `imports` array when the application requires its features.
|
||||||
|
|
||||||
_This_ application, like most applications, executes in a browser.
|
_This_ application, like most applications, executes in a browser.
|
||||||
Every application that executes in a browser needs the `BrowserModule` from `@angular/platform-browser`.
|
Every application that executes in a browser needs the `BrowserModule` from `@angular/platform-browser`.
|
||||||
So every such application includes the `BrowserModule` in its _root_ `AppModule`'s `imports` array.
|
So every such application includes the `BrowserModule` in its _root_ `AppModule`'s `imports` array.
|
||||||
Other guide and cookbook pages will tell you when you need to add additional modules to this array.
|
Other guide and cookbook pages will tell you when you need to add additional modules to this array.
|
||||||
|
|
||||||
.alert.is-important
|
.alert.is-important
|
||||||
:marked
|
:marked
|
||||||
**Only `NgModule` classes** go in the `imports` array. Don't put any other kind of class in `imports`.
|
**Only `NgModule` classes** go in the `imports` array. Don't put any other kind of class in `imports`.
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Don't confuse the `import` statements at the top of the file with the Angular module's `imports` array.
|
Don't confuse the `import` statements at the top of the file with the Angular module's `imports` array.
|
||||||
They have different jobs.
|
They have different jobs.
|
||||||
|
|
||||||
The _JavaScript_ `import` statements give you access to symbols _exported_ by other files
|
The _JavaScript_ `import` statements give you access to symbols _exported_ by other files
|
||||||
so you can reference them within _this_ file.
|
so you can reference them within _this_ file.
|
||||||
They have nothing to do with Angular and Angular knows nothing about them.
|
They have nothing to do with Angular and Angular knows nothing about them.
|
||||||
|
|
||||||
The _module's_ `imports` array tells Angular about specific Angular modules — classes decorated with `@NgModule` —
|
The _module's_ `imports` array tells Angular about specific Angular modules — classes decorated with `@NgModule` —
|
||||||
that the application needs to function properly.
|
that the application needs to function properly.
|
||||||
a#declarations
|
a#declarations
|
||||||
:marked
|
:marked
|
||||||
### The _declarations_ array
|
### The _declarations_ array
|
||||||
|
|
||||||
You must declare _every_ component in one (and _only one_) `NgModule` class.
|
You must declare _every_ component in one (and _only one_) `NgModule` class.
|
||||||
You tell Angular which components belong to the `AppModule` by listing it in the module's `declarations` array.
|
You tell Angular which components belong to the `AppModule` by listing it in the module's `declarations` array.
|
||||||
As you create more components, you'll add them to `declarations`.
|
As you create more components, you'll add them to `declarations`.
|
||||||
|
|
||||||
You'll learn to create two other kinds of classes —
|
You'll learn to create two other kinds of classes —
|
||||||
[directives](attribute-directives.html) and [pipes](pipes.html) —
|
[directives](attribute-directives.html) and [pipes](pipes.html) —
|
||||||
that you must also add to the `declarations` array.
|
that you must also add to the `declarations` array.
|
||||||
|
|
||||||
.alert.is-important
|
.alert.is-important
|
||||||
:marked
|
:marked
|
||||||
**Only _declarables_** — _components_, _directives_ and _pipes_ — belong in the `declarations` array.
|
**Only _declarables_** — _components_, _directives_ and _pipes_ — belong in the `declarations` array.
|
||||||
Don't put any other kind of class in `declarations`; _not_ `NgModule` classes, _not_ service classes, _not_ model classes.
|
Don't put any other kind of class in `declarations`; _not_ `NgModule` classes, _not_ service classes, _not_ model classes.
|
||||||
|
|
||||||
a#bootstrap-array
|
a#bootstrap-array
|
||||||
:marked
|
:marked
|
||||||
### The _bootstrap_ array
|
### The _bootstrap_ array
|
||||||
|
|
||||||
You launch the application by [_bootstrapping_](#main) the root `AppModule`.
|
You launch the application by [_bootstrapping_](#main) the root `AppModule`.
|
||||||
Among other things, the _bootstrapping_ process creates the component(s) listed in the `bootstrap` array
|
Among other things, the _bootstrapping_ process creates the component(s) listed in the `bootstrap` array
|
||||||
and inserts each one into the browser DOM.
|
and inserts each one into the browser DOM.
|
||||||
|
|
||||||
Each bootstrapped component is the base of its own tree of components.
|
Each bootstrapped component is the base of its own tree of components.
|
||||||
Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.
|
Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.
|
||||||
|
|
||||||
While you can put more than one component tree on a host web page, that's not typical.
|
While you can put more than one component tree on a host web page, that's not typical.
|
||||||
Most applications have only one component tree and they bootstrap a single _root_ component.
|
Most applications have only one component tree and they bootstrap a single _root_ component.
|
||||||
|
|
||||||
You can call the one _root_ component anything you want but most developers call it `AppComponent`.
|
You can call the one _root_ component anything you want but most developers call it `AppComponent`.
|
||||||
|
|
||||||
Which brings us to the _bootstrapping_ process itself.
|
Which brings us to the _bootstrapping_ process itself.
|
||||||
|
|
||||||
a#main
|
a#main
|
||||||
l-main-section
|
l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Bootstrap in _main.ts_
|
## Bootstrap in _main.ts_
|
||||||
|
|
||||||
There are many ways to bootstrap an application.
|
There are many ways to bootstrap an application.
|
||||||
The variations depend upon how you want to compile the application and where you want to run it.
|
The variations depend upon how you want to compile the application and where you want to run it.
|
||||||
|
|
||||||
In the beginning, you will compile the application dynamically with the _Just-in-Time (JiT)_ compiler
|
In the beginning, you will compile the application dynamically with the _Just-in-Time (JiT)_ compiler
|
||||||
and you'll run it in a browser. You can learn about other options later.
|
and you'll run it in a browser. You can learn about other options later.
|
||||||
|
|
||||||
The recommended place to bootstrap a JiT-compiled browser application is in a separate file
|
The recommended place to bootstrap a JiT-compiled browser application is in a separate file
|
||||||
in the `app` folder named `app/main.ts`
|
in the `app` folder named `app/main.ts`
|
||||||
+makeExample('setup/ts/app/main.ts','','app/main.ts')(format='.')
|
+makeExample('setup/ts/app/main.ts','','app/main.ts')(format='.')
|
||||||
:marked
|
:marked
|
||||||
This code creates a browser platform for dynamic (JiT) compilation and
|
This code creates a browser platform for dynamic (JiT) compilation and
|
||||||
bootstrap's the `AppModule` described above.
|
bootstrap's the `AppModule` described above.
|
||||||
|
|
||||||
The _bootstrapping_ process sets up the execution environment,
|
The _bootstrapping_ process sets up the execution environment,
|
||||||
digs the _root_ `AppComponent` out of the module's `bootstrap` array,
|
digs the _root_ `AppComponent` out of the module's `bootstrap` array,
|
||||||
creates an instance of the component and inserts it within the element tag identified by the component's `selector`.
|
creates an instance of the component and inserts it within the element tag identified by the component's `selector`.
|
||||||
|
|
||||||
The `AppComponent` selector — here and in most documentation samples — is `my-app`
|
The `AppComponent` selector — here and in most documentation samples — is `my-app`
|
||||||
so Angular looks for a `<my-app>` tag in the `index.html` like this one ...
|
so Angular looks for a `<my-app>` tag in the `index.html` like this one ...
|
||||||
+makeExample('setup/ts/index.html','my-app')(format='.')
|
+makeExample('setup/ts/index.html','my-app')(format='.')
|
||||||
:marked
|
:marked
|
||||||
... and displays the `AppComponent` there.
|
... and displays the `AppComponent` there.
|
||||||
|
|
||||||
This file is very stable. Once you've set it up, you may never change it again.
|
This file is very stable. Once you've set it up, you may never change it again.
|
||||||
|
|
||||||
a#quickstart-appmodule
|
a#quickstart-appmodule
|
||||||
l-main-section
|
l-main-section
|
||||||
:marked
|
:marked
|
||||||
## QuickStart's _AppModule_
|
## QuickStart's _AppModule_
|
||||||
Every Angular application must have a root `NgModule`, even the [QuickStart](../quickstart.html).
|
Every Angular application must have a root `NgModule`, even the [QuickStart](../quickstart.html).
|
||||||
You didn't see it but it was there.
|
You didn't see it but it was there.
|
||||||
|
|
||||||
A script in the `index.html` generated a hidden `AppModule` and bootstrapped it for you
|
A script in the `index.html` generated a hidden `AppModule` and bootstrapped it for you
|
||||||
so you could focus on the `AppComponent` and discover the _essential Angular_ more quickly.
|
so you could focus on the `AppComponent` and discover the _essential Angular_ more quickly.
|
||||||
|
|
||||||
If you're feeling adventurous, add your own `AppModule` and `main.ts` to the
|
If you're feeling adventurous, add your own `AppModule` and `main.ts` to the
|
||||||
live code in the _QuickStart_ plunker.
|
live code in the _QuickStart_ plunker.
|
||||||
|
|
||||||
Remove the following `<script>` tag from the `index.html` and see _your_ work in action.
|
Remove the following `<script>` tag from the `index.html` and see _your_ work in action.
|
||||||
+makeExample('quickstart/ts/index.html','autobootstrap','Remove this script tag from "index.html"')(format='.')
|
+makeExample('quickstart/ts/index.html','autobootstrap','Remove this script tag from "index.html"')(format='.')
|
||||||
|
|
|
||||||
|
|
@ -1,43 +1,43 @@
|
||||||
block includes
|
block includes
|
||||||
include ../_util-fns
|
include ../_util-fns
|
||||||
|
|
||||||
figure
|
figure
|
||||||
img(src="/resources/images/devguide/intro/people.png" width="200px" height="152px" alt="Us" align="left" style="margin-left:-40px;margin-right:10px" )
|
img(src="/resources/images/devguide/intro/people.png" width="200px" height="152px" alt="Us" align="left" style="margin-left:-40px;margin-right:10px" )
|
||||||
:marked
|
:marked
|
||||||
Everyone learns differently.
|
Everyone learns differently.
|
||||||
You don't have to read the documentation straight through. Most pages stand on their own.
|
You don't have to read the documentation straight through. Most pages stand on their own.
|
||||||
Those new to Angular may wish to follow this popular learning path.
|
Those new to Angular may wish to follow this popular learning path.
|
||||||
<br class="l-clear-left">
|
<br class="l-clear-left">
|
||||||
|
|
||||||
1. [Setup](setup.html "Setup locally withe Quickstart seed") for local Angular development, if you haven't already done so.
|
1. [Setup](setup.html "Setup locally withe Quickstart seed") for local Angular development, if you haven't already done so.
|
||||||
|
|
||||||
1. Take the [*Tour of Heroes* tutorial](../tutorial "Tour of Heroes").
|
1. Take the [*Tour of Heroes* tutorial](../tutorial "Tour of Heroes").
|
||||||
|
|
||||||
The *Tour of Heroes* takes you step-by-step from [setup](setup.html)
|
The *Tour of Heroes* takes you step-by-step from [setup](setup.html)
|
||||||
to a full-featured example that demonstrates the essential characteristics of a professional application:
|
to a full-featured example that demonstrates the essential characteristics of a professional application:
|
||||||
a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access.
|
a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access.
|
||||||
|
|
||||||
1. <a id="architecture"></a>Read the [Architecture](architecture.html) overview for the big picture.
|
1. <a id="architecture"></a>Read the [Architecture](architecture.html) overview for the big picture.
|
||||||
<li if-docs="ts"><p>
|
<li if-docs="ts"><p>
|
||||||
[The Root Module](appmodule.html) introduces the `NgModule` class that tells Angular how to compile and run your application.
|
[The Root Module](appmodule.html) introduces the `NgModule` class that tells Angular how to compile and run your application.
|
||||||
</p></li>
|
</p></li>
|
||||||
|
|
||||||
1. [Displaying Data](displaying-data.html) shows how data binding puts component property values on screen.
|
1. [Displaying Data](displaying-data.html) shows how data binding puts component property values on screen.
|
||||||
|
|
||||||
1. [User Input](user-input.html) explains how to respond to user-initiated DOM events.
|
1. [User Input](user-input.html) explains how to respond to user-initiated DOM events.
|
||||||
|
|
||||||
1. [Forms](forms.html) covers data entry and validation within the UI.
|
1. [Forms](forms.html) covers data entry and validation within the UI.
|
||||||
|
|
||||||
1. [Dependency Injection](dependency-injection.html) is the way to build large, maintainable applications
|
1. [Dependency Injection](dependency-injection.html) is the way to build large, maintainable applications
|
||||||
from small, single-purpose parts.
|
from small, single-purpose parts.
|
||||||
|
|
||||||
1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML.
|
1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML.
|
||||||
|
|
||||||
After reading the above sections, feel free to skip around among the other pages on this site.
|
After reading the above sections, feel free to skip around among the other pages on this site.
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
### Next Step
|
### Next Step
|
||||||
|
|
||||||
Try the [tutorial](../tutorial "Tour of Heroes") if you're ready to start coding or
|
Try the [tutorial](../tutorial "Tour of Heroes") if you're ready to start coding or
|
||||||
visit the [Architecture](architecture.html "Basic Concepts") page if you prefer to learn the basic concepts first.
|
visit the [Architecture](architecture.html "Basic Concepts") page if you prefer to learn the basic concepts first.
|
||||||
|
|
|
||||||
|
|
@ -1,154 +1,154 @@
|
||||||
block includes
|
block includes
|
||||||
include ../_util-fns
|
include ../_util-fns
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
The documentation [setup](setup.html) procedures install a _lot_ of files,
|
The documentation [setup](setup.html) procedures install a _lot_ of files,
|
||||||
Most of them can be safely ignored.
|
Most of them can be safely ignored.
|
||||||
|
|
||||||
Application files _inside the_ **`app/`** and **`e2e/`** folders matter most to developers.
|
Application files _inside the_ **`app/`** and **`e2e/`** folders matter most to developers.
|
||||||
|
|
||||||
Files _outside_ those folders condition the development environment.
|
Files _outside_ those folders condition the development environment.
|
||||||
They rarely change and you may never view or modify them.
|
They rarely change and you may never view or modify them.
|
||||||
If you do, this page can help you understand their purpose.
|
If you do, this page can help you understand their purpose.
|
||||||
|
|
||||||
style td, th {vertical-align: top}
|
style td, th {vertical-align: top}
|
||||||
table(width="100%")
|
table(width="100%")
|
||||||
col(width="10%")
|
col(width="10%")
|
||||||
col(width="90%")
|
col(width="90%")
|
||||||
tr
|
tr
|
||||||
th File
|
th File
|
||||||
th Purpose
|
th Purpose
|
||||||
tr
|
tr
|
||||||
td <code>app/...</code>
|
td <code>app/...</code>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
Your Angular application files.
|
Your Angular application files.
|
||||||
|
|
||||||
Ships with the "Hello Angular" sample's
|
Ships with the "Hello Angular" sample's
|
||||||
`AppComponent`, `AppModule`, a component unit test (`app.component.spec.ts`), and
|
`AppComponent`, `AppModule`, a component unit test (`app.component.spec.ts`), and
|
||||||
the bootstrap file, `main.ts`.
|
the bootstrap file, `main.ts`.
|
||||||
tr
|
tr
|
||||||
td <code>e2e/...</code>
|
td <code>e2e/...</code>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
_End-to-end_ (e2e) tests of your application,
|
_End-to-end_ (e2e) tests of your application,
|
||||||
written in Jasmine and run by the
|
written in Jasmine and run by the
|
||||||
<a href="http://www.protractortest.org/" target="_blank" title="Protractor: end-to-end testing for Angular">protractor</a>
|
<a href="http://www.protractortest.org/" target="_blank" title="Protractor: end-to-end testing for Angular">protractor</a>
|
||||||
e2e test runner.
|
e2e test runner.
|
||||||
|
|
||||||
Initialized with an e2e test for the "Hello Angular" sample.
|
Initialized with an e2e test for the "Hello Angular" sample.
|
||||||
tr
|
tr
|
||||||
td <code>node_modules/...</code>
|
td <code>node_modules/...</code>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
The _npm_ packages installed with the `npm install` command.
|
The _npm_ packages installed with the `npm install` command.
|
||||||
tr
|
tr
|
||||||
td
|
td
|
||||||
code.
|
code.
|
||||||
.editorconfig<br>
|
.editorconfig<br>
|
||||||
.git/...<br>
|
.git/...<br>
|
||||||
.gitignore<br>
|
.gitignore<br>
|
||||||
.travis.yml
|
.travis.yml
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
Tooling configuration files and folders.
|
Tooling configuration files and folders.
|
||||||
Ignore them until you have a compelling reason to do otherwise.
|
Ignore them until you have a compelling reason to do otherwise.
|
||||||
tr
|
tr
|
||||||
td <code>CHANGELOG.md</code>
|
td <code>CHANGELOG.md</code>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
The history of changes to the _QuickStart_ repository.
|
The history of changes to the _QuickStart_ repository.
|
||||||
Delete or ignore.
|
Delete or ignore.
|
||||||
tr
|
tr
|
||||||
td <code>favicon.ico</code>
|
td <code>favicon.ico</code>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
The application icon that appears in the browser tab.
|
The application icon that appears in the browser tab.
|
||||||
tr
|
tr
|
||||||
td <code>index.html</code>
|
td <code>index.html</code>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
The application host page.
|
The application host page.
|
||||||
It loads a few essential scripts in a prescribed order.
|
It loads a few essential scripts in a prescribed order.
|
||||||
Then it boots the application, placing the root `AppComponent`
|
Then it boots the application, placing the root `AppComponent`
|
||||||
in the custom `<my-app>` body tag.
|
in the custom `<my-app>` body tag.
|
||||||
|
|
||||||
The same `index.html` satisfies all documentation application samples.
|
The same `index.html` satisfies all documentation application samples.
|
||||||
tr
|
tr
|
||||||
td <code>karma.conf.js</code>
|
td <code>karma.conf.js</code>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
Configuration for the <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma unit test runner">karma</a>
|
Configuration for the <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma unit test runner">karma</a>
|
||||||
test runner described in the [Testing](testing.html) guide.
|
test runner described in the [Testing](testing.html) guide.
|
||||||
tr
|
tr
|
||||||
td <code>karma-test-shim.js</code>
|
td <code>karma-test-shim.js</code>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
Script to run <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma unit test runner">karma</a>
|
Script to run <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma unit test runner">karma</a>
|
||||||
with SystemJS as described in the [Testing](testing.html) guide.
|
with SystemJS as described in the [Testing](testing.html) guide.
|
||||||
tr
|
tr
|
||||||
td <code>LICENSE</code>
|
td <code>LICENSE</code>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
The open source MIT license to use this setup code in your application.
|
The open source MIT license to use this setup code in your application.
|
||||||
tr
|
tr
|
||||||
td <code>package.json</code>
|
td <code>package.json</code>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
Identifies `npm `package dependencies for the project.
|
Identifies `npm `package dependencies for the project.
|
||||||
|
|
||||||
Contains command scripts for running the application,
|
Contains command scripts for running the application,
|
||||||
running tests, and more. Enter `npm run` for a listing.
|
running tests, and more. Enter `npm run` for a listing.
|
||||||
<a href="https://github.com/angular/quickstart/blob/master/README.md#npm-scripts"
|
<a href="https://github.com/angular/quickstart/blob/master/README.md#npm-scripts"
|
||||||
target="_blank" title="npm scripts for Angular documentation samples">Read more</a> about them.
|
target="_blank" title="npm scripts for Angular documentation samples">Read more</a> about them.
|
||||||
tr
|
tr
|
||||||
td <code>protractor.config.js</code>
|
td <code>protractor.config.js</code>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
Configuration for the
|
Configuration for the
|
||||||
<a href="http://www.protractortest.org/" target="_blank" title="Protractor: end-to-end testing for Angular">protractor</a>
|
<a href="http://www.protractortest.org/" target="_blank" title="Protractor: end-to-end testing for Angular">protractor</a>
|
||||||
_end-to-end_ (e2e) test runner.
|
_end-to-end_ (e2e) test runner.
|
||||||
tr
|
tr
|
||||||
td <code>README.md</code>
|
td <code>README.md</code>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
Instruction for using this git repository in your project.
|
Instruction for using this git repository in your project.
|
||||||
Worth reading before deleting.
|
Worth reading before deleting.
|
||||||
tr
|
tr
|
||||||
td <code>styles.css</code>
|
td <code>styles.css</code>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
Global styles for the application. Initialized with an `<h1>` style for the QuickStart demo.
|
Global styles for the application. Initialized with an `<h1>` style for the QuickStart demo.
|
||||||
|
|
||||||
tr
|
tr
|
||||||
td <code>systemjs<br>.config.js</code>
|
td <code>systemjs<br>.config.js</code>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
Tells the **SystemJS** module loader where to find modules
|
Tells the **SystemJS** module loader where to find modules
|
||||||
referenced in JavaScript `import` statements such as
|
referenced in JavaScript `import` statements such as
|
||||||
code-example(language="ts").
|
code-example(language="ts").
|
||||||
import { Component } from '@angular/core;
|
import { Component } from '@angular/core;
|
||||||
:marked
|
:marked
|
||||||
Don't touch this file unless you are fully versed in SystemJS configuration.
|
Don't touch this file unless you are fully versed in SystemJS configuration.
|
||||||
tr
|
tr
|
||||||
td <code>systemjs<br>.config.extras.js</code>
|
td <code>systemjs<br>.config.extras.js</code>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
Optional extra SystemJS configuration.
|
Optional extra SystemJS configuration.
|
||||||
A way to add SystemJS mappings, such as for appliation _barrels_,
|
A way to add SystemJS mappings, such as for appliation _barrels_,
|
||||||
without changing the original `system.config.js`.
|
without changing the original `system.config.js`.
|
||||||
tr
|
tr
|
||||||
td <code>tsconfig.json</code>
|
td <code>tsconfig.json</code>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
Tells the TypeScript compiler how to transpile TypeScript source files
|
Tells the TypeScript compiler how to transpile TypeScript source files
|
||||||
into JavaScript files that run in all modern browsers.
|
into JavaScript files that run in all modern browsers.
|
||||||
tr
|
tr
|
||||||
td <code>tslint.json</code>
|
td <code>tslint.json</code>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
The `npm` installed TypeScript linter inspects your TypeScript code
|
The `npm` installed TypeScript linter inspects your TypeScript code
|
||||||
and complains when you violate one of its rules.
|
and complains when you violate one of its rules.
|
||||||
|
|
||||||
This file defines linting rules favored by the
|
This file defines linting rules favored by the
|
||||||
[Angular style guide](style-guide.html) and by the authors of the documentation.
|
[Angular style guide](style-guide.html) and by the authors of the documentation.
|
||||||
|
|
|
||||||
|
|
@ -1,180 +1,180 @@
|
||||||
block includes
|
block includes
|
||||||
include ../_util-fns
|
include ../_util-fns
|
||||||
- var _prereq = 'node and npm';
|
- var _prereq = 'node and npm';
|
||||||
- var _playground = 'playground';
|
- var _playground = 'playground';
|
||||||
- var _Install = 'Install';
|
- var _Install = 'Install';
|
||||||
//- npm commands
|
//- npm commands
|
||||||
- var _install = 'install';
|
- var _install = 'install';
|
||||||
- var _start = 'start';
|
- var _start = 'start';
|
||||||
|
|
||||||
a#develop-locally
|
a#develop-locally
|
||||||
:marked
|
:marked
|
||||||
## Setup a local development environment
|
## Setup a local development environment
|
||||||
|
|
||||||
<span if-docs="ts">
|
<span if-docs="ts">
|
||||||
The <live-example name=quickstart>QuickStart live-coding</live-example> example is an Angular _playground_.
|
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.
|
It's not where you'd develop a real application.
|
||||||
You [should develop locally](#why-locally "Why develop locally") on your own machine ... and that's also how we think you should learn Angular.
|
You [should develop locally](#why-locally "Why develop locally") on your own machine ... and that's also how we think you should learn Angular.
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
Setting up a new project on your machine is quick and easy with the **QuickStart seed**,
|
Setting up a new project on your machine is quick and easy with the **QuickStart seed**,
|
||||||
maintained [on github](!{_qsRepo} "Install the github QuickStart repo").
|
maintained [on github](!{_qsRepo} "Install the github QuickStart repo").
|
||||||
|
|
||||||
Make sure you have [!{_prereq} installed](#install-prerequisites "What if you don't have !{_prereq}?").
|
Make sure you have [!{_prereq} installed](#install-prerequisites "What if you don't have !{_prereq}?").
|
||||||
Then ...
|
Then ...
|
||||||
1. Create a project folder (you can call it `quickstart` and rename it later).
|
1. Create a project folder (you can call it `quickstart` and rename it later).
|
||||||
1. [Clone](#clone "Clone it from github") or [download](#download "download it from github") the **QuickStart seed** into your project folder.
|
1. [Clone](#clone "Clone it from github") or [download](#download "download it from github") the **QuickStart seed** into your project folder.
|
||||||
1. !{_Install} [!{_npm}](#install-prerequisites "What if you don't have !{_prereq}?") packages.
|
1. !{_Install} [!{_npm}](#install-prerequisites "What if you don't have !{_prereq}?") packages.
|
||||||
1. Run `!{_npm} !{_start}` to launch the sample application.
|
1. Run `!{_npm} !{_start}` to launch the sample application.
|
||||||
|
|
||||||
a#clone
|
a#clone
|
||||||
:marked
|
:marked
|
||||||
### Clone
|
### Clone
|
||||||
|
|
||||||
Perform the _clone-to-launch_ steps with these terminal commands.
|
Perform the _clone-to-launch_ steps with these terminal commands.
|
||||||
|
|
||||||
code-example(language="sh" class="code-shell").
|
code-example(language="sh" class="code-shell").
|
||||||
git clone !{_qsRepo}.git quickstart
|
git clone !{_qsRepo}.git quickstart
|
||||||
cd quickstart
|
cd quickstart
|
||||||
!{_npm} !{_install}
|
!{_npm} !{_install}
|
||||||
!{_npm} !{_start}
|
!{_npm} !{_start}
|
||||||
|
|
||||||
a#download
|
a#download
|
||||||
:marked
|
:marked
|
||||||
### Download
|
### Download
|
||||||
<a href="!{_qsRepoZip}" title="Download the QuickStart seed repository">Download the QuickStart seed</a>
|
<a href="!{_qsRepoZip}" title="Download the QuickStart seed repository">Download the QuickStart seed</a>
|
||||||
and unzip it into your project folder. Then perform the remaining steps with these terminal commands.
|
and unzip it into your project folder. Then perform the remaining steps with these terminal commands.
|
||||||
|
|
||||||
code-example(language="sh" class="code-shell").
|
code-example(language="sh" class="code-shell").
|
||||||
cd quickstart
|
cd quickstart
|
||||||
!{_npm} !{_install}
|
!{_npm} !{_install}
|
||||||
!{_npm} !{_start}
|
!{_npm} !{_start}
|
||||||
|
|
||||||
.l-main-section#seed
|
.l-main-section#seed
|
||||||
:marked
|
:marked
|
||||||
## What's in the QuickStart seed?
|
## What's in the QuickStart seed?
|
||||||
|
|
||||||
block qs-seed
|
block qs-seed
|
||||||
:marked
|
:marked
|
||||||
The **QuickStart seed** contains the same application as the QuickStart playground
|
The **QuickStart seed** contains the same application as the QuickStart playground
|
||||||
and even has <live-example>its own _playground_</live-example>
|
and even has <live-example>its own _playground_</live-example>
|
||||||
that accomodates development of richer examples in a live coding environment.
|
that accomodates development of richer examples in a live coding environment.
|
||||||
|
|
||||||
But it's true purpose is to provide a solid foundation for _local_ development.
|
But it's true purpose is to provide a solid foundation for _local_ development.
|
||||||
Consequently, there are _many more files_ in the project folder on your machine,
|
Consequently, there are _many more files_ in the project folder on your machine,
|
||||||
most of which you can [learn about later](setup-systemjs-anatomy.html "Setup Anatomy").
|
most of which you can [learn about later](setup-systemjs-anatomy.html "Setup Anatomy").
|
||||||
|
|
||||||
block core-files
|
block core-files
|
||||||
:marked
|
:marked
|
||||||
Focus on the following three TypeScript (`.ts`) files in the **`/app`** folder.
|
Focus on the following three TypeScript (`.ts`) files in the **`/app`** folder.
|
||||||
|
|
||||||
.filetree
|
.filetree
|
||||||
.file app
|
.file app
|
||||||
.children
|
.children
|
||||||
.file app.component.ts
|
.file app.component.ts
|
||||||
.file app.module.ts
|
.file app.module.ts
|
||||||
.file main.ts
|
.file main.ts
|
||||||
|
|
||||||
+makeTabs(`
|
+makeTabs(`
|
||||||
setup/ts/app/app.component.ts,
|
setup/ts/app/app.component.ts,
|
||||||
setup/ts/app/app.module.ts,
|
setup/ts/app/app.module.ts,
|
||||||
setup/ts/app/main.ts
|
setup/ts/app/main.ts
|
||||||
`, '', `
|
`, '', `
|
||||||
app/app.component.ts,
|
app/app.component.ts,
|
||||||
app/app.module.ts,
|
app/app.module.ts,
|
||||||
app/main.ts
|
app/main.ts
|
||||||
`)(format='.')
|
`)(format='.')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
All guides and cookbooks have _at least these core files_. Each file has a distinct purpose and evolves independently as the application grows.
|
All guides and cookbooks have _at least these core files_. Each file has a distinct purpose and evolves independently as the application grows.
|
||||||
|
|
||||||
style td, th {vertical-align: top}
|
style td, th {vertical-align: top}
|
||||||
table(width="100%")
|
table(width="100%")
|
||||||
col(width="20%")
|
col(width="20%")
|
||||||
col(width="80%")
|
col(width="80%")
|
||||||
tr
|
tr
|
||||||
th File
|
th File
|
||||||
th Purpose
|
th Purpose
|
||||||
tr
|
tr
|
||||||
td <ngio-ex>app.component.ts</ngio-ex>
|
td <ngio-ex>app.component.ts</ngio-ex>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
Defines the same `AppComponent` as the one in the QuickStart !{_playground}.
|
Defines the same `AppComponent` as the one in the QuickStart !{_playground}.
|
||||||
It is the **root** component of what will become a tree of nested components
|
It is the **root** component of what will become a tree of nested components
|
||||||
as the application evolves.
|
as the application evolves.
|
||||||
tr(if-docs="ts")
|
tr(if-docs="ts")
|
||||||
td <code>app.module.ts</code>
|
td <code>app.module.ts</code>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
Defines `AppModule`, the [root module](appmodule.html "AppModule: the root module") that tells Angular how to assemble the application.
|
Defines `AppModule`, the [root module](appmodule.html "AppModule: the root module") that tells Angular how to assemble the application.
|
||||||
Right now it declares only the `AppComponent`.
|
Right now it declares only the `AppComponent`.
|
||||||
Soon there will be more components to declare.
|
Soon there will be more components to declare.
|
||||||
tr
|
tr
|
||||||
td <ngio-ex>main.ts</ngio-ex>
|
td <ngio-ex>main.ts</ngio-ex>
|
||||||
td
|
td
|
||||||
:marked
|
:marked
|
||||||
Compiles the application with the [JiT compiler](../glossary.html#jit)
|
Compiles the application with the [JiT compiler](../glossary.html#jit)
|
||||||
and [bootstraps](appmodule.html#main "bootstrap the application") the application to run in the browser.
|
and [bootstraps](appmodule.html#main "bootstrap the application") the application to run in the browser.
|
||||||
That's a reasonable choice for the development of most projects and
|
That's a reasonable choice for the development of most projects and
|
||||||
it's the only viable choice for a sample running in a _live-coding_ environment like Plunker.
|
it's the only viable choice for a sample running in a _live-coding_ environment like Plunker.
|
||||||
You'll learn about alternative compiling and deployment options later in the documentation.
|
You'll learn about alternative compiling and deployment options later in the documentation.
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
### Next Step
|
### Next Step
|
||||||
|
|
||||||
If you're new to Angular, we recommend staying on the [learning path](learning-angular.html).
|
If you're new to Angular, we recommend staying on the [learning path](learning-angular.html).
|
||||||
|
|
||||||
br
|
br
|
||||||
br
|
br
|
||||||
|
|
||||||
a#install-prerequisites
|
a#install-prerequisites
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Appendix: !{_prereq}
|
## Appendix: !{_prereq}
|
||||||
block install-tooling
|
block install-tooling
|
||||||
:marked
|
:marked
|
||||||
Node.js and npm are essential to modern web development with Angular and other platforms.
|
Node.js and npm are essential to modern web development with Angular and other platforms.
|
||||||
Node powers client development and build tools.
|
Node powers client development and build tools.
|
||||||
The _npm_ package manager, itself a _node_ application, installs JavaScript libraries.
|
The _npm_ package manager, itself a _node_ application, installs JavaScript libraries.
|
||||||
|
|
||||||
<a href="https://docs.npmjs.com/getting-started/installing-node" target="_blank" title="Installing Node.js and updating npm">
|
<a href="https://docs.npmjs.com/getting-started/installing-node" target="_blank" title="Installing Node.js and updating npm">
|
||||||
Get them now</a> if they're not already installed on your machine.
|
Get them now</a> if they're not already installed on your machine.
|
||||||
|
|
||||||
**Verify that you are running node `v4.x.x` or higher and npm `3.x.x` or higher**
|
**Verify that you are running node `v4.x.x` or higher and npm `3.x.x` or higher**
|
||||||
by running the commands `node -v` and `npm -v` in a terminal/console window.
|
by running the commands `node -v` and `npm -v` in a terminal/console window.
|
||||||
Older versions produce errors.
|
Older versions produce errors.
|
||||||
|
|
||||||
We recommend [nvm](https://github.com/creationix/nvm) for managing multiple versions of node and npm.
|
We recommend [nvm](https://github.com/creationix/nvm) for managing multiple versions of node and npm.
|
||||||
You may need [nvm](https://github.com/creationix/nvm) if you already have projects running on your machine that
|
You may need [nvm](https://github.com/creationix/nvm) if you already have projects running on your machine that
|
||||||
use other versions of node and npm.
|
use other versions of node and npm.
|
||||||
|
|
||||||
+ifDocsFor('ts')
|
+ifDocsFor('ts')
|
||||||
a#why-locally
|
a#why-locally
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Appendix: Why develop locally
|
## Appendix: Why develop locally
|
||||||
|
|
||||||
<live-example>Live coding</live-example> in the browser is a great way to explore Angular.
|
<live-example>Live coding</live-example> in the browser is a great way to explore Angular.
|
||||||
|
|
||||||
Links on almost every documentation page open completed samples in the browser.
|
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.
|
You can play with the sample code, share your changes with friends, and download and run the code on your own machine.
|
||||||
|
|
||||||
The [QuickStart](../quickstart.html "Angular QuickStart Playground") shows just the `AppComponent` file.
|
The [QuickStart](../quickstart.html "Angular QuickStart Playground") shows just the `AppComponent` file.
|
||||||
It creates the equivalent of `app.module.ts` and `main.ts` internally _for the playground only_.
|
It creates the equivalent of `app.module.ts` and `main.ts` internally _for the playground only_.
|
||||||
so the reader can discover Angular without distraction.
|
so the reader can discover Angular without distraction.
|
||||||
The other samples are based on the QuickStart seed.
|
The other samples are based on the QuickStart seed.
|
||||||
|
|
||||||
As much fun as this is ...
|
As much fun as this is ...
|
||||||
* you can't ship your app in plunker
|
* you can't ship your app in plunker
|
||||||
* you aren't always online when writing code
|
* you aren't always online when writing code
|
||||||
* transpiling TypeScript in the browser is slow
|
* transpiling TypeScript in the browser is slow
|
||||||
* the type support, refactoring, and code completion only work in your local IDE
|
* the type support, refactoring, and code completion only work in your local IDE
|
||||||
|
|
||||||
Use the <live-example><i>live coding</i></live-example> environment as a _playground_,
|
Use the <live-example><i>live coding</i></live-example> environment as a _playground_,
|
||||||
a place to try the documentation samples and experiment on your own.
|
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
|
It's the perfect place to reproduce a bug when you want to
|
||||||
<a href="https://github.com/angular/angular.io/issues/new" target="_blank" title="File a documentation issue">file a documentation issue</a> or
|
<a href="https://github.com/angular/angular.io/issues/new" target="_blank" title="File a documentation issue">file a documentation issue</a> or
|
||||||
<a href="https://github.com/angular/angular/issues/new" target="_blank" title="File an Angular issue">file an issue with Angular itself</a>.
|
<a href="https://github.com/angular/angular/issues/new" target="_blank" title="File an Angular issue">file an issue with Angular itself</a>.
|
||||||
|
|
||||||
For real development, we strongly recommend [developing locally](#develop-locally).
|
For real development, we strongly recommend [developing locally](#develop-locally).
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue