49 | My name: {{ myName }}
Friends:
You have many friends!
' 100 | }) 101 | class DisplayComponent 102 | { 103 | public function new(?friends : FriendsService) 104 | { 105 | // ... 106 | } 107 | } 108 | ``` 109 | 110 | ### Creating a directive (@Directive annotation) 111 | Creating a directive is again similar to the way components and views are created with Haxe. View the example below, which injects a service (via component-level injection) into the directive. 112 | 113 | **Currently tested metadata for @Directive annotation:** 114 | * selector 115 | * hostInjector *(Note: class names must be surrounded in double-quotes)* 116 | * properties 117 | * lifecycle ("onInit", "onCheck", "onAllChangesDone") 118 | 119 | **Implemented but untested metadata for @Directive annotation:** 120 | * lifecycle (onChange, onDestroy) 121 | 122 | ```haxe 123 | @:expose 124 | class Greeter 125 | { 126 | public function new() { } 127 | public function greet(name : String) 128 | { 129 | return 'Hello ${name}!'; 130 | } 131 | } 132 | 133 | @Directive({ 134 | selector: 'needs-greeter', 135 | bindings: [ 136 | "test.Greeter" 137 | ] 138 | }) 139 | @:expose 140 | class NeedsGreeter 141 | { 142 | private var greeter : Greeter; 143 | 144 | public function new(greeter : Greeter) 145 | { 146 | this.greeter = greeter; 147 | } 148 | } 149 | ``` 150 | -------------------------------------------------------------------------------- /bin/css/style.css: -------------------------------------------------------------------------------- 1 | html, body 2 | { 3 | width: 100%; 4 | } 5 | 6 | body 7 | { 8 | margin: 0px; 9 | color: #000000; 10 | font-family: 'Open Sans', sans-serif; 11 | 12 | /* Reference: haxe.org */ 13 | background-color: rgb(168,75,56); 14 | background-repeat: no-repeat; 15 | /* Safari 4-5, Chrome 1-9 */ 16 | background: -webkit-gradient(radial, 50% 80%, 0, center center, 100, from(rgb(183,77,49)), to(rgb(100,33,38))); 17 | /* Safari 5.1+, Chrome 10+ */ 18 | background: -webkit-radial-gradient(50% 80%, circle, rgb(183,77,49), rgb(100,33,38)); 19 | /* Firefox 3.6+ */ 20 | background: -moz-radial-gradient(50% 80%, circle, rgb(183,77,49), rgb(100,33,38)); 21 | /* IE 10 */ 22 | background: -ms-radial-gradient(50% 80%, circle, rgb(183,77,49), rgb(100,33,38)); 23 | } 24 | 25 | h1, h3 26 | { 27 | -webkit-margin-before: 5px; 28 | -webkit-margin-after: 5px; 29 | } 30 | 31 | body > div 32 | { 33 | padding: 8px; 34 | } 35 | 36 | body > .examples > div > *:nth-child(2) 37 | { 38 | margin: 8px; 39 | padding: 8px; 40 | display: block; 41 | border: 2px solid rgb(234, 130, 32); 42 | border-radius: 5px; 43 | background-color: rgba(255, 255, 255, 0.3); 44 | } 45 | 46 | div.titlebar 47 | { 48 | background-color: #000000; 49 | color: #FFFFFF; 50 | } 51 | 52 | /* 53 | Force div elements to surround 54 | their children. (Clearfix) 55 | Reference: https://css-tricks.com/snippets/css/clear-fix/ 56 | */ 57 | .examples > div:before, .examples > div:after, .examples > div > *:before, .examples > div > *:after 58 | { 59 | visibility: hidden; 60 | display: block; 61 | font-size: 0; 62 | content: "."; 63 | clear: both; 64 | height: 0; 65 | } 66 | 67 | .haxe-logo 68 | { 69 | float: left; 70 | position: relative; 71 | width: 25px; 72 | height: 25px; 73 | top: 3px; 74 | } 75 | 76 | h3.title 77 | { 78 | position: relative; 79 | left: 10px; 80 | width: 90%; 81 | } 82 | 83 | small 84 | { 85 | color: rgb(234, 130, 32); 86 | } 87 | 88 | footer 89 | { 90 | background-color: #000000; 91 | color: #FFFFFF; 92 | padding: 8px; 93 | } 94 | 95 | footer > a 96 | { 97 | color: #FFFFFF; 98 | text-decoration: none; 99 | font-weight: bold; 100 | } -------------------------------------------------------------------------------- /bin/css/style.min.css: -------------------------------------------------------------------------------- 1 | html,body{width:100%;} 2 | body{margin:0px;color:#000000;font-family:'Open Sans',sans-serif;background-color:rgb(168,75,56);background-repeat:no-repeat;background:-webkit-gradient(radial,50% 80%,0,center center,100,from(rgb(183,77,49)),to(rgb(100,33,38)));background:-webkit-radial-gradient(50% 80%,circle,rgb(183,77,49),rgb(100,33,38));background:-moz-radial-gradient(50% 80%,circle,rgb(183,77,49),rgb(100,33,38));background:-ms-radial-gradient(50% 80%,circle,rgb(183,77,49),rgb(100,33,38));} 3 | h1,h3{-webkit-margin-before:5px;-webkit-margin-after:5px;} 4 | body>div{padding:8px;} 5 | body>.examples>div>*:nth-child(2){margin:8px;padding:8px;display:block;border:2px solid rgb(234,130,32);border-radius:5px;background-color:rgba(255,255,255,0.3);} 6 | div.titlebar{background-color:#000000;color:#FFFFFF;} 7 | .examples>div:before,.examples>div:after,.examples>div>*:before,.examples>div>*:after{visibility:hidden;display:block;font-size:0;content:".";clear:both;height:0;} 8 | .haxe-logo{float:left;position:relative;width:25px;height:25px;top:3px;} 9 | h3.title{position:relative;left:10px;width:90%;} 10 | small{color:rgb(234,130,32);} 11 | footer{background-color:#000000;color:#FFFFFF;padding:8px;} 12 | footer>a{color:#FFFFFF;text-decoration:none;font-weight:bold;} -------------------------------------------------------------------------------- /bin/img/haxe-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nweedon/angular2haxe/5829422d4e377f0c07cbfdccfc18ff81e18b0a30/bin/img/haxe-logo.png -------------------------------------------------------------------------------- /bin/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 |
49 | {{ message }}
' 30 | }) 31 | @:expose 32 | @:keep 33 | class ChildComponent 34 | { 35 | private var message = "I am the child."; 36 | 37 | public function new() 38 | { 39 | 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/test/Dependency.hx: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2015 Niall Frederick Weedon 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | */ 16 | package test; 17 | 18 | import angular2haxe.ng.Angular; 19 | import angular2haxe.ng.EventEmitter; 20 | import angular2haxe.Trace; 21 | 22 | /* 23 | * Reference: 24 | * https://angular.io/docs/js/latest/api/annotations/DirectiveAnnotation-class.html 25 | * http://victorsavkin.com/post/119943127151/angular-2-template-syntax 26 | * 27 | * Note: Events on Dependency and NgModelDirective classes are work-in-progress. 28 | */ 29 | 30 | @Directive({ 31 | selector: '[dependency]', 32 | properties: [ 33 | "id: dependency" 34 | ], 35 | lifecycle: ["onInit"] 36 | }) 37 | @:expose 38 | @:keep 39 | class Dependency 40 | { 41 | public var id : String; 42 | 43 | public function new() 44 | { 45 | } 46 | 47 | public function onInit() 48 | { 49 | Trace.log('Dependency.hx result:\n${this}'); 50 | } 51 | 52 | public function onMouseEnter(event : Dynamic) 53 | { 54 | trace('onMouseEnter: ${id}'); 55 | } 56 | 57 | public function onMouseLeave() 58 | { 59 | trace('onMouseLeave: ${id}'); 60 | } 61 | 62 | public function onResize(event : Dynamic) 63 | { 64 | trace('resize ${event}'); 65 | } 66 | } 67 | 68 | /** 69 | * Injecting dependency with hostInjector 70 | */ 71 | @Directive({ 72 | selector: '[my-directive]', 73 | lifecycle: ["onInit"], 74 | bindings: ["test.Dependency"] 75 | }) 76 | @:expose 77 | @:keep 78 | class MyDirective 79 | { 80 | private var dependency : Dependency; 81 | 82 | public function new(?dependency : Dependency) 83 | { 84 | if (dependency != null) 85 | { 86 | this.dependency = dependency; 87 | } 88 | } 89 | 90 | public function onInit() 91 | { 92 | Trace.log('MyDirective Dependency:\n${dependency}'); 93 | } 94 | } 95 | 96 | @Directive({ 97 | selector: '[ng-model]', 98 | properties: ['ngModel'] 99 | }) 100 | @:expose 101 | @:keep 102 | class NgModelDirective 103 | { 104 | private var ngModel : String = ""; 105 | private var ngModelChanged : EventEmitter = new EventEmitter(); 106 | 107 | public function new() 108 | { 109 | } 110 | 111 | public function modelChanged(event : Dynamic) 112 | { 113 | Trace.log(event); 114 | ngModelChanged.next(event.target.value); 115 | } 116 | } -------------------------------------------------------------------------------- /src/test/DependencyDisplayComponent.hx: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2015 Niall Frederick Weedon 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | */ 16 | package test; 17 | 18 | import angular2haxe.ng.Angular; 19 | import angular2haxe.ng.LifecycleEvent; 20 | import test.Dependency.MyDirective; 21 | 22 | /* 23 | * Reference: 24 | * https://angular.io/docs/js/latest/guide/displaying-data.html 25 | */ 26 | 27 | @Component({ 28 | selector: 'dependency-display', 29 | compileChildren: true 30 | }) 31 | @View({ 32 | directives: ["test.Dependency", "test.MyDirective", "test.NgModelDirective"], 33 | templateUrl: "templates/dependency.tpl.html" 34 | }) 35 | @:expose 36 | @:keep 37 | class DependencyDisplayComponent 38 | { 39 | public function new() 40 | { 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/test/DisplayComponent.hx: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2015 Niall Frederick Weedon 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | */ 16 | package test; 17 | 18 | import angular2haxe.ng.Angular; 19 | 20 | /* 21 | * Reference: 22 | * https://angular.io/docs/js/latest/guide/displaying-data.html 23 | */ 24 | 25 | @Component({ 26 | selector: 'display', 27 | viewBindings: ["test.FriendsService"] 28 | }) 29 | @View({ 30 | directives: ["NgFor", "NgIf"], 31 | template: 'My name: {{ myName }}
Friends:
You have many friends!
' 32 | }) 33 | @:keep 34 | @:expose 35 | class DisplayComponent 36 | { 37 | private var myName : String; 38 | private var names : Array{{ message }}
' 30 | }) 31 | @:expose 32 | class ChildComponent 33 | { 34 | private var message = "I am the child."; 35 | 36 | public function new() 37 | { 38 | 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/testcompile/Dependency.hx: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2015 Niall Frederick Weedon 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | */ 16 | package testcompile; 17 | 18 | import angular2haxe.ng.Angular; 19 | import angular2haxe.ng.EventEmitter; 20 | import angular2haxe.Trace; 21 | 22 | /* 23 | * Reference: 24 | * https://angular.io/docs/js/latest/api/annotations/DirectiveAnnotation-class.html 25 | * http://victorsavkin.com/post/119943127151/angular-2-template-syntax 26 | * 27 | * Note: Events on Dependency and NgModelDirective classes are work-in-progress. 28 | */ 29 | 30 | @Directive({ 31 | selector: '[c-dependency]', 32 | properties: [ 33 | "id: c-dependency" 34 | ], 35 | lifecycle: ["onInit"] 36 | }) 37 | @:expose 38 | class Dependency 39 | { 40 | public var id : String; 41 | 42 | public function new() 43 | { 44 | } 45 | 46 | public function onInit() 47 | { 48 | Trace.log('Dependency.hx result:\n${this}'); 49 | } 50 | 51 | public function onMouseEnter(event : Dynamic) 52 | { 53 | trace('onMouseEnter: ${id}'); 54 | } 55 | 56 | public function onMouseLeave() 57 | { 58 | trace('onMouseLeave: ${id}'); 59 | } 60 | 61 | public function onResize(event : Dynamic) 62 | { 63 | trace('resize ${event}'); 64 | } 65 | } -------------------------------------------------------------------------------- /src/testcompile/DependencyDisplayComponent.hx: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2015 Niall Frederick Weedon 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | */ 16 | package testcompile; 17 | 18 | import angular2haxe.ng.Angular; 19 | import angular2haxe.ng.LifecycleEvent; 20 | import test.Dependency.MyDirective; 21 | 22 | /* 23 | * Reference: 24 | * https://angular.io/docs/js/latest/guide/displaying-data.html 25 | */ 26 | 27 | @Component({ 28 | selector: 'c-dependency-display', 29 | compileChildren: true 30 | }) 31 | @View({ 32 | directives: ["testcompile.Dependency", "testcompile.MyDirective", "testcompile.NgModelDirective"], 33 | templateUrl: "templates/dependency.tpl.html" 34 | }) 35 | @:expose 36 | class DependencyDisplayComponent 37 | { 38 | public function new() 39 | { 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/testcompile/DisplayComponent.hx: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2015 Niall Frederick Weedon 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | */ 16 | package testcompile; 17 | 18 | import angular2haxe.ng.Angular; 19 | 20 | /* 21 | * Reference: 22 | * https://angular.io/docs/js/latest/guide/displaying-data.html 23 | */ 24 | 25 | @Component({ 26 | selector: 'c-display', 27 | viewBindings: ["testcompile.FriendsService"] 28 | }) 29 | @View({ 30 | directives: ["NgFor", "NgIf"], 31 | template: 'My name: {{ myName }}
Friends:
You have many friends!
' 32 | }) 33 | @:expose 34 | class DisplayComponent 35 | { 36 | private var myName : String; 37 | private var names : Array