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 - Install Angular ########################## .l-main-section h2#section-install-angular 1. Install Angular p. In a new directory, create a pubspec.yaml file. Add angular2 and browser as dependencies: // [PENDING: if the transformer isn't working in time, // remove it and use reflection in Dartium instead. // Perhaps require Dart 1.9.] pre.prettyprint.linenums 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 code. > pub get Resolving dependencies... (7.3s) + angular2 2.0.0-alpha.6 + browser 0.10.0+2 + path 1.3.3 + stack_trace 1.2.3 Changed 4 dependencies! // PENDING: Create template? Link to pub/pubspec docs? // Is browser really needed? // TODO: make this an invisible note. // 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. Edit web/main.dart to import the angular2 library and (for now) two reflection libraries: pre.prettyprint.linenums 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; // STEP 3 - Define a component ########################## .l-main-section h2#section-angular-create-account 3. Define a component p. A component is a custom HTML element. In this step, you create a component that has the tag <app>. The Dart code for a component consists of a class with annotations that describe the component. p. Update web/main.dart to add the following code, which defines the app component: pre.prettyprint.linenums code. @Component( selector: 'app' ) @Template( inline: '<h1>Hello {{ name }}</h1>' ) class AppComponent { String name = 'Alice'; } // TODO: Change or omit line numbers. .l-sub-section h3 Annotations p. The @Component annotation defines the HTML tag for the component. The selector property specifies the tag. The selector property is a CSS selector. // [PENDING: that last paragraph needs work!] p. The @Template annotation defines the template to apply to the component. This component uses an inline template, but external templates are available as well. To use an external template, specify a url property and give it the path to the HTML file. pre.prettyprint.linenums code. @Component( selector: 'app' ) @Template( inline: '<h1>Hello {{ name }}</h1>' ) p. The annotations above specify an HTML tag of <app></app> and a template of <h1>Hello {{ name }}</h1>. // TODO: In the preceding paragraph, that should be rendered as {{ name }}, like in the listing. .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 ({{ }}). The body of the constructor assigns "Alice" to the name property. When the template renders, Alice appears instead of {{ name }}. // [PENDING: Do we really want to use the term "component controller"? // If so, set it up beforehand. // In the original text, what does "the backing" mean, and is it // important that we keep it?] pre.prettyprint.linenums code. class AppComponent { String name = 'Alice'; } // STEP 4 - Bootstrap ########################## .l-main-section h2#section-transpile 4. Bootstrap p. At the bottom of web/main.dart, add a main() function that calls Angular's bootstrap() function. The argument to bootstrap() is the name of the app class you defined above. p. For now, you also need to set the value of reflector.reflectionCapabilities. pre.prettyprint.linenums code. main() { // Temporarily needed. reflector.reflectionCapabilities = new ReflectionCapabilities(); bootstrap(AppComponent); } // [PENDING: change/remove line numbers. They should start at 12.] // 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 app component: pre.prettyprint.linenums code. <!doctype html> <html> <head> <title>Angular 2 Quickstart</title> </head> <body> <app></app> <script type="application/dart" src="main.dart"></script> <script src="packages/browser/dart.js"></script> </body> </html> // [PENDING: When I select a bunch of code, it looks like I select the line #s too, making me fear that they'll get copied. But pasting doesn't include them. Can we fix that?] // 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. // TODO: screenshot? p. Another option is to build and serve the app using pub serve, and then to run it by visiting http://localhost:8080/index.html in a browser. The JavaScript generated using this option is large, for now; it'll be much better soon, when a transformer becomes available to convert the reflection code from dynamic to static code. // [PENDING: Update when transformer is working!] // WHAT'S NEXT... ########################## .l-main-section h2#section-transpile Great Job! Next Step... p. Learn some template syntax for extra credit. // [PENDING: really?]