AngularJs不同路线的多种布局

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

创建一个空主布局(如index.html)，它只包含正文中的ng视图容器。可以根据路由更改视图。

示例：

<!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视图中包含不同的部分。有关详细信息和示例代码，请参阅本教程：07

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