AngularDART 组件答案

【问题标题】：AngularDART componentAngularDART 组件
【发布时间】：2014-09-25 05:02:22
【问题描述】：

我在学习AngularDART组件的时候做了下面的简单代码，但是什么都没有显示，谁能帮我知道我犯了什么错误：

我的 html 主文件：

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

main.dart 文件是：

      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();
      }

angularComponent.html 文件是： <p>This is the angular: {{cmp.name}}</p>

<the-component></the-component> 不工作，不显示任何内容！

谢谢

【问题讨论】：

启动应用程序时是否有任何错误/警告消息？
@GünterZöchbauer DART 编辑器出现以下错误。 ShadowRoot.resetStyleInheritance 和 ShadowRoot.applyAuthorStyles 现在在 dart:html 中已弃用。请从您的代码中删除它们。 '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)
@GünterZöchbauer .....经过多次试验和错误，考虑到我得到的错误消息是“'cmp'没有吸气剂。”我输入了如下虚拟变量，组件运行良好！！

标签： dart angular-dart

【解决方案1】：

Angular 转换器从lib 文件夹中挑选组件。如果您将组件的文件（.dart、.html、.css）放在其他文件夹（即web）中，则需要在 pubspec.yaml 的转换器部分中指定它们。

例如，

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

希望这对你有用。

【讨论】：

嗨@Jose David Aroesi，它给了我这个错误：从pubspec.yaml加载的包“angular_component”的pubspec错误：“transformers.angular”字段必须是地图，但是“[{ html_files: [web/angularComponent.html]}]".

【解决方案2】：

感谢所有试图提供帮助的人，解决方案是将 pubspec.yaml 编写为：

dependencies:
angular: '>=0.12.0 <0.13.0'
transformers:
- angular: {html_files: "web/angularComponent.html"}

谢谢。

【讨论】：

这对我帮助很大！谢谢！但是，对于这种刺痛是什么意思，有什么解释吗？

【解决方案3】：

错误是您的pubspec.yaml 没有将angularComponent.html 列为资产。

创建StaticClosureMap 的Angular 转换器没有解析模板，从未见过cmp.name 表达式，也从未生成getter。

我们应该给你一个更好的错误信息。如果您仍然有完整的项目隔离良好，请在the Github project 提交错误，我们可以改善这种体验。

【讨论】：

感谢@James deBoer，这对我来说是新事物...所以，我应该将 pupspec.yaml 文件制作如下，还是其他...名称：angular_dart_example 版本：0.0.1 依赖项：角度：变压器：-角度入口点：web/angularComponent.html
我尝试添加这一行 'entry_points: web/angularComponent.html' 但注意到变化
如果你能把你的示例应用贴在某个地方，我可以看看配置。