javascript - AngularJs 不同路线的多种布局

标签 javascript angularjs angular-ui-router

我正在尝试使用多个模板和布局设置一个复杂的基于 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/

相关文章:

javascript - Angular ui 路由器 - 多次使用相同的 templateUrl 和 Controller

javascript - Angular UI Router - 嵌套路由不适用于具有嵌套状态的模板

javascript - 如何覆盖 javascript 中返回的嵌套方法?

javascript - 将输入与多个属性选择器匹配

javascript - Angular JS 基于输入框的计算

jquery - AngularJS (Blueimp Jquery-file-uploader) 与 Rails + Devise - 已完成 401 未经授权

angular - angular 中的多个应用程序组件

javascript - 将过滤器应用于 observableArray?

php - jQuery 和 PHP 建议答案

javascript - AngularJS $routeProvider 路由按页面不同?