Set up Basic AngularDart Structure
This commit is contained in:
parent
fffcc3fbae
commit
f3dfc3b368
7 changed files with 193 additions and 32 deletions
21
lib/app_component.dart
Normal file
21
lib/app_component.dart
Normal 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';
|
||||
}
|
||||
|
|
@ -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
32
test/app_test.dart
Normal 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
BIN
web/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
121
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue