AngularDart and AppModule

2
votes

Im trying to put together and AngularDart application, and I'm going back and forth on the documentation as I go.

In the AngularDart official sites architecture page, it talks about the all-important AppModule

AngularDart Architecture

However, this is the only place that modules are mentioned. In all other places - including sample code and tutorials the AppModule is completely missing - despite the fact that the Architecture guidance page insists that there needs to be a minimum of one module.

Can someone in the know clarify this?

2
angulardartangular-dart

2 Answers

2
votes

Conceptually, AppModule is not a concrete thing, it is just "root-level dependency injection services" that you setup for your application. Some applications may have none and some may have many.

You'll notice in our github_issues example application, we have one service in our "AppModule":

https://github.com/dart-lang/angular/blob/master/examples/github_issues/web/main.dart

import 'package:angular/angular.dart';
import 'package:examples.github_issues/api.dart';
import 'package:examples.github_issues/ui.dart';

import 'main.template.dart' as ng;

@Component(
  selector: 'ng-app',
  directives: const [
    IssueListComponent,
  ],
  template: '<issue-list></issue-list>',
)
class NgAppComponent {}

void main() {
  bootstrapStatic(
    NgAppComponent,
    const [
      const ClassProvider(GithubService),
    ],
    ng.initReflector,
  );
}

... the GithubService. Any component (or service) hosted in this application can access it.

Does that help?

1
votes

The Router documentation contains a pretty good explanation on the Angular module pattern, and how to organize the main module and feature modules in a real-world Angular application.

You’ll organize the crisis center to conform to the following recommended pattern for Angular apps:

  • Each feature area in its own folder
  • Each area with its own area root component
  • Each area root component with its own router outlet and child routes
  • Area routes rarely (if ever) cross

The AppModule itself is a stripped down component, the central hub for your application, if you will. It acts as a container for non-terminal feature module routes and application wide services. Like in the above linked doc:

@Component(
  selector: 'my-app',
  template: '''
    <h1>Angular Router</h1>
    <nav>
      <a [routerLink]="['CrisisCenter']">Crisis Center</a>
      <a [routerLink]="['Heroes']">Heroes</a>
    </nav>
    <router-outlet></router-outlet>
  ''',
  styles: const ['.router-link-active {color: #039be5;}'],
  directives: const [ROUTER_DIRECTIVES],
  providers: const [HeroService],
)
@RouteConfig(const [
  const Redirect(path: '/', redirectTo: const ['Heroes']),
  const Route(
      path: '/crisis-center/...',
      name: 'CrisisCenter',
      component: CrisisCenterComponent),
  const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent),
  const Route(
      path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent),
  const Route(path: '/**', name: 'NotFound', component: NotFoundComponent)
])
class AppComponent {}