From f3dfc3b3684aa9c498a67472c1ef10203695dcdb Mon Sep 17 00:00:00 2001 From: Marty Oehme Date: Sat, 7 Jul 2018 15:46:40 +0200 Subject: [PATCH] Set up Basic AngularDart Structure --- lib/app_component.dart | 21 +++++++ pubspec.yaml | 8 ++- test/app_test.dart | 32 +++++++++++ web/favicon.png | Bin 0 -> 2566 bytes web/index.html | 39 +++++++------ web/main.dart | 4 ++ web/styles.css | 121 ++++++++++++++++++++++++++++++++++++++--- 7 files changed, 193 insertions(+), 32 deletions(-) create mode 100644 lib/app_component.dart create mode 100644 test/app_test.dart create mode 100644 web/favicon.png 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 0000000000000000000000000000000000000000..dd18702e27c282e8985a72f5e16590523efff14d GIT binary patch literal 2566 zcmV+h3i7L?5QUz~|@ zI4{JP)W$2F{vX4K@-g*TDKDcH1%M=F7Ww{~<)6Yu+C%gOkEX5sN{rS&h3UFdOsh+K z+HkS}@TF?JaSVt}`tYZ=^WLiKxuDri+eXnm=37M*l@C(px(q zgb%Cgcedz4sD97(X=EdLfcP|YMmvwbVBVsm{lfo9zKg#Tx`zE;biH2*S%$JFn40@z z8vlfJMoZA2PV#GkEBsXE^LAgo#3CO6l2o&1hamMvRU)!FFsty`mVT%g=a6^>GeKTM znJuO!v6vpZN)@9eX;Dj)F%13;K0FXFz)_SR@w~5=4V_%L-$y$Y#r^p`r-HE$%C3nkX5{;t92dDI8tFGDBS_uH%?m)9Y!!A*k98G&5@ z5Me+!<3H+|wx`+9R5Ac34R|X`3+M;Hr+0|ko)PJsTZ6g)z{!Jd#*ev~l?_<1+tqK_ zhMQ+M(+>b`)}Ea?t75wXV15wY00;;#yA0~O4}iylGckN)`T>CG1eh1-`;6@Z023>^ z7(et{Mmj(t;bN}0I~8R_BLFT19pw@f%Q}aATFY21e_^90H_)iF_(I?GW%YC zh7$mLU#b{y?2>H(M&ma$tKqI)?Rfl;qgqg;?dvxqckqe1I03N8qY41Q5#qH13`_ceWcE zDukd9+y>hTO!KK(hQRQ1gY-)rU!JL=Z%~AKaSn=?Gs|%Tpkho`0G65yPXHhMhQ&A3 z9DuVVp9ze~$QfEbiGD#58Xl@4=Bro}JP}mfi);XtIJ7K+kpzamQw58Gjbs4EC+?j8 z2a7&I5uBoE7VSV5ty#bP{YpdyTS@>te<2G1NtU&ta6W!x9LjE0gXr!b3%3y-EX|ll{h)}M zQhKWk2XC0Pd%}dIsa@13*s)MZNC1%t^LsdLd%~ zBDTrfc*~gu6M;3PZS_=8q;Q}Paq5Hw(N0pjB=V*pHi!u)+mI55LyX^ zUcei_&YrvP8aIfzR_fLtZ6WaGk-UQ<;UPDLC&zWj7yzx|vIbzg+1<$?n|K2UXY=j=hT;G~V%8c) z_afibGjua&rdU;1)&Qu=Y+c)+8@w=}PP}pZQ_AhY3-T<9I#j{+C`lzxP}F$?NKZ~H zW1dRA&TZvr@p=$K9DwnDIi6r5c>oyg?&g~CgW`iCjV8y{u|XdMa$XLV>_oWn2I;(x z4hSm;y$*sY_#0K=*0=@kBk!8HilcQ$o5K_r6losc&f=QX#>g3f{bocP{#|TAJ+PHx z=o=}l1iQ%#z;e&9`8+B9K52s@<`VDznZ0r+${7HA!dt>pMbDj}ofJb~1TSBjp-+~qUseF6lweTeVeOy;<%gvuy}*F(G$2i#b6Tg#spq0*8$I|vnez@DJ8zdqUVDm zWMQCt;g8N$at46ai2DMES_u;*LwHrSVLjY{U&m|ZSc3`F0bo>_n`VL*gefdhQPp7l zy6|>LaT=EZ0Oi4(1e3oXC}#llqUf?hhHgusPz&}t(HJA+9$FRK$GmfMXo3;|1s(gY z^J1j8iyP4yY%9@#5epT(JJ_gm!zlNT5&$_Zdf4b@lw$JyZ%9LMnjqMcLGrEPW@|8g z6s81#;LV=t8}7utZ;wIt?)NKNzIHQ3*T<`rVY=8t2|zbL&ei+-^ z{JnQ2$l?8EMMbE@a1w+=g^0J5OpL z3>+~%{|}-7Xg=C;HZ`t#EUF%2E@YUMC_77OASSqBTEdV70Ha~EPvVKU*O2I-NqjXM c5#9UpA7FxigQe%7E&u=k07*qoM6N<$g5h4tSO5S3 literal 0 HcmV?d00001 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; }