2014-04-21 72 views
0

我'開始學習飛鏢/ 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> 
+0

在你的代碼,我看不到一個錯誤。你用什麼角度版本,請問在DartEditor或Dartium輸出devtools控制檯表明存在問題?你可以​​添加一個print語句到構造函數來驗證組件被實例化 –

+0

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

+0

我'採用了棱角分明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

回答

1
  • 你應該從pubspec.yaml上下文菜單中執行酒館升級。在幅/組件/後/ post.html

  • 了NG-模型屬性是冗餘的。

  • PostComponent(String text, String userName, DateTime date){
    此編碼無效。
    無論您註冊模塊中的類,它可以被注入到 構造函數或你使用註解能夠注入原始 類型,如Stringintdouble,...(如果你想知道如何注入基本類型或使用註釋注射看到How can I Dependency Inject based on type and name, with AngularDart?

+1

非常感謝它的工作。 – Youssef