I'm trying to create a component in AngularDart 1.0:
index.html:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>data_generator_front</title>
</head>
<body>
<my-form></my-form>
<label>Name: </label>
<input type="text" ng-model="myProperty" placeholder="Enter your name here">
<hr>
<h1 ng-cloak>Hello {{myProperty}}</h1>
<input type="submit" ng-click="method1()">
<script type="application/dart" src="index.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
index.dart:
import "package:angular/angular.dart";
import "package:angular/application_factory.dart";
import "my_form.dart";
@Injectable()
class RootContext{
String myProperty = "jeahhhhhhhh";
void method1(){
print("method1");
}
}
main(){
applicationFactory()
.rootContextType(RootContext)
.addModule(new DateFormModule())
.run();
}
my_form.html
<form>
<label>Years:</label>
<input type="text" placeholder="begin">
<input type="text" placeholder="end">
<input type="checkbox">
<input type="submit">
</form>
my_form.dart
import "package:angular/angular.dart";
@Component(
selector: "my-form",
templateUrl: "my_form.html")
class DateFormComponent {}
class DateFormModule extends Module {
DateFormModule(){
bind(DateFormComponent);
}
}
Please correct what i'm saying.
I have a class "RootContext" that holds the property 'myProperty' and a method "method1". This class is annotated by @Injectable() which enable the class to be handle by angulardart. like that all the properties/methods are availlable in the html in {{}}, ng-model, ng-click.... last, rootContextType(RootContext) makes RootContext the rootcontext of the app. Is that correct ?
Now I would like to create a Component. (my_form.dart and my_form.html)I succeed to display the html of my component which is great.
I would to pre fill the input (the one with placeholder="begin") with a value like "1980" here is my attempt:
my_form.dart:
import "package:angular/angular.dart";
@Component(
selector: "my-form",
templateUrl: "my_form.html")
class DateFormComponent {
String years_begin = "1980";
}
class DateFormModule extends Module {
DateFormModule(){
bind(DateFormComponent);
}
}
my_form.html
<form>
<label>Years:</label>
<input type="text" placeholder="begin" ng-model="years_begin">
<input type="text" placeholder="end">
<input type="checkbox">
<input type="submit">
</form>
And that crash with : ... Missing getter: (o) => o.years_begin ...
ok let's create a getter then: String get years_begin => _years_begin; but still have the same error... so @Component() is not like @Injectable() it doesn't turn on all the field/methods to be handle by the view. so how to turn them on ? it's seems like @NgAttr(attrName), @NgOneWay(attrName), @NgTwoWay(attrName) do the job
let's try this
class DateFormComponent {
@NgAttr("years_begin")
String years_begin = "1980";
}
--> no more exception but the field is not filled
class DateFormComponent {
@NgOneWay("years_begin")
String years_begin = "1980";
}
--> do the job !
class DateFormComponent {
@NgTwoWay("years_begin")
String years_begin = "1980";
}
--> as well
is NgOneWay synchronize model to view ? is NgTwoWay synchronize model to view and view to model ? ngAttr seems more to be for the attribute passed in in the HTML like and just at init time ?
let's switch to method now here is my change
my_form.html
<form>
<label>Years:</label>
<input type="text" placeholder="begin" ng-model="years_begin">
<input type="text" placeholder="end">
<input type="checkbox">
<input type="submit" ng-click="method2()">
</form>
my_form.dart
import "package:angular/angular.dart";
@Component(
selector: "my-form",
templateUrl: "my_form.html")
class DateFormComponent {
@NgTwoWay("years_begin")
String years_begin = "1980";
method2(){
print("method2");
}
}
class DateFormModule extends Module {
DateFormModule(){
bind(DateFormComponent);
}
}
it crash with : No getter for 'method2'. What is the equivalent of NgOneWay ngTwoway for methods ?
Do not hesitate to give me UP TO DATE links and information about angulardart & dart as there are not a lot of documentation up to date even the angulardart website...