身份验证背后的 Angular 单页应用程序

Question

您好，我是 Angular 新手，需要帮助。

我想创建单页应用。

基本信息：

• 通过网址导航
• 整个应用程序都经过身份验证（如果未授权，则仅显示登录页面，可能会重置密码，联系页面等...->我将选择未经授权的网址）
• 身份验证背后是静态布局，如标题、菜单、侧边栏、页脚和内容容器（ng-view）

请帮帮我（html 结构、模板、控制器、指令等...）

我对结构的看法 页数：

• index.html
• 登录模板.html
• 布局模板.html
• menu-template.html
• content1.html
• content2.html
• content3.html
• content4.html
• 项目列表模板.html

我不知道索引页面中必须包含什么，但在 layout-template.html 中将是一些静态 html，一些模板，如 menu-template.html 和 ng-view，其中内容将通过 URL 显示。

在某些模板中将是另一个模板，例如用于此列表模板的带有控制器的项目列表模板

我想要每个模板的控制器，例如：(loginCtrl, layoutCtrl, menuCtrl, content1Ctrl)

我希望这是有道理的

谢谢

Answer 1

我是一个像你一样的 Angular 新手，并选择了 Yeoman Angular 生成器，因为它非常方便处理文件结构并制作所有需要的样板文件、单元测试环境等。所以，基本上在 @ 上检查一下987654321@ 并从那里开始教程。然后开始你自己的项目，并使用 Angular 子生成器创建视图，如下所示：

拳头让你的应用基本结构：

yo angular

然后使用子生成器添加带有路线的视图（角度生成器的详细信息可以从https://github.com/yeoman/generator-angular找到）

yo angular:route your_view
...

至少我使用 index.html 来定义整个应用程序的静态布局，然后我在页面的“中间部分”拥有视图，就像角度生成器默认示例使用由生成的单独 HTML 文件中的视图一样“哟” - 命令。我不需要（还）SASS，但我对引导 css 很好。最后，为了保持 HTML 文件美观整洁，我发现 ng-include 指令非常方便，例如如果使用 HTML 选项卡并将每个选项卡的内容放在自己单独的 HTML 文件中。

身份验证在后端完成，当用户未通过身份验证时，Web 服务器会静态重定向到登录页面，并在有有效授权时重定向到我的索引页面。

我相信还有很多其他方法可以做到这一点，但我就是这样做的。它工作得很好，而且似乎在维护方面也很方便......