Display a simple AngularDart component

StackOverflow https://stackoverflow.com/questions/23195326

  •  06-07-2023
  •  | 
  •  

Domanda

I'am starting to learn Dart/AngularDart and i'am trying to display a simple component following the tutorial in https://angulardart.org/ , my problem is that i got a blank page nothing is displayed. Here is my code:

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

web/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>
È stato utile?

Soluzione

  • You should execute pub upgrade from the context menu on pubspec.yaml.

  • The ng-model attributes in web/components/post/post.html are redundant.

  • PostComponent(String text, String userName, DateTime date){
    this code is invalid.
    Either you register a class in your module that can be injected to the constructor or you use annotations to be able to inject primitive types like String, int, double, ... (If you want to know how inject primitive types or using annotations for injection see How can I Dependency Inject based on type and name, with AngularDart?

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top