p. Angular 2 is currently in Alpha Preview. We recommend using Angular for Dart for production applications. p. These instructions assume that you already have the Dart SDK and any tools you like to use with Dart. If not, go download Dart. Then return here. // STEP 1 - Create a project ########################## .l-main-section h2#section-install-angular 1. Create a project p. Create a new directory, and put a file named pubspec.yaml in it. pre.prettyprint code. > mkdir hello_world > cd hello_world > vim pubspec.yaml # Use your favorite editor! p. In pubspec.yaml, add the angular2 and browser packages as dependencies: pre.prettyprint.linenums.lang-basic code. name: hello_world version: 0.0.1 dependencies: angular2: ">=2.0.0-alpha.6 <3.0.0" browser: any p. In the same directory, run pub get to install the angular2 and browser packages (along with the packages they depend on): pre.prettyprint.lang-basic code. > pub get Resolving dependencies... (2.7s) + analyzer 0.24.1 (0.25.0-dev.3 available) ... more messages ... Changed 21 dependencies! Precompiling dependencies... Loading source assets... Precompiled dart_style. // PENDING: Create template? Link to pub/pubspec docs? // Is browser really needed? .alert.is-helpful. Depending on your version of Dart and the latest version of angular2, your messages are probably going to be different from what's shown above. That's fine. // STEP 2 - Import Angular ########################## .l-main-section h2#section-transpile 2. Import Angular p. Still in the same directory, create a web directory. Create a file under web named main.dart. pre.prettyprint code. > mkdir web > vim web/main.dart # Use your favorite editor! p. Edit web/main.dart to import the angular2 library and (for now) two reflection libraries: // pre.prettyprint.linenums pre.prettyprint code. import 'package:angular2/angular2.dart'; // These imports will go away soon: import 'package:angular2/src/reflection/reflection.dart' show reflector; import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities; // [PENDING: add line numbers once we can specify where they start] // STEP 3 - Define a component ########################## .l-main-section h2#section-angular-create-account 3. Define a component p. Update web/main.dart, adding the following code after the imports: pre.prettyprint code. @Component( selector: 'my-app' ) @Template( inline: '<h1>Hello {{ name }}</h1>' ) class AppComponent { String name = 'Alice'; } // [PENDING: add line numbers once we can specify where they start] p. The code you just added creates a component that has the tag <my-app>. The Dart code for an Angular component consists of a class (the component controller) that has @Component and @Template annotations. .l-sub-section h3 Annotations p. The @Component annotation defines the HTML tag for the component by specifying the component's CSS selector. p. The @Template annotation defines the HTML that represents the component. This component uses an inline template, but you can also have an external template. To use an external template, specify a url property and give it the path to the HTML file. pre.prettyprint code. @Component( selector: 'my-app' ) @Template( inline: '<h1>Hello {{ name }}</h1>' ) // [PENDING: add line numbers once we can specify where they start] p. The annotations above specify an HTML tag of <my-app> and a template of <h1>Hello {{ name }}</h1>. .l-sub-section h3 The template and the component controller p. A template has access to all the public properties and methods of its component controller. The template above binds to a name property through the double-mustache syntax ({{ ... }}). p. The component controller assigns "Alice" to the name property. When the template renders, "Hello Alice" appears instead of "Hello {{ name }}". pre.prettyprint code. class AppComponent { String name = 'Alice'; } // [PENDING: add line numbers once we can specify where they start] // STEP 4 - Bootstrap ########################## .l-main-section h2#section-transpile 4. Bootstrap p. Add the following code to the bottom of web/main.dart: pre.prettyprint code. main() { // Temporarily needed. reflector.reflectionCapabilities = new ReflectionCapabilities(); bootstrap(AppComponent); } // [PENDING: add line numbers once we can specify where they start] p. This code adds a main() function that calls Angular's bootstrap() function. The argument to bootstrap() is the name of the component class you defined above. p. Setting the value of reflector.reflectionCapabilities is a temporary workaround that you can remove once Angular's transformer is available. // STEP 5 - Declare the HTML ########################## .l-main-section h2#section-angular-create-account 5. Declare the HTML p. Create a file named web/index.html that contains the following code, which loads main.dart and instantiates the my-app component: pre.prettyprint.linenums code. <!doctype html> <html> <head> <title>Angular 2 Quickstart</title> </head> <body> <my-app></my-app> <script type="application/dart" src="main.dart"></script> <script src="packages/browser/dart.js"></script> </body> </html> // STEP 6 - Build and run ########################## .l-main-section h2#section-angular-run-app 6. Build and run your app p. You have several options for running your app. The quickest and easiest, for now, is to open your project in Dart Editor, right-click web/index.html, and choose Open in Dartium. This starts a web server and opens your app in an experimental browser that contains the Dart VM. // TODO: screenshot? embedded app? p. Another option is to build and serve the app using pub serve, and then run it by visiting http://localhost:8080 in a browser. Generating the JavaScript takes a few seconds when you first visit the page, and the generated JavaScript is currently large. The generated JavaScript will be smaller once Angular's transformer becomes available. // [PENDING: Update when transformer is working!] // WHAT'S NEXT... ########################## .l-main-section h2#section-transpile Great job! Next step... p. We plan to add a developer guide soon. Until then, check out Angular Resources. To learn more about Dart, go to dartlang.org.