Add components to the AngularDart template, and generally improve the…

… template (#357)

* Add material components to AngularDart template
* Clean up the template
* Add the two most common meta tags:
  * charset for server compatibility (<1% issue)
  * viewport for better scaling on mobile
* Tighten dependencies
* Apply dartfmt and sort
* Apply dartfmt to annotations, remove unused attribute
* Show more best practices:
  * Put anything non-trivial into its own component.
  * Components in separate directories.
  * Use #references and @ViewChild to simplify code.
  * Call components’ functions.
  * Put CSS as close to its use as possible.
  * Use trailing commas to simplify moving code around.

lib/generators/web_angular_data.dart

@@ -22,39 +22,86 @@ anNvbgoKIyBEaXJlY3RvcnkgY3JlYXRlZCBieSBkYXJ0ZG9jCmRvYy9hcGkvCgojIEpldEJyYWlu
 cyBJREVzCi5pZGVhLwoqLmltbAoqLmlwcgoqLml3cwo=""",
   "lib/app_component.css",
   "text",
-  """Omhvc3QgewogICAgZm9udC1mYW1pbHk6IFJvYm90bywgSGVsdmV0aWNhLCBBcmlhbCwgc2Fucy1z
-ZXJpZjsKfQ==""",
+  """Omhvc3QgewogICAgLyogVGhpcyBpcyBlcXVpdmFsZW50IG9mIHRoZSAnYm9keScgc2VsZWN0b3Ig
+b2YgYSBwYWdlLiAqLwp9CgouYmx1ZSB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzIxOTZGMzsKICBj
+b2xvcjogd2hpdGU7Cn0=""",
   "lib/app_component.dart",
   "text",
   """Ly8gQ29weXJpZ2h0IChjKSBfX3llYXJfXywgX19hdXRob3JfXy4gQWxsIHJpZ2h0cyByZXNlcnZl
 ZC4gVXNlIG9mIHRoaXMgc291cmNlIGNvZGUKLy8gaXMgZ292ZXJuZWQgYnkgYSBCU0Qtc3R5bGUg
 bGljZW5zZSB0aGF0IGNhbiBiZSBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlLgoKaW1wb3J0ICdw
-YWNrYWdlOmFuZ3VsYXIyL2NvcmUuZGFydCc7CgpAQ29tcG9uZW50KAogICAgc2VsZWN0b3I6ICdt
-eS1hcHAnLAogICAgc3R5bGVVcmxzOiBjb25zdCBbJ2FwcF9jb21wb25lbnQuY3NzJ10sCiAgICB0
-ZW1wbGF0ZVVybDogJ2FwcF9jb21wb25lbnQuaHRtbCcpCmNsYXNzIEFwcENvbXBvbmVudCB7fQo=""",
+YWNrYWdlOmFuZ3VsYXIyL2NvcmUuZGFydCc7CmltcG9ydCAncGFja2FnZTphbmd1bGFyMl9jb21w
+b25lbnRzL2FuZ3VsYXIyX2NvbXBvbmVudHMuZGFydCc7CgppbXBvcnQgJ3BhY2thZ2U6X19wcm9q
+ZWN0TmFtZV9fL2hlbGxvX2RpYWxvZy9oZWxsb19kaWFsb2cuZGFydCc7CgpAQ29tcG9uZW50KAog
+IHNlbGVjdG9yOiAnbXktYXBwJywKICBzdHlsZVVybHM6IGNvbnN0IFsnYXBwX2NvbXBvbmVudC5j
+c3MnXSwKICB0ZW1wbGF0ZVVybDogJ2FwcF9jb21wb25lbnQuaHRtbCcsCiAgZGlyZWN0aXZlczog
+Y29uc3QgW21hdGVyaWFsRGlyZWN0aXZlcywgSGVsbG9EaWFsb2ddLAogIHByb3ZpZGVyczogY29u
+c3QgW21hdGVyaWFsUHJvdmlkZXJzXSwKKQpjbGFzcyBBcHBDb21wb25lbnQgewogIC8vIE5vdGhp
+bmcgaGVyZSB5ZXQuIEFsbCBsb2dpYyBpcyBpbiBIZWxsb0RpYWxvZy4KfQo=""",
   "lib/app_component.html",
   "text",
-  "PGgxPk15IEZpcnN0IEFuZ3VsYXIgMiBBcHA8L2gxPgo=",
+  """PGgxPk15IEZpcnN0IEFuZ3VsYXJEYXJ0IEFwcDwvaDE+Cgo8bWF0ZXJpYWwtaW5wdXQgI215SW5w
+dXQKICAgICAgICAgICAgICAgIGxhYmVsPSJZb3VyIG5hbWUiCiAgICAgICAgICAgICAgICBmbG9h
+dGluZ0xhYmVsCiAgICAgICAgICAgICAgICBhdXRvRm9jdXM+CjwvbWF0ZXJpYWwtaW5wdXQ+Cgo8
+bWF0ZXJpYWwtYnV0dG9uIHJhaXNlZCAKICAgICAgICAgICAgICAgICAodHJpZ2dlcik9Im15RGlh
+bG9nLm9wZW4oKSIKICAgICAgICAgICAgICAgICBjbGFzcz0iYmx1ZSI+CiAgICBTYXkgSGVsbG8K
+PC9tYXRlcmlhbC1idXR0b24+Cgo8aGVsbG8tZGlhbG9nICNteURpYWxvZwogICAgICAgICAgICAg
+W25hbWVdPSJteUlucHV0LmlucHV0VGV4dCI+CjwvaGVsbG8tZGlhbG9nPg==""",
+  "lib/hello_dialog/hello_dialog.css",
+  "text",
+  "YSB7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwp9",
+  "lib/hello_dialog/hello_dialog.dart",
+  "text",
+  """Ly8gQ29weXJpZ2h0IChjKSBfX3llYXJfXywgX19hdXRob3JfXy4gQWxsIHJpZ2h0cyByZXNlcnZl
+ZC4gVXNlIG9mIHRoaXMgc291cmNlIGNvZGUKLy8gaXMgZ292ZXJuZWQgYnkgYSBCU0Qtc3R5bGUg
+bGljZW5zZSB0aGF0IGNhbiBiZSBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlLgoKaW1wb3J0ICdw
+YWNrYWdlOmFuZ3VsYXIyL2NvcmUuZGFydCc7CmltcG9ydCAncGFja2FnZTphbmd1bGFyMl9jb21w
+b25lbnRzL2FuZ3VsYXIyX2NvbXBvbmVudHMuZGFydCc7CgpAQ29tcG9uZW50KAogIHNlbGVjdG9y
+OiAnaGVsbG8tZGlhbG9nJywKICBzdHlsZVVybHM6IGNvbnN0IFsnaGVsbG9fZGlhbG9nLmNzcydd
+LAogIHRlbXBsYXRlVXJsOiAnaGVsbG9fZGlhbG9nLmh0bWwnLAogIGRpcmVjdGl2ZXM6IGNvbnN0
+IFttYXRlcmlhbERpcmVjdGl2ZXNdLAogIHByb3ZpZGVyczogY29uc3QgW21hdGVyaWFsUHJvdmlk
+ZXJzXSwKKQpjbGFzcyBIZWxsb0RpYWxvZyB7CiAgLy8vIE1vZGFsIGNvbXBvbmVudCB0aGF0IGhv
+c3RzIHRoZSBpbm5lciBNYXRlcmlhbERpYWxvZyBpbiBhIGNlbnRlcmVkIG92ZXJsYXkuCiAgQFZp
+ZXdDaGlsZCgnd3JhcHBpbmdNb2RhbCcpCiAgTW9kYWxDb21wb25lbnQgd3JhcHBpbmdNb2RhbDsK
+CiAgLy8vIE5hbWUgb2YgdXNlci4KICBASW5wdXQoKQogIFN0cmluZyBuYW1lID0gIiI7CgogIC8v
+LyBPcGVucyB0aGUgZGlhbG9nLgogIHZvaWQgb3BlbigpIHsKICAgIHdyYXBwaW5nTW9kYWwub3Bl
+bigpOwogIH0KfQo=""",
+  "lib/hello_dialog/hello_dialog.html",
+  "text",
+  """PG1vZGFsICN3cmFwcGluZ01vZGFsPgogIDxtYXRlcmlhbC1kaWFsb2c+CgogICAgPGgzIGhlYWRl
+cj4KICAgICAgICBIZWxsbywge3sgbmFtZSA9PSAnJyA/ICdteXN0ZXJpb3VzIHN0cmFuZ2VyJyA6
+IG5hbWUgfX0hCiAgICA8L2gzPgoKICAgIDxwPgogICAgICBDb250aW51ZSB5b3VyIGpvdXJuZXkg
+b24KICAgICAgPGEgaHJlZj0iaHR0cHM6Ly93ZWJkZXYuZGFydGxhbmcub3JnL2FuZ3VsYXIiPndl
+YmRldi5kYXJ0bGFuZy5vcmcvYW5ndWxhcjwvYT4uCiAgICA8L3A+CgogICAgPGRpdiBmb290ZXI+
+CiAgICAgIDxtYXRlcmlhbC1idXR0b24gYXV0b0ZvY3VzCiAgICAgICAgICAgICAgICAgICAgICAg
+Y2xlYXItc2l6ZQogICAgICAgICAgICAgICAgICAgICAgICh0cmlnZ2VyKT0id3JhcHBpbmdNb2Rh
+bC5jbG9zZSgpIj4KICAgICAgICBDbG9zZQogICAgICA8L21hdGVyaWFsLWJ1dHRvbj4KICAgIDwv
+ZGl2PgogIDwvbWF0ZXJpYWwtZGlhbG9nPgo8L21vZGFsPg==""",
   "pubspec.yaml",
   "text",
   """bmFtZTogX19wcm9qZWN0TmFtZV9fCmRlc2NyaXB0aW9uOiBBIERhcnQgYXBwIHRoYXQgdXNlcyBB
 bmd1bGFyIDIKdmVyc2lvbjogMC4wLjEKZW52aXJvbm1lbnQ6CiAgc2RrOiAnPj0xLjE5LjAgPDIu
-MC4wJwpkZXBlbmRlbmNpZXM6CiAgYW5ndWxhcjI6IF4yLjIuMApkZXZfZGVwZW5kZW5jaWVzOgog
-IGJyb3dzZXI6IF4wLjEwLjAKICBkYXJ0X3RvX2pzX3NjcmlwdF9yZXdyaXRlcjogXjEuMC4xCnRy
-YW5zZm9ybWVyczoKLSBhbmd1bGFyMjoKICAgIHBsYXRmb3JtX2RpcmVjdGl2ZXM6CiAgICAtICdw
-YWNrYWdlOmFuZ3VsYXIyL2NvbW1vbi5kYXJ0I0NPTU1PTl9ESVJFQ1RJVkVTJwogICAgcGxhdGZv
-cm1fcGlwZXM6CiAgICAtICdwYWNrYWdlOmFuZ3VsYXIyL2NvbW1vbi5kYXJ0I0NPTU1PTl9QSVBF
-UycKICAgIGVudHJ5X3BvaW50czogd2ViL21haW4uZGFydAotIGRhcnRfdG9fanNfc2NyaXB0X3Jl
-d3JpdGVyCg==""",
+MC4wJwpkZXBlbmRlbmNpZXM6CiAgYW5ndWxhcjI6ICc+PTIuMi4wIDwyLjMuMCcKICBhbmd1bGFy
+Ml9jb21wb25lbnRzOiAnPj0wLjIuMiA8MC4zLjAnCmRldl9kZXBlbmRlbmNpZXM6CiAgYnJvd3Nl
+cjogXjAuMTAuMAogIGRhcnRfdG9fanNfc2NyaXB0X3Jld3JpdGVyOiBeMS4wLjEKdHJhbnNmb3Jt
+ZXJzOgotIGFuZ3VsYXIyOgogICAgcGxhdGZvcm1fZGlyZWN0aXZlczoKICAgIC0gJ3BhY2thZ2U6
+YW5ndWxhcjIvY29tbW9uLmRhcnQjQ09NTU9OX0RJUkVDVElWRVMnCiAgICBwbGF0Zm9ybV9waXBl
+czoKICAgIC0gJ3BhY2thZ2U6YW5ndWxhcjIvY29tbW9uLmRhcnQjQ09NTU9OX1BJUEVTJwogICAg
+ZW50cnlfcG9pbnRzOiB3ZWIvbWFpbi5kYXJ0Ci0gZGFydF90b19qc19zY3JpcHRfcmV3cml0ZXIK""",
   "web/index.html",
   "text",
   """PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPl9fcHJvamVjdE5hbWVf
 XzwvdGl0bGU+CiAgICA8bWV0YSBjaGFyc2V0PSJ1dGYtOCI+CiAgICA8bWV0YSBuYW1lPSJ2aWV3
 cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEiPgoKICAg
 IDxzY3JpcHQgZGVmZXIgc3JjPSJtYWluLmRhcnQiIHR5cGU9ImFwcGxpY2F0aW9uL2RhcnQiPjwv
 c2NyaXB0PgogICAgPHNjcmlwdCBkZWZlciBzcmM9InBhY2thZ2VzL2Jyb3dzZXIvZGFydC5qcyI+
-PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPG15LWFwcD5Mb2FkaW5nLi4uPC9teS1h
-cHA+CiAgPC9ib2R5Pgo8L2h0bWw+Cg==""",
+PC9zY3JpcHQ+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIHR5cGU9InRleHQvY3NzIiBocmVm
+PSJodHRwczovL2ZvbnRzLmdvb2dsZWFwaXMuY29tL2ljb24/ZmFtaWx5PU1hdGVyaWFsK0ljb25z
+Ij4KICAgIDxzdHlsZT4KICAgICAgYm9keSB7CiAgICAgICAgbWF4LXdpZHRoOiA2MDBweDsKICAg
+ICAgICBtYXJnaW46IDAgYXV0bzsKICAgICAgICBwYWRkaW5nOiA1dnc7CiAgICAgICAgZm9udC1m
+YW1pbHk6IFJvYm90bywgSGVsdmV0aWNhLCBBcmlhbCwgc2Fucy1zZXJpZjsKICAgICAgfQogICAg
+PC9zdHlsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8bXktYXBwPkxvYWRpbmcuLi48L215LWFw
+cD4KICA8L2JvZHk+CjwvaHRtbD4K""",
   "web/main.dart",
   "text",
   """Ly8gQ29weXJpZ2h0IChjKSBfX3llYXJfXywgX19hdXRob3JfXy4gQWxsIHJpZ2h0cyByZXNlcnZl

templates/web-angular/lib/app_component.css

@@ -1,3 +1,8 @@
 :host {
-    font-family: Roboto, Helvetica, Arial, sans-serif;
+    /* This is equivalent of the 'body' selector of a page. */
+}
+
+.blue {
+  background-color: #2196F3;
+  color: white;
 }

templates/web-angular/lib/app_component.dart

@@ -2,9 +2,17 @@
 // is governed by a BSD-style license that can be found in the LICENSE file.
 
 import 'package:angular2/core.dart';
+import 'package:angular2_components/angular2_components.dart';
+
+import 'package:__projectName__/hello_dialog/hello_dialog.dart';
 
 @Component(
-    selector: 'my-app',
-    styleUrls: const ['app_component.css'],
-    templateUrl: 'app_component.html')
-class AppComponent {}
+  selector: 'my-app',
+  styleUrls: const ['app_component.css'],
+  templateUrl: 'app_component.html',
+  directives: const [materialDirectives, HelloDialog],
+  providers: const [materialProviders],
+)
+class AppComponent {
+  // Nothing here yet. All logic is in HelloDialog.
+}

templates/web-angular/lib/app_component.html

@@ -1 +1,17 @@
-<h1>My First Angular 2 App</h1>
+<h1>My First AngularDart App</h1>
+
+<material-input #myInput
+                label="Your name"
+                floatingLabel
+                autoFocus>
+</material-input>
+
+<material-button raised 
+                 (trigger)="myDialog.open()"
+                 class="blue">
+    Say Hello
+</material-button>
+
+<hello-dialog #myDialog
+             [name]="myInput.inputText">
+</hello-dialog>

templates/web-angular/lib/hello_dialog/hello_dialog.css

@@ -0,0 +1,3 @@
+a {
+  text-decoration: none;
+}

templates/web-angular/lib/hello_dialog/hello_dialog.dart

@@ -0,0 +1,27 @@
+// Copyright (c) __year__, __author__. All rights reserved. Use of this source code
+// is governed by a BSD-style license that can be found in the LICENSE file.
+
+import 'package:angular2/core.dart';
+import 'package:angular2_components/angular2_components.dart';
+
+@Component(
+  selector: 'hello-dialog',
+  styleUrls: const ['hello_dialog.css'],
+  templateUrl: 'hello_dialog.html',
+  directives: const [materialDirectives],
+  providers: const [materialProviders],
+)
+class HelloDialog {
+  /// Modal component that hosts the inner MaterialDialog in a centered overlay.
+  @ViewChild('wrappingModal')
+  ModalComponent wrappingModal;
+
+  /// Name of user.
+  @Input()
+  String name = "";
+
+  /// Opens the dialog.
+  void open() {
+    wrappingModal.open();
+  }
+}

templates/web-angular/lib/hello_dialog/hello_dialog.html

@@ -0,0 +1,21 @@
+<modal #wrappingModal>
+  <material-dialog>
+
+    <h3 header>
+        Hello, {{ name == '' ? 'mysterious stranger' : name }}!
+    </h3>
+
+    <p>
+      Continue your journey on
+      <a href="https://webdev.dartlang.org/angular">webdev.dartlang.org/angular</a>.
+    </p>
+
+    <div footer>
+      <material-button autoFocus
+                       clear-size
+                       (trigger)="wrappingModal.close()">
+        Close
+      </material-button>
+    </div>
+  </material-dialog>
+</modal>

templates/web-angular/pubspec.yaml

@@ -4,7 +4,8 @@ version: 0.0.1
 environment:
   sdk: '>=1.19.0 <2.0.0'
 dependencies:
-  angular2: ^2.2.0
+  angular2: '>=2.2.0 <2.3.0'
+  angular2_components: '>=0.2.2 <0.3.0'
 dev_dependencies:
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1

templates/web-angular/web/index.html

@@ -7,6 +7,15 @@
 
     <script defer src="main.dart" type="application/dart"></script>
     <script defer src="packages/browser/dart.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <style>
+      body {
+        max-width: 600px;
+        margin: 0 auto;
+        padding: 5vw;
+        font-family: Roboto, Helvetica, Arial, sans-serif;
+      }
+    </style>
   </head>
   <body>
     <my-app>Loading...</my-app>