Angular、多个控制器和使用 $routeProvider 的路由答案

【问题标题】：Angular, multiple controllers and routing with $routeProviderAngular、多个控制器和使用 $routeProvider 的路由
【发布时间】：2016-01-27 03:48:03
【问题描述】：

我正在尝试使用单独的控制器正确设置 angularjs 应用程序。

使用$routeProvider，我想配置路由以便根据URL看到不同的视图。

到目前为止，它正在工作，但仅使用取决于加载的最后一个控制器的视图。

代码如下：

路由配置，app.js：

'use strict';

var app = angular.module('BalrogApp', ['ngRoute', 'ui.bootstrap', 'BalrogApp.controllers']);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/projectsList.html',
        controller : 'projectsController',
        controllerAs: 'p'
      })
      .when('/requests', {
        templateUrl: 'views/requestsList.html',
        controller : 'requestsController',
        controllerAs: 'r'
      })
      .when('/projects', {
        templateUrl: 'views/projectsList.html',
        controller : 'projectsController',
        controllerAs: 'p'
      })
      .otherwise({
        redirectTo: '/lol'
      });

  }]);

控制器 1，requestsController.js ：

'use strict';

var requestsControllerModule = angular.module('BalrogApp.controllers', ['ngRoute', 'ui.bootstrap']);

requestsControllerModule.controller('requestsController', function($rootScope, $scope, $location, $routeParams) {

  this.studentName = "Request data";
  this.studentMark = 75;

});

控制器 2，projectController.js ：

'use strict';

var projectsControllerModule = angular.module('BalrogApp.controllers', ['ngRoute', 'ui.bootstrap']);

projectsControllerModule.controller('projectsController', function($rootScope, $scope, $location, $routeParams) {

  this.studentName = "Project data";
  this.studentMark = 75;

});

主 html 页面，index.html：

    <!doctype html>
    <html lang="en" ng-app="BalrogApp">
    <head>
      <meta charset="UTF-8">
      <title>Student Details App</title>
      <link rel="stylesheet" href="../node_modules/angular-ui-bootstrap/ui-bootstrap-csp.css"/>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    </head>

    <body>
    Index page :

    <ng-view></ng-view>

    <!--Required JS Files List :start -->
    <script src="../node_modules/angular/angular.js"></script>
    <script src="../node_modules/angular/angular-route.js"></script>
    <script src="../node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.js"></script>

    <script src="controllers/requestsController.js"></script>
    <script src="controllers/projectsController.js"></script>

    <script src="js/app.js"></script>

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <!--Required JS Files List :end -->

    </body>
    </html>

HTML 请求视图：请求查看：

<div class="row-fluid">
  <div class="span2">{{r.studentName}} </div>
  <div style="display:inline-block; min-height:290px;">
    <uib-datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></uib-datepicker>
  </div>
</div>

HTML 项目视图：

Project view :
<div class="row-fluid">
  <div class="span2">{{p.studentName}} </div>
  <div style="display:inline-block; min-height:290px;">
    <uib-datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></uib-datepicker>
  </div>
</div>

所以那里的问题取决于index.html：

<script src="controllers/requestsController.js"></script>
<script src="controllers/projectsController.js"></script>

将产生一个工作项目视图，但不是工作请求视图。如果我在之后包含 requests 控制器，情况将相反。

另外，我的ControllerAs 语法有问题吗？由于我是从$routeProvider 使用它，所以它根本不起作用。

【问题讨论】：

您在控制台中看到任何错误吗？
视图不工作，控制台显示："Error: [ng:areq] Argument 'requestsController' is not a function, got undefined...
你已经为projectsController定义了两个url，如果你去/或/projects会发生什么？
在项目控制器中，为模块执行此操作： var projectsControllerModule = angular.module('BalrogApp.controllers', []);因为您已经在 projectsContoller 覆盖它之前定义了模块和依赖项..

标签： javascript angularjs angular-ui-bootstrap angularjs-routing angularjs-controller

【解决方案1】：

当您执行angular.module('BalrogApp.controllers', ['ngRoute', 'ui.bootstrap']); 时，它会创建一个新模块。您真正想要的是引用现有模块，否则每次加载控制器 JavaScript 文件时都会覆盖它。

将控制器初始化更改为：

angular.module('BalrogApp').controller('requestsController', function () {
    // ...
});

和

angular.module('BalrogApp').controller('projectsController', function () {
    // ...
});

这样，您将引用现有模块，并且不会每次都覆盖它。

【讨论】：

它是如何工作的？语法angular.module('BalrogApp.controllers', ... 将在模块controllers 中创建一个模块BalrogApp 并继承其依赖关系？我试图像您建议的那样从控制器中删除依赖项，但这对我不起作用。我也不知道我是否应该删除所有这些BalrogApp.controllers 以便只保留BalrogApp 你能提供一个plunker 吗？
只需按照我输入的方式输入即可。不是BalrogApp.controllers，而是BalrogApp 。
模块的名称是完全任意的，它不会继承任何你称之为的东西。它总是创建一个全新的模块。 docs.angularjs.org/guide/module
配置部分（使用控制器）应该在您定义控制器之后进行。就像在一个单独的文件中一样。在第一个文件中只保留模块定义：angular.module('BalrogApp', ['ngRoute', 'ui.bootstrap']).
谢谢！这修复了它。 app.js 包含在我的控制器之后，因此可能已经定义了控制器，但是它们使用的模块是在它们之后定义的，我想这就是问题所在。再次感谢

【解决方案2】：

在您的 app.js 中，您已经定义了模块的依赖关系，并且通过在控制器中再次定义您将覆盖它，修复控制器中的模块行，如下所示：

请求视图：

'使用严格';

var requestsControllerModule = angular.module('BalrogApp.controllers', []); // Fix This..

requestsControllerModule.controller('requestsController', function($rootScope, $scope, $location, $routeParams) {

  this.studentName = "Request data";
  this.studentMark = 75;

});

项目视图：

var projectsControllerModule = angular.module('BalrogApp.controllers', []); // Fix this..

projectsControllerModule.controller('projectsController', function($rootScope, $scope, $location, $routeParams) {

  this.studentName = "Project data";
  this.studentMark = 75;

});

【讨论】：

我这样做了，但这还不够。它仍然做同样的事情，我可以从 projectsController 访问数据，因为它是最后声明的，但我无法访问 requestsController...