Angular 中的 1 到 3 个控制器

Question

我是 angularJS 的新手，所以我仍在学习 "angular way" 做事的技巧，因此寻求建议。

我开始构建我的 login/register/forgotten_password 视图，现在可以正常工作了。所以路由看起来基本上是这样的：

mainApp.config(function ($routeProvider) {
$routeProvider
   .when('/login',
   {
       controller: 'loginCtrl',
       templateUrl: 'views/login.html'
   })
   .when('/register',
   {
       controller: 'registerCtrl',
       templateUrl: 'views/register.html'
   })
   .when('/dashboard',
   {
       controller: 'dashboardCtrl',
       templateUrl: 'views/dashboard.html'
   })
})

问题来了 and/or 我的问题是：

成功登录后，您将被重定向到加载到 ng-view 中的仪表板。仪表板确实是视图，但一旦您进入应用程序（侧边栏、顶部栏、聊天...），应该会有更多的控制器和模板。

你会如何处理这个问题？

我在 html 元素上还有一个 globalCtrl 来处理其他事情，以防万一这些信息可能有任何帮助。

Answer 1

这是在 Angular JS 中使用 $routeProvider 的缺点。在angularJS中使用$routeProvider定义路由时，单个路由只能指向单个视图，没有使用$routeProvider嵌套视图的概念。

当您谈论在视图中包含多个模板时，您是在谈论在单个视图中包含嵌套视图。不幸的是 Angular 的 $routeProvider 没有提供。但是现在出现了 ui-router，它将路由的概念替换为状态。您可以在一个状态中定义多个子状态，每个子状态可以指向不同的模板。查看以下内容 link 并按照简单的步骤在您的应用中增强视图和嵌套视图。

ui-router

Answer 2

你不应该再考虑控制器了。而是在 "components" 中思考。互联网上有很多关于如何学习这种（更好的）方法的文章。从这里开始：Refactoring Angular Apps to Component Style

tl;dr; 为视图的每个 section/part 创建一个组件（元素指令）。在你的例子中 <dashboard>, <sidebar>, <topbar>, ...

您可以（并且应该）路由到组件！看到这个 issue for more information. Here is a "real life" example on how to achieve this: https://github.com/ui-router/sample-app-ng1

Angular 中的 1 到 3 个控制器

From 1 to 3 controllers in Angular

angularjs

angular-routing