如何实现角度的惯例



我发现必须在根模块(AppModule(中手动注册我的角度MVC组件和服务有些不便。在团队中工作时,它变得更加不便。理想情况下,开发人员只能添加三个文件 - 一个组件,视图和服务,而不会触摸任何其他"基础架构"文件。

  1. 我试图不在providers数组中注册我的服务,而这些服务仍然可以正常运行。但是,我不确定没有将它们在那里会带来的长期后果。在哪些情况下,我希望我的服务在providers数组中?

  2. 然后,我尝试不将组件注册在declarations数组中,当然,Angular失败的消息" Component BankScomponent不属于任何NGMODULE或模块"。这似乎是"限制构想"想法的障碍。

  3. 能够在组件代码文件中添加特定于组件的路由并以某种方式使角路由器自动从具有定义路由的所有组件中自动收集这些路由(类似于ASP.NET MVC ROUTE属性的方式类似(关于控制器的作品(。有什么解决方案吗?

我应该完全抛弃这个想法,并接受斜角无法正常工作的事实吗?

您可以将角组件放在不同的模块中。这具有您可以更好地管理依赖项的好处,而开发人员不必触摸相同的文件。

我在所有项目中使用的文件夹结构:

core/
- login/
- auth/
- core.module.ts // Register the root routes here (RouterModule.forRoot)
- core.route.ts // Your lazy loaded routes for the core modules (login for example)
feature/
- home/
-- home.component.html
-- home.component.scss
-- home.component.ts
-- home.module.ts // Register the component and module route here (RouterModule.forChild)
- feature.module.ts // Register the feature routes here (RouterModule.forChild)
- feature.route.ts // Your lazy loaded routes for the feature modules (Example: The home page)
shared/ // Put any components/pipes/services that are shared over multiple components here
-- shared.module.ts // You can put dependencies that you share across multiple modules here (Example: Angular material imports)
app.module.ts
app.component.ts

这种结构将身份验证,页面和共享功能的逻辑分开。它还捆绑了一个组件/小模块,以便可以独立开发并可以轻松更换。


示例

您可以找到一个有关此stackblitz中实际应用程序中如何适合的示例。


回答您的问题

  1. 由于Angular 6,您可以使用@Injectable({providedIn: root})语法注册服务。这意味着您的服务将在全球范围内可用(您不必在使用它之前将其添加到providers阵列中(,并且如果不注入中,将自动从产品捆绑包中删除(通过树木摇动(任何地方。

  2. 组件应始终在declarations数组中注册。但是您可以在声明组件的地方制作小模块。

  3. 通过RouterModule.forChild()您可以创建组件特定路由。将其与懒惰的负载相结合,您可以更好地概述自己的功能和更好的整体性能。


懒惰加载

您可以使用懒惰的路线提高应用程序的速度和脱钩。这是因为懒惰路由(routes数组中的loadChildren(仅指向路径。这样,您可以用其他模块(具有相同名称(替换模块,而无需更改参考(甚至更少的文件需要更改!:d(。

示例导入:

{
  path: HOME_MODULE_ROUTE,
  loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
  // Add auth guard here to only show the page when the user is logged in
},

为了进一步提高应用程序的性能,您可以使用前层压板。我建议使用预载模策略,以便您的模块不打扰用户并加快应用程序的进一步加载和导航(更多此处(。


用字符串上的常数用法

为了避免删除路线时大量调试和/或运行时问题,我建议使用常数。这样,您可以在1个地方定义页面路由,并可以避免使用字符串比较。请注意,您需要一个单独的文件。您不能在路由文件中添加路由,因为这会创建一个循环依赖性。

相关内容

  • 没有找到相关文章

最新更新