diff --git a/public/docs/dart/latest/guide/_data.json b/public/docs/dart/latest/guide/_data.json index b9048fd240..f89e2eee58 100644 --- a/public/docs/dart/latest/guide/_data.json +++ b/public/docs/dart/latest/guide/_data.json @@ -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 diff --git a/public/docs/dart/latest/guide/images/create-ng2-project.png b/public/docs/dart/latest/guide/images/create-ng2-project.png new file mode 100644 index 0000000000..9310647a8e Binary files /dev/null and b/public/docs/dart/latest/guide/images/create-ng2-project.png differ diff --git a/public/docs/dart/latest/guide/setup.jade b/public/docs/dart/latest/guide/setup.jade index 95da8838da..b845550f30 100644 --- a/public/docs/dart/latest/guide/setup.jade +++ b/public/docs/dart/latest/guide/setup.jade @@ -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 QuickStart project 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. +
+ The form should look similar to the following: +
+ A screenshot of the New Project dialog, with the specified selections + 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: +
+ `pub global activate stagehand` + 1. Create a directory for your project: +
+ `mkdir angular_quickstart; cd angular_quickstart` + 1. Use Stagehand with the appropriate template to create a skeleton app: +
+ `stagehand web-angular-quickstart` +
+ **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:
+ `pub get` + 1. Run the app:
+ `pub serve` + + +.l-main-section#seed +:marked + ## What's in the QuickStart example? + + The QuickStart 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 lib/app_component.dart + td + :marked + Defines ``, the **root** component of what will become a tree of nested components + as the application evolves. + tr + td web/main.dart + td + :marked + Bootstraps the application to run in the browser. + tr + td web/index.html + td + :marked + Contains the `` tag in its ``. + This is where the app lives! + tr + td web/styles.css + td + :marked + A set of styles used throughout the app. + tr + td pubspec.yaml + 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).