显示一个简单的 AngularDart 组件答案

【问题标题】：Display a simple AngularDart component显示一个简单的 AngularDart 组件
【发布时间】：2014-04-21 10:16:31
【问题描述】：

我开始学习 Dart/AngularDart 并且我正在尝试按照 https://angulardart.org/ 中的教程显示一个简单的组件，我的问题是我得到了一个空白页，没有显示任何内容。这是我的代码：

web/nasiha.dart

import 'dart:html';
import 'package:angular/angular.dart';
import 'components/post/post.dart';
import 'dart:mirrors';

class MyAppModule extends Module {
  MyAppModule() {
    type(PostComponent);
  }
}

void main() {
  ngBootstrap(module: new MyAppModule());
}

网页/nasiha.html

<!DOCTYPE html>

<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>Nasiha</title>
    <link rel="stylesheet" href="css/nasiha.css">
  </head>
  <body>
     <post></post>
    <script src="packages/shadow_dom/shadow_dom.min.js"></script>
    <script type="application/dart" src="nasiha.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

web/components/post/post.dart

import 'package:angular/angular.dart';

@NgComponent(
    selector: 'post',
    templateUrl:'components/post/post.html',
    cssUrl: 'components/post/post.css',
    publishAs: 'cmp_post'
)
class PostComponent {
  String text= "This is a simple text to show";
  String userName = "test";
  DateTime date= new DateTime.now();

  PostComponent(String text, String userName, DateTime date){
    this.text = text;
    this.userName = userName;
    this.date = date;
  }

  String getText(){
    return this.text;
  }
  void setText(String text){
    this.text = text;
  }
  DateTime getDate(){
    return this.date;
  }
  void setDate(DateTime date){
    this.date = date;
  }
  String getUserName(){
    return this.userName;
  }
  void setUserName(String userName){
    this.userName = userName;
  }
}

web/components/post/post.html

<div>
  <p ng-model="cmp_post.post_text">
  {{cmp_post.text}}
  </p>
  <div ng-model="cmp_post.post_date">
  {{cmp_post.date}}
  </div>
  <div ng-model="cmp_post.post_username">
  {{cmp_post.userName}}
  </div>
</div>

【问题讨论】：

我在您的代码中看不到错误。您使用的是什么 Angular 版本。 DartEditor 或 Dartium devtools 控制台中的输出是否表明存在问题？能否在构造函数中添加打印语句来验证组件是否已实例化？
ng-model 中的web/components/post/post.html 属性是多余的。
我正在使用 Angular 0.0.7，我添加了一个打印语句，控制台中没有显示任何内容，但在控制台中它指示此语句 C:\Users\Youssef\Downloads\Softwares\darteditor-windows -ia32\dart\chromium\Chrome.exe --remote-debugging-port=52980 --user-data-dir=C:\Users\Youssef\.dartium --enable-experimental-web-platform-features --enable -html-imports --no-first-run --no-default-browser-check --no-process-singleton-dialog chrome://version/ 内置库 'dart:json' 在 Dartium 上不可用.
您应该从pubspec.yaml 的上下文菜单中执行pub upgrade。您使用的是非常旧的 Angular 版本。如果您获得 Angular 0.9.11/0.10.0，您将需要对您的代码进行一些更改，因为最近的 Angular 更新有几个重大更改。或者，您可以将 Angular 依赖项设置为 angular: '0.9.10' 以获取以前的版本并在以后应对重大更改。大多数输出是正常的，但The built-in library 'dart:json' is not available on Dartium. 会阻止您的代码运行。升级到更新的版本可以解决这个问题。
我将依赖项设置为 angular: '0.9.10' 但现在出现此错误：非法参数：无法注入原始类型的字符串！（解析 PostComponent -> 字符串）

标签： dart angular-dart

【解决方案1】：

您应该从 pubspec.yaml 的上下文菜单中执行 pub upgrade。
web/components/post/post.html 中的 ng-model 属性是多余的。
PostComponent(String text, String userName, DateTime date){
此代码无效。
您可以在模块中注册一个可以注入的类构造函数或您使用注释来注入原语类型如String、int、double、...（如果您想知道如何注入原始类型或使用注解进行注入，请参阅How can I Dependency Inject based on type and name, with AngularDart?

【讨论】：