2
votes

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

2
Angular.dart 1.0 was just released and the tutorials and docs yet have to be updated. Here is a pull request for the angular.dart.tutorial with updates for Angular.dart 1.0 github.com/angular/angular.dart.tutorial/pull/131Günter Zöchbauer
Great ! thank a lot !BenNG

2 Answers

2
votes

Thanks to an answer here I found an answer regarding to the No getter for 'method2' problem.

The transformer struggled so we need to pass extra information: in my component I set the exportExpressions property like this:

my_form.dart

import "package:angular/angular.dart";

@Component(
        selector: "my-form",
        templateUrl: "my_form.html",
        exportExpressions: const ["method2"])
class DateFormComponent {
    @NgTwoWay("years_begin")
    String years_begin = "1980";

    method2(){
        print("method2");
    }  
}

class DateFormModule extends Module {
    DateFormModule(){
        bind(DateFormComponent);
    }
}

I think it's related to tree shaking and that way the transformer exact the 'method2'

1
votes

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 ?

@Injectable() has nothing much to do with Angular binding ({{}}), it is only for the dependency injection system used in Angular and the transformer that generates code to avoid Mirrors/Reflection in production code (which has performance and code bloat issues) You also need to add a transformers configuration to make this work see https://github.com/vicb/angular.dart.tutorial/blob/1013-v1/Chapter_06/pubspec.yaml#L12 for an example. (Angular.dart transformers need to be applied for development too, not only for production)