Declaring nested components in Angular Dart

Question

After playing and experimenting a lot with Angular Dart, I'm writing now my first true (as in "going to be used in my company by real users") application. And I've stumbled upon a problem I haven't be able to find an answer in the net : How to properly nest components?

I have some simple widgets, implemented as Components, and I have some more complex composite widgets including the simple ones.

Right now, I must declare all the components (simple and composite) with module..type() in the main dart file. But in a component paradigm the inner simple components should be encapsulated inside the composite components, i.e. not declared from the outside.

It would be great to have a way to get this encapsulation in components, allowing a Component to declare and use inner components without having to declare each one of those inner components in the main application.

Is there a way to do it? My google-fu isn't usually bad, but I've found nothing on this topic...

Thanks in advance!

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-03-14T08:46:24

Create more modules and add them to MyAppModule with install

see for example at
- https://github.com/akserg/angular.dart.ui/blob/master/lib/accordion/accordion.dart
- https://github.com/akserg/angular.dart.ui/blob/master/lib/angular_ui.dart

accordion.dart

class AccordionModule extends Module {
  AccordionModule() {
    // old syntax
    type(AccordionComponent);
    type(AccordionHeadingComponent);
    type(AccordionGroupComponent);
    value(AccordionConfig, new AccordionConfig());
    // you could also use install() here not only in the main module

    // new Syntax
    bind(AccordionComponent);
    bind(AccordionHeadingComponent);
    bind(AccordionGroupComponent);
    bind(AccordionConfig, toValue: new AccordionConfig());
  }
}

angular_ui.dart

class AngularUIModule extends Module {
  AngularUIModule() {
    install(new AlertModule());
    install(new AccordionModule()); // the above module
    install(new ButtonModule());
    install(new CarouselModule());
    install(new CollapseModule());
    install(new DropdownToggleModule());
    install(new ProgressbarModule());
    install(new RatingModule());
    install(new TabsModule());
    install(new TimeoutModule());
    install(new TransitionModule());
    install(new ModalModule());
  }
}

Declaring nested components in Angular Dart

1 Answers