架构

【译文】【前端架构鉴赏 01】：Angular 架构模式与最佳实践
如何更好地组织Angular项目

架构概览

模块 NgModule

• Angular 应用就是由一组 NgModule 定义出的
• NgModule 可以将其组件和一组相关代码（如服务）关联起来，形成功能单元。
• 它和 JavaScript（ES2015） 的模块不同而且有一定的互补性
• 这项技术还能让你获得惰性加载（也就是按需加载模块）的优点，以尽可能减小启动时需要加载的代码体积。
• 根模块 AppModule

  组件

  装饰器是一些用于修饰 JavaScript 类的函数。Angular 定义了许多装饰器，这些装饰器会把一些特定种类的元数据附加到类上，以便 Angular 了解这些这些类的含义以及该如何使用它们。 到网上学习关于装饰器的更多知识

模板、指令和数据绑定

服务与依赖注入

服务器获取数据、验证用户输入或直接把日志写到控制台

路由

如果路由器认为当前的应用状态需要某些特定的功能，而定义此功能的模块尚未加载，路由器就会按需 惰性加载 此模块。

创建 AppComponent 类的实例

当你通过 main.ts 中的 AppComponent 类启动时，Angular 在 index.html 中查找一个 元素， 然后实例化一个 AppComponent，并将其渲染到 标签中。

装饰器

• 装饰器是用来标记的，标记为一个组件、服务……
• 接受元数据对象

@Component()
@NgModule()
@Injectable()
@Input

管道

管道 是格式化字符串、金额、日期和其它显示数据的好办法。 Angular 发布了一些内置管道，而且你还可以创建自己的管道。

// async 管道
<div class="shipping-item" *ngFor="let shipping of shippingCosts | async">
  <span>{{ shipping.type }}</span>
  <span>{{ shipping.price | currency }}</span>
</div>

// 管道还能接收一些参数，来控制它该如何进行转换。
<p>The date is {{today | date:'fullDate'}}</p>

元数据（metadata）

• 有些元数据位于 _@_[_Component_](https://angular.cn/api/core/Component) 装饰器中，你会把它加到组件类上。
• 另一些关键性的元数据位于 _@NgModule_ 装饰器中。

  顶级类 AppModule

  公共属性（public）

  Angular 只会绑定到组件的公共属性。
  这个 messageService 属性必须是公共属性，因为你将会在模板中绑定到它。

  export class MessagesComponents implements OnInit {
  constructor(public messageService: MessageService) {}
  }