显示一个简单的AngularDart组件

我'开始学习飞镖/ AngularDart和我'试图显示https://angulardart.org/教程下面一个简单的组件，我的问题是，我得到了一个空白页面不显示任何内容。这里是我的代码：显示一个简单的AngularDart组件

网/ 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>

网/组件/后/ 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>

来源

2014-04-21 Youssef

在你的代码，我看不到一个错误。你用什么角度版本，请问在DartEditor或Dartium输出devtools控制台表明存在问题？你可以添加一个print语句到构造函数来验证组件被实例化 –

web/components/post/post.html中的'ng-model'属性是多余的。 –

我'采用了棱角分明0.0.7，我增加了一个print语句什么都没有显示在控制台日但在控制台它指出语句C：\ Users \用户优素福\下载\软件\ darteditor窗口-IA32 \镖\铬\的chrome.exe --remote调试端口= 52980的user-data-DIR = C：\用户\优素福\ .dartium --enable-实验-web的平台的功能--enable-HTML的进口--no负一运行--no默认浏览器检查--no-工艺单的对话中铬：//版/ 内置图书馆镖：JSON“不适用于Dartium。 – Youssef

你应该从pubspec.yaml上下文菜单中执行酒馆升级。在幅/组件/后/ post.html
了NG-模型属性是冗余的。
PostComponent(String text, String userName, DateTime date){
此编码无效。
无论您注册模块中的类，它可以被注入到构造函数或你使用注解能够注入原始类型，如String，int，double，...（如果你想知道如何注入基本类型或使用注释注射看到How can I Dependency Inject based on type and name, with AngularDart?

来源

2014-04-21 12:48:07

非常感谢它的工作。 – Youssef

显示一个简单的AngularDart组件

回答

相关问题