162 lines
4.8 KiB
Plaintext
162 lines
4.8 KiB
Plaintext
include ../_util-fns
|
|
|
|
a#develop-locally
|
|
:marked
|
|
Setting up a new Angular project is quick and easy,
|
|
using everyday Dart tools.
|
|
|
|
.l-main-section#sdk
|
|
:marked
|
|
## Prerequisites: Dart SDK & Dartium
|
|
|
|
If you don't already have the **Dart SDK** and **Dartium**, get them.
|
|
We recommend using the WebStorm IDE, as well.
|
|
|
|
[Get Started](https://webdev.dartlang.org/guides/get-started) tells you how to get the tools.
|
|
|
|
|
|
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 app_component.dart
|
|
.file web
|
|
.children
|
|
.file main.dart
|
|
.file index.html
|
|
.file styles.css
|
|
.file pubspec.yaml
|
|
|
|
: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
|
|
### Next step
|
|
|
|
If you're new to Angular, we recommend staying on the [learning path](learning-angular.html).
|