Setup for Development 4.0
For information on how to get these prerequisite tools, see Get Started:
- Dart SDK 1.24.3 or a compatible version
- WebStorm or your favorite IDE (recommended)
Create a starter project
The examples in this guide and tutorial are based on the angular-examples/quickstart GitHub project. You can get the project’s files by the following methods:
- Downloading them.
- Cloning the repo.
- Using Webstorms’s Git support.
Use WebStorm’s Git support
- Launch WebStorm.
- If you haven’t already done so, configure Dart support in WebStorm.
- From the welcome screen, choose Check out from Version Control > Git.
Alternatively, from the menu, choose VCS > Git > Clone…
A Clone Repository dialog appears.
- Fill out the following fields:
Git Repository URL:
- Parent Directory: (wherever you like to keep your practice code)
angular_tour_of_heroes(or any other valid package name)
- Git Repository URL:
- Click Clone.
- After the project opens, from the menu, choose VCS > Git > Branches…
A Git Branches popup appears.
- From the popup, under Remote Branches choose
origin/4.x > Checkout as new local branch.
- Open the new project.
- In the project view, double-click
- At the upper right of the editor view of
- Click Enable Dart support.
- Click Get dependencies.
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.
If you aren’t using WebStorm, you can use the following command in a terminal window:
$ pub get
Customize the project
Using WebStorm, or your favorite editor:
web/index.html, and replace the text of the
<title>element with a title suitable for your app. For example:
<title>Angular Tour of Heroes</title>.
pubspec.yaml, and update the description to suit your project. For example:
description: Tour of Heroes.
Optional. If you’d like to change your project’s name, then do a project-wide search-and-replace of the current value of the pubspec
angular_app) with a name suitable for your app — usually it will be the same as the directory name you chose earlier.
This project-global rename will touch:
Run the app
- In the project view, right-click
- Choose Run ‘index.html’.
Note: If a dialog says that Chromium wants to use your confidential information, click Deny. Dartium is not for general-purpose browsing, and Dartium doesn’t need your information to run this app.
You should see the following app in a Dartium browser window:
To run the app from the command line, use
pub to build and serve the app:
$ pub serve
Then, to view your app, visit localhost:8080.
Reload the app
Whenever you change the app, reload the browser window.
As you save updates to the code, the
pub tool detects changes and
serves the new app.