AngularDART component

Question

I made the below simple code while learning AngularDART Component, but nothing is displayed, can anyone help me knowing what mistake I made:

my html main file:

    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="bootstrap.css">
        <link rel="stylesheet" href="main.css">
        <title>AngularDART training</title>
        <script type="application/dart" src="main.dart"></script>
        <script src="packages/browser/dart.js"></script>
    </head>
    <body ng-app>
        <h1 id='text_id'>Welcome</h1>
        <the-component></the-component>
    </body>
    </html>

the main.dart file is:

      import 'package:angular/angular.dart';
      import 'package:angular/application_factory.dart';

      @Component(
          selector: 'the-component',
          templateUrl: 'angularComponent.html',
          cssUrl: 'angularComponent.css',
          publishAs: 'cmp')
      class myComponent {var name = 'Component';}

      main() {
        var module = new Module()
                         ..bind(myComponent);

        applicationFactory().addModule(module).run();
      }

the angularComponent.html file is: <p>This is the angular: {{cmp.name}}</p>

the <the-component></the-component> is not working, and not displaying anything!

thanks

@GünterZöchbauer I got the below error the DART editor. ShadowRoot.resetStyleInheritance and ShadowRoot.applyAuthorStyles now deprecated in dart:html. Please remove them from your code. No getter for 'cmp'. STACKTRACE: #0 StaticClosureMap.lookupGetter (package:angular/core/parser/parser_static.dart:15:25) #1 DynamicParserBackend.newAccessScope (package:angular/core/parser/dynamic_parser.dart:108:38) — Hasan A Yousef
@GünterZöchbauer.....After many trials and errors, considering the error msg I get is " No getter for 'cmp'. " I entered dummy variable as below, and the component worked perfectly!! <the-component anything={{cmp}}></the-component> — Hasan A Yousef

David Aroesti David Aroesti · Accepted Answer · 2014-08-07T19:30:20

Angular transformer picks the components from the lib folder. If you place your component's files (.dart, .html, .css) in other folders (i.e. web), you need to specify them in the transformers section of pubspec.yaml.

For example,

transformers
   - angular:
     -html_files:
        - absolute/path/to/your/html

Hope this works for you.

AngularDART component

3 Answers