diff --git a/lib/app_component.dart b/lib/app_component.dart
new file mode 100644
index 0000000..c5d72e2
--- /dev/null
+++ b/lib/app_component.dart
@@ -0,0 +1,21 @@
+import 'package:angular/angular.dart';
+
+@Component(
+ selector: 'my-app',
+ template: '''
+ Hello {{name}}
+
+
+
+
+
+
+
+
+
+
+ ''',
+)
+class AppComponent {
+ var name = 'Darth Marty';
+}
diff --git a/pubspec.yaml b/pubspec.yaml
index 2fe07bc..9dc2faa 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -7,10 +7,12 @@ homepage: https://www.martyoehme.org/
environment:
sdk: '>=2.0.0-dev.66.0 <2.0.0'
-#dependencies:
-# path: ^1.4.1
+dependencies:
+ angular: ^5.0.0-beta
dev_dependencies:
+ angular_test: ^2.0.0-beta
build_runner: ^0.9.0
+ build_test: ^0.10.2
build_web_compilers: ^0.4.0
- test: ^1.2.0
+ test: ^1.0.0
diff --git a/test/app_test.dart b/test/app_test.dart
new file mode 100644
index 0000000..3e0614e
--- /dev/null
+++ b/test/app_test.dart
@@ -0,0 +1,32 @@
+@TestOn('browser')
+
+import 'package:rules_of_living/app_component.dart';
+import 'package:rules_of_living/app_component.template.dart' as ng;
+import 'package:angular_test/angular_test.dart';
+import 'package:test/test.dart';
+
+void main() {
+ final testBed =
+ NgTestBed.forComponent(ng.AppComponentNgFactory);
+ NgTestFixture fixture;
+
+ setUp(() async {
+ fixture = await testBed.create();
+ });
+
+ tearDown(disposeAnyRunningTest);
+
+ test('Default greeting', () {
+ expect(fixture.text, 'Hello Angular');
+ });
+
+ test('Greet world', () async {
+ await fixture.update((c) => c.name = 'World');
+ expect(fixture.text, 'Hello World');
+ });
+
+ test('Greet world HTML', () {
+ final html = fixture.rootElement.innerHtml;
+ expect(html, 'Hello Angular
');
+ });
+}
diff --git a/web/favicon.png b/web/favicon.png
new file mode 100644
index 0000000..dd18702
Binary files /dev/null and b/web/favicon.png differ
diff --git a/web/index.html b/web/index.html
index 6b86c2d..36f2b5a 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,29 +1,28 @@
-
+
-
-
-
-
- rules_of_living
-
-
-
+
+
+ Hello Angular
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+ Loading...
+
diff --git a/web/main.dart b/web/main.dart
index 8d236aa..149766a 100644
--- a/web/main.dart
+++ b/web/main.dart
@@ -2,11 +2,15 @@ import 'dart:html' as html;
import 'package:rules_of_living/App.dart';
+import 'package:angular/angular.dart';
+import 'package:rules_of_living/app_component.template.dart' as ng;
html.CanvasElement el;
App engine;
void main() {
+ runApp(ng.AppComponentNgFactory);
+
el = new html.CanvasElement(width: 500, height: 500);
html.querySelector('#output').append(el);
engine = new App(el);
diff --git a/web/styles.css b/web/styles.css
index cc035c9..ef7a186 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -1,14 +1,117 @@
@import url(https://fonts.googleapis.com/css?family=Roboto);
+@import url(https://fonts.googleapis.com/css?family=Material+Icons);
-html, body {
- width: 100%;
- height: 100%;
- margin: 0;
+/* Master Styles */
+h1 {
+ color: #369;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 250%;
+}
+h2, h3 {
+ color: #444;
+ font-family: Arial, Helvetica, sans-serif;
+ font-weight: lighter;
+}
+body {
+ margin: 2em;
+}
+body, input[text], button {
+ color: #888;
+ font-family: Cambria, Georgia;
+}
+a {
+ cursor: pointer;
+ cursor: hand;
+}
+button {
+ font-family: Arial;
+ background-color: #eee;
+ border: none;
+ padding: 5px 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ cursor: hand;
+}
+button:hover {
+ background-color: #cfd8dc;
+}
+button:disabled {
+ background-color: #eee;
+ color: #aaa;
+ cursor: auto;
+}
+label {
+ padding-right: 0.5em;
+}
+/* Navigation link styles */
+nav a {
+ padding: 5px 10px;
+ text-decoration: none;
+ margin-right: 10px;
+ margin-top: 10px;
+ display: inline-block;
+ background-color: #eee;
+ border-radius: 4px;
+}
+nav a:visited, a:link {
+ color: #607D8B;
+}
+nav a:hover {
+ color: #039be5;
+ background-color: #CFD8DC;
+}
+nav a.active {
+ color: #039be5;
+}
+
+/* items class */
+.items {
+ margin: 0 0 2em 0;
+ list-style-type: none;
padding: 0;
- font-family: 'Roboto', sans-serif;
+ width: 24em;
}
-
-#output {
- padding: 20px;
- text-align: center;
+.items li {
+ cursor: pointer;
+ position: relative;
+ left: 0;
+ background-color: #EEE;
+ margin: .5em;
+ padding: .3em 0;
+ height: 1.6em;
+ border-radius: 4px;
+}
+.items li:hover {
+ color: #607D8B;
+ background-color: #DDD;
+ left: .1em;
+}
+.items li.selected {
+ background-color: #CFD8DC;
+ color: white;
+}
+.items li.selected:hover {
+ background-color: #BBD8DC;
+}
+.items .text {
+ position: relative;
+ top: -3px;
+}
+.items .badge {
+ display: inline-block;
+ font-size: small;
+ color: white;
+ padding: 0.8em 0.7em 0 0.7em;
+ background-color: #607D8B;
+ line-height: 1em;
+ position: relative;
+ left: -1px;
+ top: -4px;
+ height: 1.8em;
+ margin-right: .8em;
+ border-radius: 4px 0 0 4px;
+}
+/* everywhere else */
+* {
+ font-family: Arial, Helvetica, sans-serif;
}