Question

我试图将AngularDart应用程序放在一起，并且在我去的时候，我会在文档中来回反复。

在AngularDart官方网站架构页面中，它讨论了最重要的AppModule

AngularDart Architecture

但是，这是唯一提到模块的地方。在所有其他地方 - 包括示例代码和教程，AppModule完全丢失 - 尽管体系结构指南页面坚持要求至少需要一个模块。

知情人士可以澄清一下吗？

Answer 1

从概念上讲，AppModule不是具体的事情，它只是为您的应用程序设置的“根级依赖注入服务”。某些应用程序可能有 none ，有些应用程序可能有很多。

您会注意到我们的 github_issues 示例应用程序中，我们的“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,
  );
}

...... GithubService。此应用程序中托管的任何组件（或服务）都可以访问它。

这有帮助吗？

Answer 2

Router documentation包含关于Angular模块模式的非常好的解释，以及如何在真实的Angular应用程序中组织主模块和功能模块。

您将组织危机中心以符合以下要求   Angular应用程序的推荐模式：


自己文件夹中的每个功能区域

每个区域都有自己的区域根组件

每个区域根组件都有自己的路由器插座和子路由

区域路线很少（如果有的话）穿越

如果您愿意，AppModule本身就是一个精简组件，是您应用程序的中心枢纽。它充当非终端功能模块路由和应用程序范围服务的容器。就像上面链接的文档一样：

@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 {}

AngularDart和AppModule

2 个答案: