我正在尝试使用多个模板和布局设置一个复杂的基于 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..
公共(public)页面:
任何人都可以访问的公共(public)页面。
布局:
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 中为此设置路由?
最佳答案
创建一个空的 main-Layout(例如 index.html),它只包含一个 ng-view 容器。可以根据路线更改 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
如果您想使用嵌套 View /模板构建更复杂的布局,请查看 ui-router: https://github.com/angular-ui/ui-router
关于javascript - AngularJs 不同路线的多种布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36889850/