Question

我正在尝试使用多个模板和布局设置基于AngularJS的复杂应用程序。但我真的不了解angularjs的路由机制，所以我正在寻找关于它的进一步解释，如果可能的话可能会有一些例子。

我有很多布局，我想根据路线使用不同的模板。

错误页面：

这是一个简单的错误页面，向用户发送不同的消息。

布局：

layouts/error.html

模板：

templates/error/404.html
templates/error/505.html
templates/error/403.html

这些页面

内部页面：

要访问这些页面，用户需要登录。

布局：

layouts/internal.html

此布局左侧有一个侧边栏，其中有一个菜单和一个聊天框，可以显示来自其他登录用户的消息，我希望避免在用户导航时重新加载。

模板路线：

/dashboard -> templates/internal/dashboard.html
/profile -> templates/internal/profile.html
/settings -> templates/internal/settings.html
/library -> templates/internal/library.html
etc..

公共页面：

任何人都可以使用的公开页面。

布局：

layouts/public.html

模板：

registration -> templates/public/registration.html
sign in -> templates/public/signin.html
forgot password -> templates/public/forgotpassword.html
about us -> templates/public/aboutus.html
etc..

我应该如何在angularjs中为此设置路由？

Answer 1

创建一个空的main-Layout（例如index.html），它只包含正文中的ng-view容器。视图可以根据路线进行更改。

示例：

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
...
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body>
  <div ng-view></div>
</body>
</html>

然后，您可以根据路线在ng-view中包含不同的部分。有关更多详细信息和示例代码，请参阅本教程：https://docs.angularjs.org/tutorial/step_07

如果要使用嵌套视图/模板构建更复杂的布局，请查看ui-router： https://github.com/angular-ui/ui-router

针对不同路线的AngularJs多个布局

错误页面：

内部页面：

公共页面：

1 个答案: