experiments
/
cellular-automata
1
0
Fork 0
Code Issues 29 Pull Requests Projects Releases Wiki Activity

Set up Basic AngularDart Structure

This commit is contained in:
Marty Oehme 2018-07-07 15:46:40 +02:00
parent fffcc3fbae
commit f3dfc3b368
7 changed files with 193 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
lib/app_component.dart Normal file
View File

@ -0,0 +1,21 @@
import 'package:angular/angular.dart';
@Component(
selector: 'my-app',
template: '''
<h1>Hello {{name}}</h1>
<div id="output">
<canvas id="canvas"></canvas>
</div>
<div id="controls">
<button id="run">Run</button>
<button id="step">Step</button>
<button id="reset">Reset</button>
<button id="random">Random</button>
<input id="speed" title="Speed" value="1">
</div>
''',
)
class AppComponent {
var name = 'Darth Marty';
}

8
pubspec.yaml
View File

@ -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

32
test/app_test.dart Normal file
View File

@ -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<AppComponent>(ng.AppComponentNgFactory);
NgTestFixture<AppComponent> 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, '<h1>Hello Angular</h1>');
});
}

BIN
web/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

39
web/index.html
View File

@ -1,29 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="scaffolded-by" content="https://github.com/google/stagehand">
<title>rules_of_living</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
<script defer src="main.dart.js"></script>
<script>
// WARNING: DO NOT set the <base href> like this in production!
// Details: https://webdev.dartlang.org/angular/guide/router
(function () {
var m = document.location.pathname.match(/^(\/[-\w]+)+\/web($|\/)/);
document.write('<base href="' + (m ? m[0] : '/') + '" />');
}());
</script>
<title>Hello Angular</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="favicon.png">
<script defer src="main.dart.js"></script>
</head>
<body>
<div id="output">
<canvas id="canvas"></canvas>
</div>
<div id="controls">
<button id="run">Run</button>
<button id="step">Step</button>
<button id="reset">Reset</button>
<button id="random">Random</button>
<input id="speed" title="Speed" value="1">
</div>
<my-app>Loading...</my-app>
</body>
</html>

4
web/main.dart
View File

@ -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);

121
web/styles.css
View File

@ -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;
}