在Angular 2中使用多个组件正确构建SPA和路由

时间:2017-10-12 12:47:12

标签: angular angular2-routing

我是Web开发和Angular的新手。我需要开发单页面应用程序,它应该有以下"页面": 1.登录页面 2.主页

主页应包含几个部分: 报告,客户等 此外,每个部分都有自己的功能(特定按钮,表格等)。

我确实知道路由基础知识并且已经使用"登录"进行了登录页面。按钮,将您重定向到主页。因此,登录页面是一个独立的组件,有自己的路径。

现在我需要实现主页。我决定它应该始终打开左侧的导航选项卡(就像那里https://material.angular.io/components/categories),并且在屏幕的其余部分应该显示所选部分的特定内容。

问题是我应该如何在模块和组件方面安排所有这些以使其更加干净和可重复使用?另外,如何在导航菜单中为每个选定部分实现可显示组件的更改?我应该使用路由(如果是这样,一些例子会被赞赏)或者可以使用其他东西吗?

2 个答案:

答案 0 :(得分:0)

文件安排可以是用户特定的。例如,我自己可以重复使用的方法和服务,例如认证(登录和注册),保护在一起。虽然特定于组件的方法可以位于组件的文件夹中。

答案 1 :(得分:0)

对于我的项目,正如我在人们的一些项目/建议中看到的那样,按使用分组。例如,任何要素模块都是自身的文件夹,子文件夹对组件进行分组。对于模块内部使用的服务,基于多少,我将它们放在与功能模块相同的级别或“共享”文件夹中。在应用程序级别,我有一个共享文件夹,其中包含模块之间的任何内容。

如果你还没有使用Angular CLI,那么这样做,因为它可以帮助你开发,更重要的是,它的生成器确实有助于驱动一个共同的结构。

至于如何更改菜单,这是一个完全不同且更大的问题。根据您的设置,将其硬编码到菜单中或创建控制菜单的服务。