diff --git a/public/docs/dart/latest/guide/displaying-data.jade b/public/docs/dart/latest/guide/displaying-data.jade index 4f3bdb8d70..cfb45fe19c 100644 --- a/public/docs/dart/latest/guide/displaying-data.jade +++ b/public/docs/dart/latest/guide/displaying-data.jade @@ -16,48 +16,44 @@ a web/index.html file, and a pubspec.yaml file: - .code-box - pre.prettyprint.lang-dart(data-name="dart") - code. - // web/main.dart - library displaying_data; + code-tabs + code-pane(language="dart" name="main.dart" format="linenums"). + // web/main.dart + library displaying_data; - import 'package:angular2/angular2.dart'; - import 'package:angular2/src/reflection/reflection.dart' show reflector; - import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities; + import 'package:angular2/angular2.dart'; + import 'package:angular2/src/reflection/reflection.dart' show reflector; + import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities; - part 'show_properties.dart'; + part 'show_properties.dart'; - main() { - reflector.reflectionCapabilities = new ReflectionCapabilities(); - bootstrap(DisplayComponent); - } - pre.prettyprint.lang-html(data-name="html") - code. - <!-- web/index.html --> - <!DOCTYPE html> - <html> - <head> - <link rel="stylesheet" href="style.css"> - </head> - <body> + main() { + reflector.reflectionCapabilities = new ReflectionCapabilities(); + bootstrap(DisplayComponent); + } + code-pane(language="html" name="index.html" format="linenums"). + <!-- web/index.html --> + <!DOCTYPE html> + <html> + <head> + <link rel="stylesheet" href="style.css"> + </head> + <body> - <display></display> - - <script type="application/dart" src="main.dart"></script> - <script src="packages/browser/dart.js"></script> - </body> - </html> - pre.prettyprint.lang-yaml(data-name="yaml") - code. - # pubspec.yaml - name: displaying_data - description: Dart version of Angular 2 example, Displaying Data - version: 0.0.1 - dependencies: - angular2: 2.0.0-alpha.22 - browser: any + <display></display> + <script type="application/dart" src="main.dart"></script> + <script src="packages/browser/dart.js"></script> + </body> + </html> + code-pane(language="yaml" name="pubspec.yaml" format="linenums"). + # pubspec.yaml + name: displaying_data + description: Dart version of Angular 2 example, Displaying Data + version: 0.0.1 + dependencies: + angular2: 2.0.0-alpha.22 + browser: any p. All of this code should look familiar from the previous page, except for the library and part statements @@ -78,30 +74,28 @@ named show_properties.dart, and add the following: - pre.prettyprint.lang-dart - code. - // web/show_properties.dart - part of displaying_data; + code-example(language="dart" format="linenums"). + // web/show_properties.dart + part of displaying_data; - @Component( - selector: 'display' - ) - @View( - template: ''' - <p>My name: {{ myName }}</p> - ''' - ) - class DisplayComponent { - String myName = 'Alice'; - } + @Component( + selector: 'display' + ) + @View( + template: ''' + <p>My name: {{ myName }}</p> + ''' + ) + class DisplayComponent { + String myName = 'Alice'; + } p. You've just defined a component that encompasses a view and controller for the app. The view defines a template: - pre.prettyprint.lang-html - code. - <p>My name: {{ myName }}</p> + code-example(language="html"). + <p>My name: {{ myName }}</p> p. Angular will automatically pull the value of myName and @@ -134,17 +128,15 @@ Add a second line to the template, so you can see Angular dynamically update content: - pre.prettyprint.lang-html - code. - <p>Current time: {{ time }}</p> + code-example(language="html"). + <p>Current time: {{ time }}</p> p. Then give the DisplayComponent a starting value for time and a call to update time via setInterval: - pre.prettyprint.lang-dart - code. + code-example(language="dart" format="linenums"). class DisplayComponent { String myName = 'Alice'; String time; @@ -166,44 +158,41 @@ h2#Create-an-array Display an iterable using *for p Moving up from a single value, create a property that's a list of values. - pre.prettyprint.lang-dart - code. - class DisplayComponent { - String myName = 'Alice'; - List<String> friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai']; - } + code-example(language="dart" format="linenums"). + class DisplayComponent { + String myName = 'Alice'; + List<String> friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai']; + } p. You can then use this list in your template with the for directive to create copies of DOM elements with one for each item in the list. - pre.prettyprint.lang-dart - code. - @View( - template: ''' - <p>My name: {{ myName }}</p> - <p>Friends:</p> - <ul> - <li *for="#name of friendNames"> - {{ name }} - </li> - </ul> - ''' - ) + code-example(language="dart" format="linenums"). + @View( + template: ''' + <p>My name: {{ myName }}</p> + <p>Friends:</p> + <ul> + <li *for="#name of friendNames"> + {{ name }} + </li> + </ul> + ''' + ) p. To make this work, you'll also need to add the Angular For directive used by the template to show_properties.dart, so that Angular knows to include it. Add For using the optional directives parameter, which contains a list of directives: - pre.prettyprint.lang-dart - code. - @View( - template: ''' - // ...HTML... - ''', - directives: const[For] - ) + code-example(language="dart" format="linenums"). + @View( + template: ''' + // ...HTML... + ''', + directives: const[For] + ) p Reload and you've got your list of friends! p. @@ -213,11 +202,10 @@ p Let's look at the few lines that do the work again: - pre.prettyprint.lang-html - code. - <li *for="#name of friendNames"> - {{ name }} - </li> + code-example(language="html" format="linenums"). + <li *for="#name of friendNames"> + {{ name }} + </li> p The way to read this is: ul @@ -241,14 +229,13 @@ Make a FriendsService class to implement a model containing a list of friends. We'll put this in a new friends_service.dart under web/. Here's what the class looks like: - pre.prettyprint.lang-dart - code. - // web/friends_service.dart - part of displaying_data; + code-example(language="dart" format="linenums"). + // web/friends_service.dart + part of displaying_data; - class FriendsService { - List<String> friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai']; - } + class FriendsService { + List<String> friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai']; + } .callout.is-helpful header Note @@ -260,29 +247,27 @@ First add a FriendsService parameter to the constructor. Then set friendNames to the names provided by the service. - pre.prettyprint.lang-dart - code. - // In web/show_properties.dart - class DisplayComponent { - String myName = 'Alice'; - List friendNames; + code-example(language="dart" format="linenums"). + // In web/show_properties.dart + class DisplayComponent { + String myName = 'Alice'; + List friendNames; - DisplayComponent(FriendsService friendsService) { - friendNames = friendsService.names; - } + DisplayComponent(FriendsService friendsService) { + friendNames = friendsService.names; } + } p. Next, make FriendsService available to dependency injection by adding an injectables parameter to DisplayComponent's @Component annotation: - pre.prettyprint.lang-dart - code. - @Component( - selector: 'display', - injectables: const[FriendsService] - ) + code-example(language="dart" format="linenums"). + @Component( + selector: 'display', + injectables: const[FriendsService] + ) .l-main-section h2#Conditionally-displaying-data-with-If Conditionally display data using *if @@ -292,17 +277,15 @@ p See it in action by adding a paragraph at the end of your template: - pre.prettyprint.lang-html - code. - <p *if="names.length > 3">You have many friends!</p> + code-example(language="html"). + <p *if="names.length > 3">You have many friends!</p> p. Also add If to the list of directives, so Angular knows to include it: - pre.prettyprint.lang-dart - code. - directives: const[For, If] + code-example(language="dart"). + directives: const[For, If] p. The list current has 5 items, so if you run the app you'll see the message congratulating you on your many friends. @@ -313,131 +296,124 @@ p Here's the final code. - .code-box - pre.prettyprint.lang-dart(data-name="show_properties.dart") - code. - // web/show_properties.dart - part of displaying_data; + code-tabs + code-pane(language="dart" name="show_properties.dart" format="linenums"). + // web/show_properties.dart + part of displaying_data; - @Component( - selector: 'display', - injectables: const[FriendsService] - ) - @View( - template: ''' - <p>My name: {{ myName }}</p> - <p>Friends:</p> - <ul> - <li *for="#name of friendNames"> - {{ name }} - </li> - </ul> - ''', - directives: const[For] - ) - class DisplayComponent { - String myName = 'Alice'; - List<String> friendNames; + @Component( + selector: 'display', + injectables: const[FriendsService] + ) + @View( + template: ''' + <p>My name: {{ myName }}</p> + <p>Friends:</p> + <ul> + <li *for="#name of friendNames"> + {{ name }} + </li> + </ul> + ''', + directives: const[For] + ) + class DisplayComponent { + String myName = 'Alice'; + List<String> friendNames; - DisplayComponent(FriendsService friendsService) { - friendNames = friendsService.names; - } + DisplayComponent(FriendsService friendsService) { + friendNames = friendsService.names; } - pre.prettyprint.lang-dart(data-name="friends_service.dart") - code. - // web/friends_service.dart - part of displaying_data; + } + code-pane(language="dart" name="friends_service.dart" format="linenums"). + // web/friends_service.dart + part of displaying_data; - class FriendsService { - List<String> names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai']; - } - pre.prettyprint.lang-dart(data-name="main.dart") - code. - // web/main.dart - library displaying_data; + class FriendsService { + List<String> names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai']; + } + code-pane(language="dart" name="main.dart" format="linenums"). + // web/main.dart + library displaying_data; - import 'dart:async'; + import 'dart:async'; - import 'package:angular2/angular2.dart'; - import 'package:angular2/src/reflection/reflection.dart' show reflector; - import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities; + import 'package:angular2/angular2.dart'; + import 'package:angular2/src/reflection/reflection.dart' show reflector; + import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities; - part 'show_properties.dart'; - part 'friends_service.dart'; + part 'show_properties.dart'; + part 'friends_service.dart'; - main() { - reflector.reflectionCapabilities = new ReflectionCapabilities(); - bootstrap(DisplayComponent); - } - pre.prettyprint.lang-html(data-name="html") - code. - <!-- web/index.html --> - <!DOCTYPE html> - <html> - <head> - <link rel="stylesheet" href="style.css"> - </head> - <body> + main() { + reflector.reflectionCapabilities = new ReflectionCapabilities(); + bootstrap(DisplayComponent); + } + code-pane(language="html" name="index.html" format="linenums"). + <!-- web/index.html --> + <!DOCTYPE html> + <html> + <head> + <link rel="stylesheet" href="style.css"> + </head> + <body> - <display></display> + <display></display> - <script type="application/dart" src="main.dart"></script> - <script src="packages/browser/dart.js"></script> - </body> - </html> - pre.prettyprint.lang-yaml(data-name="yaml") - code. - # pubspec.yaml - name: displaying_data - description: Dart version of Angular 2 example, Displaying Data - version: 0.0.1 - dependencies: - angular2: 2.0.0-alpha.22 - browser: any + <script type="application/dart" src="main.dart"></script> + <script src="packages/browser/dart.js"></script> + </body> + </html> + code-pane(language="yaml" name="pubspec.yaml" format="linenums"). + # pubspec.yaml + name: displaying_data + description: Dart version of Angular 2 example, Displaying Data + version: 0.0.1 + dependencies: + angular2: 2.0.0-alpha.22 + browser: any .l-main-section h2#section-explanations Explanations .l-sub-section h3 Using multiple Dart files in an Angular app - p. - Dart offers a few ways to implement an app in multiple files. - In this guide, all the code for each example is in a single library; - each Dart file under web is part of that library. + p. + Dart offers a few ways to implement an app in multiple files. + In this guide, all the code for each example is in a single library; + each Dart file under web is part of that library. - p. - To let the code in main.dart - use the code in show_properties.dart, - declare a library in main.dart. - Then make show_properties.dart part of that library. + p. + To let the code in main.dart + use the code in show_properties.dart, + declare a library in main.dart. + Then make show_properties.dart part of that library. - .code-box - pre.prettyprint.lang-dart(data-name="main library file") - code. - // web/main.dart - library displaying_data; - // imports... - part 'show_properties.dart'; - // Code goes here... - pre.prettyprint.lang-dart(data-name="additional library file") - code. - // web/show_properties.dart - part of displaying_data; - // Code goes here... + code-tabs + code-pane(language="dart" name="main.dart" format="linenums"). + // web/main.dart + library displaying_data; + // imports... + part 'show_properties.dart'; + // Code goes here... + code-pane(language="dart" name="show_properties.dar" format="linenums"). + // web/show_properties.dart + part of displaying_data; + // Code goes here... - p. - Another way to split Dart code is to - define multiple libraries in a single package. - The additional libraries go under a lib directory - parallel to web. - + p. + Another way to split Dart code is to + define multiple libraries in a single package. + The additional libraries go under a lib directory + parallel to web. + - p. - Yet another approach, often used when some of the code is highly reusable, - is to split the code into libraries in two or more packages. + p. + Yet another approach, often used when some of the code is highly reusable, + is to split the code into libraries in two or more packages. - p. - For more information on implementing Dart libraries, see - Libraries and visibility - in the - Dart language tour. + p. + For more information on implementing Dart libraries, see + Libraries and visibility + in the + Dart language tour. diff --git a/public/docs/dart/latest/guide/making-components.jade b/public/docs/dart/latest/guide/making-components.jade index 63418c0f04..aacb4a9697 100644 --- a/public/docs/dart/latest/guide/making-components.jade +++ b/public/docs/dart/latest/guide/making-components.jade @@ -10,41 +10,39 @@ you can create a parent component that uses a <child> component like so: - pre.prettyprint.linenums.lang-dart - code. - part of making_components; + code-example(language="dart" format="linenums"). + part of making_components; - @Component( - selector: 'parent' - ) - @View( - template: ''' - <h1>{{ message }}</h1> - <child></child> - ''', - directives: const[ChildComponent] - ) - class ParentComponent { - String message = "I'm the parent"; - } + @Component( + selector: 'parent' + ) + @View( + template: ''' + <h1>{{ message }}</h1> + <child></child> + ''', + directives: const[ChildComponent] + ) + class ParentComponent { + String message = "I'm the parent"; + } p You then just need to write the ChildComponent class to make it work: - pre.prettyprint.linenums.lang-dart - code. - part of making_components; + code-example(language="dart" format="linenums"). + part of making_components; - @Component( - selector: 'child' - ) - @View( - template: ''' - <p> {{ message }} </p> - ''' - ) - class ChildComponent { - String message = "I'm the child"; - } + @Component( + selector: 'child' + ) + @View( + template: ''' + <p> {{ message }} </p> + ''' + ) + class ChildComponent { + String message = "I'm the child"; + } //p. [TODO: Motivate communication between components with iterator example that passes index to the child] diff --git a/public/docs/dart/latest/guide/setup.jade b/public/docs/dart/latest/guide/setup.jade index 77fec51e0f..e301e6cad7 100644 --- a/public/docs/dart/latest/guide/setup.jade +++ b/public/docs/dart/latest/guide/setup.jade @@ -24,15 +24,14 @@ To use Angular2 in your app, include angular2 as a dependency in your app's pubspec.yaml file. For example: - pre.prettyprint.lang-yaml - code. - # pubspec.yaml - name: getting_started - description: Dart version of Angular 2 example, Getting Started - version: 0.0.1 - dependencies: - angular2: 2.0.0-alpha.22 - browser: any + code-example(language="yaml"). + # pubspec.yaml + name: getting_started + description: Dart version of Angular 2 example, Getting Started + version: 0.0.1 + dependencies: + angular2: 2.0.0-alpha.22 + browser: any p. Run pub get to download the packages your app depends on. (Dart-savvy editors and IDEs @@ -51,26 +50,25 @@ and creating a top-level main() function that calls Angular's bootstrap() function. - pre.prettyprint.lang-dart - code. - // web/main.dart - import 'package:angular2/angular2.dart'; - import 'package:angular2/src/reflection/reflection.dart' show reflector; - import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities; + code-example(language="javascript"). + // web/main.dart + import 'package:angular2/angular2.dart'; + import 'package:angular2/src/reflection/reflection.dart' show reflector; + import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities; - @Component( - selector: 'my-app' - ) - @View( - template: '<h1>My first Angular 2 App</h1>' - ) - class AppComponent { - } + @Component( + selector: 'my-app' + ) + @View( + template: '<h1>My first Angular 2 App</h1>' + ) + class AppComponent { + } - main() { - reflector.reflectionCapabilities = new ReflectionCapabilities(); - bootstrap(AppComponent); - } + main() { + reflector.reflectionCapabilities = new ReflectionCapabilities(); + bootstrap(AppComponent); + } .l-main-section h2#section-create-an-entry-point Create an HTML file @@ -79,20 +77,19 @@ Edit index.html to add a <my-app> element and call main.dart. - pre.prettyprint.lang-html - code. - <!-- web/index.html --> - <!DOCTYPE html> - <html> - <head> - <link rel="stylesheet" href="style.css"> - </head> - <body> - <my-app></my-app> - <script type="application/dart" src="main.dart"></script> - <script src="packages/browser/dart.js"></script> - </body> - </html> + code-example(language="html"). + <!-- web/index.html --> + <!DOCTYPE html> + <html> + <head> + <link rel="stylesheet" href="style.css"> + </head> + <body> + <my-app></my-app> + <script type="application/dart" src="main.dart"></script> + <script src="packages/browser/dart.js"></script> + </body> + </html> .l-main-section h2#section-run-it Run the app! diff --git a/public/docs/dart/latest/guide/user-input.jade b/public/docs/dart/latest/guide/user-input.jade index 9fba3e3182..2e3e718810 100644 --- a/public/docs/dart/latest/guide/user-input.jade +++ b/public/docs/dart/latest/guide/user-input.jade @@ -5,9 +5,8 @@ p. You can specify the event handler—a method in the component controller—like this: - pre.prettyprint.lang-html - code. - <input (keyup)="myControllerMethod()"> + code-example(language="html"). + <input (keyup)="myControllerMethod()"> p. As in previous examples, you can make element references available to other parts of the template as a local @@ -17,10 +16,9 @@ - pre.prettyprint.lang-html - code. - <input #myname (keyup)> - <p>{{myname.value}}</p> + code-example(language="html"). + <input #myname (keyup)> + <p>{{myname.value}}</p> p.text-body(ng-non-bindable). In that example, #myname creates a local variable in the template that @@ -46,16 +44,15 @@ Then add a method that adds new items to the list. - pre.prettyprint.lang-dart - code. - class TodoList { - List<String> todos = - ['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular']; + code-example(language="dart" format="linenums"). + class TodoList { + List<String> todos = + ['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular']; - addTodo(String todo) { - todos.add(todo); - } + addTodo(String todo) { + todos.add(todo); } + } .callout.is-helpful header Production Best Practice @@ -73,13 +70,12 @@ Using the *for iterator, create an <li> for each item in the todos list and set its text to the value. - pre.prettyprint.lang-html - code. - <ul> - <li *for="#todo of todos"> - {{ todo }} - </li> - </ul> + code-example(language="html" format="linenums"). + <ul> + <li *for="#todo of todos"> + {{ todo }} + </li> + </ul> .l-main-section h2#section-add-todos-to-the-list Add todos to the list via button click @@ -87,18 +83,16 @@ Now, add a text input and a button for users to add items to the list. As you saw above, you can create a local variable reference in your template with #varname. Call it #todotext here. - pre.prettyprint.lang-html - code. - <input #todotext> + code-example(language="html"). + <input #todotext> p. Specify the target of the click event binding as your controller's addTodo() method and pass it the value. Since you created a reference called todotext, you can get the value with todotext.value. - pre.prettyprint.lang-html - code. - <button (click)="addTodo(todotext.value)">Add Todo</button> + code-example(language="html"). + <button (click)="addTodo(todotext.value)">Add Todo</button> p. To make pressing Enter do something useful, @@ -107,13 +101,59 @@ dart:html, so be sure to import that library. - .code-box - pre.prettyprint.lang-dart(data-name="todo_list.dart") - code. - // In the template: - <input #todotext (keyup)="doneTyping(\$event)"> + code-tabs + code-pane(language="dart" name="todo_list.dart" format="linenums"). + // In the template: + <input #todotext (keyup)="doneTyping(\$event)"> + + // In the component controller class: + doneTyping(KeyboardEvent event) { + if (event.keyCode == KeyCode.ENTER) { + InputElement e = event.target; + addTodo(e.value); + e.value = null; + } + } + code-pane(language="dart" name="main.dart" format="linenums"). + library user_input; + + import 'dart:html'; + ... + +.l-main-section + h2#section-final-code Final code + + code-tabs + code-pane(language="dart" name="todo_list.dart" format="linenums"). + // web/todo_list.dart + part of user_input; + + @Component( + selector: 'todo-list' + ) + @View( + // Without r before ''' (a raw string), $event breaks Angular. + // An alternative to a raw string is to use \$event instead. + template: r''' + <ul> + <li *for="#todo of todos"> + {{ todo }} + </li> + </ul> + + <input #todotext (keyup)="doneTyping($event)"> + <button (click)="addTodo(todotext.value)">Add Todo</button> + ''', + directives: const[For] + ) + class TodoList { + List<String> todos = + ['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular']; + + addTodo(String todo) { + todos.add(todo); + } - // In the component controller class: doneTyping(KeyboardEvent event) { if (event.keyCode == KeyCode.ENTER) { InputElement e = event.target; @@ -121,96 +161,43 @@ e.value = null; } } - pre.prettyprint.lang-dart(data-name="main.dart") - code. - library user_input; + } + code-pane(language="dart" name="main.dart" format="linenums"). + // web/main.dart + library user_input; - import 'dart:html'; - ... + import 'dart:html'; + import 'package:angular2/angular2.dart'; + import 'package:angular2/src/reflection/reflection.dart' show reflector; + import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities; -.l-main-section - h2#section-final-code Final code + part 'todo_list.dart'; - .code-box - pre.prettyprint.lang-dart(data-name="todo_list.dart") - code. - // web/todo_list.dart - part of user_input; + main() { + reflector.reflectionCapabilities = new ReflectionCapabilities(); + bootstrap(TodoList); + } + code-pane(language="html" name="index.html" format="linenums"). + <!-- web/index.html --> + <!DOCTYPE html> + <html> + <head> + <link rel="stylesheet" href="style.css"> + </head> + <body> - @Component( - selector: 'todo-list' - ) - @View( - // Without r before ''' (a raw string), $event breaks Angular. - // An alternative to a raw string is to use \$event instead. - template: r''' - <ul> - <li *for="#todo of todos"> - {{ todo }} - </li> - </ul> + <todo-list></todo-list> - <input #todotext (keyup)="doneTyping($event)"> - <button (click)="addTodo(todotext.value)">Add Todo</button> - ''', - directives: const[For] - ) - class TodoList { - List<String> todos = - ['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular']; - - addTodo(String todo) { - todos.add(todo); - } - - doneTyping(KeyboardEvent event) { - if (event.keyCode == KeyCode.ENTER) { - InputElement e = event.target; - addTodo(e.value); - e.value = null; - } - } - } - pre.prettyprint.lang-dart(data-name="main.dart") - code. - // web/main.dart - library user_input; - - import 'dart:html'; - - import 'package:angular2/angular2.dart'; - import 'package:angular2/src/reflection/reflection.dart' show reflector; - import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities; - - part 'todo_list.dart'; - - main() { - reflector.reflectionCapabilities = new ReflectionCapabilities(); - bootstrap(TodoList); - } - pre.prettyprint.lang-html(data-name="html") - code. - <!-- web/index.html --> - <!DOCTYPE html> - <html> - <head> - <link rel="stylesheet" href="style.css"> - </head> - <body> - - <todo-list></todo-list> - - <script type="application/dart" src="main.dart"></script> - <script src="packages/browser/dart.js"></script> - </body> - </html> - pre.prettyprint.lang-yaml(data-name="yaml") - code. - # pubspec.yaml - name: user_input - description: Dart version of Angular 2 example, Responding to User Input - version: 0.0.1 - dependencies: - angular2: 2.0.0-alpha.22 - browser: any + <script type="application/dart" src="main.dart"></script> + <script src="packages/browser/dart.js"></script> + </body> + </html> + code-pane(language="yaml" name="pubspec.yaml" format="linenums"). + # pubspec.yaml + name: user_input + description: Dart version of Angular 2 example, Responding to User Input + version: 0.0.1 + dependencies: + angular2: 2.0.0-alpha.22 + browser: any