docs(dart/setup): make Dart setup more Darty
This commit is contained in:
Kathy Walrath
GitHub
parent
4a0c3d79b7
commit
cd235ac340
|
|
@ -8,9 +8,9 @@
|
|||
},
|
||||
|
||||
"setup": {
|
||||
"title": "Setup for local development",
|
||||
"title": "Setup for Development",
|
||||
"navTitle": "Setup",
|
||||
"intro": "Install the Angular QuickStart seed for faster, more efficient development on your machine",
|
||||
"intro": "How to use Dart tools to create and run Angular apps",
|
||||
"nextable": true,
|
||||
"hideNextPage": true,
|
||||
"basics": true
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
|
|
@ -1,58 +1,161 @@
|
|||
extends ../../../ts/_cache/guide/setup.jade
|
||||
include ../_util-fns
|
||||
|
||||
block includes
|
||||
include ../_util-fns
|
||||
- var _prereq = 'the Dart SDK';
|
||||
- var _playground = 'repository';
|
||||
- var _Install = 'Get';
|
||||
//- npm/pub commands
|
||||
- var _install = 'get';
|
||||
- var _start = 'serve';
|
||||
a#develop-locally
|
||||
:marked
|
||||
Setting up a new Angular project is quick and easy,
|
||||
using everyday Dart tools.
|
||||
|
||||
block qs-seed
|
||||
:marked
|
||||
The <live-example name="quickstart">QuickStart project</live-example> can
|
||||
conveniently be used to seed new projects. It contains the following core files:
|
||||
.l-main-section#sdk
|
||||
:marked
|
||||
## Prerequisites: Dart SDK & Dartium
|
||||
|
||||
block core-files
|
||||
+makeTabs(`
|
||||
quickstart/ts/app/app.component.ts,
|
||||
quickstart/ts/app/main.ts,
|
||||
quickstart/ts/index.html,
|
||||
quickstart/dart/pubspec.yaml,
|
||||
quickstart/ts/styles.css`,
|
||||
',,,,quickstart',
|
||||
`app/app.component.ts,
|
||||
app/main.ts,
|
||||
index.html,
|
||||
pubspec.yaml,
|
||||
styles.css (excerpt)`)
|
||||
If you don't already have the **Dart SDK** and **Dartium**, get them.
|
||||
We recommend using the WebStorm IDE, as well.
|
||||
|
||||
:marked
|
||||
These files are organized as follows:
|
||||
[Get Started](https://webdev.dartlang.org/guides/get-started) tells you how to get the tools.
|
||||
|
||||
.filetree
|
||||
.file angular_quickstart
|
||||
|
||||
a#webstorm
|
||||
:marked
|
||||
## Creating a project in WebStorm
|
||||
|
||||
Using WebStorm to create an app is simple, once you complete some one-time setup.
|
||||
|
||||
1. Launch WebStorm.
|
||||
1. If you haven't already done so,
|
||||
[configure Dart support in WebStorm](https://webdev.dartlang.org/tools/webstorm#configuring-dart-support).
|
||||
1. Choose **Create New Project** from the welcome screen,
|
||||
or **File > New > Project...** from the menu. A dialog appears.
|
||||
1. Select **Dart** from the list on the left.
|
||||
1. Set the location and template:
|
||||
1. In the **Location** input field, check that
|
||||
the project folder is where you want it.
|
||||
1. Also in the **Location** field,
|
||||
change the name of the project from `untitled` to whatever you choose, such as `angular_quickstart`.
|
||||
1. Make sure that **Generate sample content** is checked.
|
||||
1. Select **Angular QuickStart Example** from the list.
|
||||
<br>
|
||||
The form should look similar to the following:
|
||||
<br>
|
||||
<img src="images/create-ng2-project.png" alt="A screenshot of the New Project dialog, with the specified selections" style="border:1px solid">
|
||||
1. Click **Create**.
|
||||
|
||||
WebStorm takes several seconds to analyze the sources and do other housekeeping.
|
||||
This only happens once. After that, you'll be able to use WebStorm for the usual IDE tasks,
|
||||
including running the app.
|
||||
|
||||
For more information on using WebStorm, see
|
||||
[Installing and Using WebStorm](https://webdev.dartlang.org/tools/webstorm).
|
||||
|
||||
|
||||
a#cli
|
||||
:marked
|
||||
## Using a template from the command line
|
||||
|
||||
[Stagehand](http://stagehand.pub/) gives you
|
||||
command-line access to the same templates that WebStorm uses.
|
||||
Assuming the Dart SDK and
|
||||
[pub cache `bin` directory](https://www.dartlang.org/tools/pub/cmd/pub-global#running-a-script-from-your-path)
|
||||
are in your path, here's how you use Stagehand to create an Angular project.
|
||||
|
||||
1. Install or update stagehand:
|
||||
<br>
|
||||
`pub global activate stagehand`
|
||||
1. Create a directory for your project:
|
||||
<br>
|
||||
`mkdir angular_quickstart; cd angular_quickstart`
|
||||
1. Use Stagehand with the appropriate template to create a skeleton app:
|
||||
<br>
|
||||
`stagehand web-angular-quickstart`
|
||||
<br>
|
||||
**Note:**
|
||||
Examples in this guide and tutorial are based on the QuickStart example,
|
||||
which is in the `web-angular-quickstart` template.
|
||||
A more general-purpose template is `web-angular`.
|
||||
1. Get the app's dependencies: <br>
|
||||
`pub get`
|
||||
1. Run the app: <br>
|
||||
`pub serve`
|
||||
|
||||
|
||||
.l-main-section#seed
|
||||
:marked
|
||||
## What's in the QuickStart example?
|
||||
|
||||
The <live-example name="quickstart">QuickStart example</live-example>
|
||||
contains the following core files:
|
||||
|
||||
+makeTabs(`
|
||||
quickstart/ts/app/app.component.ts,
|
||||
quickstart/ts/app/main.ts,
|
||||
quickstart/ts/index.html,
|
||||
quickstart/ts/styles.css,
|
||||
quickstart/dart/pubspec.yaml`,
|
||||
',,,quickstart,',
|
||||
`app/app.component.ts,
|
||||
app/main.ts,
|
||||
index.html,
|
||||
styles.css (excerpt),
|
||||
pubspec.yaml`)
|
||||
|
||||
:marked
|
||||
These files are organized as follows:
|
||||
|
||||
.filetree
|
||||
.file angular_quickstart
|
||||
.children
|
||||
.file lib
|
||||
.children
|
||||
.file lib
|
||||
.children
|
||||
.file app_component.dart
|
||||
.file pubspec.yaml
|
||||
.file web
|
||||
.children
|
||||
.file index.html
|
||||
.file main.dart
|
||||
.file styles.css
|
||||
.file app_component.dart
|
||||
.file web
|
||||
.children
|
||||
.file main.dart
|
||||
.file index.html
|
||||
.file styles.css
|
||||
.file pubspec.yaml
|
||||
|
||||
block install-tooling
|
||||
:marked
|
||||
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}
|
||||
table(width="100%")
|
||||
col(width="20%")
|
||||
col(width="80%")
|
||||
tr
|
||||
th File
|
||||
th Purpose
|
||||
tr
|
||||
td <code>lib/app_component.dart</code>
|
||||
td
|
||||
:marked
|
||||
Defines `<my-app>`, the **root** component of what will become a tree of nested components
|
||||
as the application evolves.
|
||||
tr
|
||||
td <code>web/main.dart</code>
|
||||
td
|
||||
:marked
|
||||
Bootstraps the application to run in the browser.
|
||||
tr
|
||||
td <code>web/index.html</code>
|
||||
td
|
||||
:marked
|
||||
Contains the `<my-app>` tag in its `<body>`.
|
||||
This is where the app lives!
|
||||
tr
|
||||
td <code>web/styles.css</code>
|
||||
td
|
||||
:marked
|
||||
A set of styles used throughout the app.
|
||||
tr
|
||||
td <code>pubspec.yaml</code>
|
||||
td
|
||||
:marked
|
||||
The file that describes this Dart package (the app) and its dependencies.
|
||||
For example, it specifies the **angular2** and **browser** packages as dependencies,
|
||||
as well as the **angular2** transformer.
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
Install the **[Dart SDK](https://www.dartlang.org/downloads/)**,
|
||||
if not already on your machine, and any tools you like to use with Dart.
|
||||
The Dart SDK includes tools such as **[pub][pub]**, the Dart package manager.
|
||||
If you don't have a favorite Dart editor already, try
|
||||
[WebStorm][WS], which comes with a Dart plugin.
|
||||
You can also download [Dart plugins for other IDEs and editors][DT].
|
||||
### Next step
|
||||
|
||||
[WS]: https://confluence.jetbrains.com/display/WI/Getting+started+with+Dart
|
||||
[DT]: https://www.dartlang.org/tools/
|
||||
[pub]: https://www.dartlang.org/tools/pub/
|
||||
If you're new to Angular, we recommend staying on the [learning path](learning-angular.html).
|
||||
|
|
|
|||
Loading…
Reference in New Issue