javascript - Angular 2/4/5 系统的良好架构

Question

我正在开发一个使用 Angular 4 作为前端框架的项目。我的问题是，在 Angular 4 项目中使用的最佳架构(文件夹分离、模块等)是什么？

我读了很多文章，看法也很不一样。一些文章建议整个应用程序中的各种独立模块，一些文章建议所有组件都是主应用程序模块的子级。

因此，如果有人曾经或正在从事大型 Angular 4 项目，并且可以分享经验、使用的架构以及体验的进展情况，我会非常高兴。

提前致谢!

Answer 1

强烈推荐Todd Motto介绍的Angular Architecture，你可以在这里找到它:https://github.com/toddmotto/angular-architecture .

基本上，有两种组件:容器组件和展示组件，容器是有状态的，这意味着它们与服务交互以获取数据和更新数据，展示组件是无状态的强>这意味着它们不与服务交互，而是通过@Input和@Output传递数据，这样很容易维护代码，并且数据流向清晰。从粘贴的链接中阅读更多内容，希望有帮助

index.html
app/
│    app.component.scss
│    app.component.spec.ts
│    app.component.ts
│    app.module.ts
└──  meal-planner/
   │         meal-planner.module.ts
   │         meal-planner.service.spec.ts
   │         meal-planner.service.ts
   ├── components/
   │         meal-viewer/
   │             meal-viewer.component.scss
   │             meal-viewer.component.spec.ts
   │             meal-viewer.component.ts
   │         meal-editor/
   │             meal-editor.component.scss
   │             meal-editor.component.spec.ts
   │             meal-editor.component.ts
   │         meal-recipe/
   │             meal-recipe.component.scss
   │             meal-recipe.component.spec.ts
   │             meal-recipe.component.ts
   ├── containers/
   │         meal-planner/
   │             meal-planner.component.scss
   │             meal-planner.component.spec.ts
   │             meal-planner.component.ts
   └── models/
              meal.interface.ts
              recipe.interface.ts