Angular，多个控制器和使用 $routeProvider 的路由

Question

我正在尝试使用单独的控制器正确设置 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，projectsController.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>

将产生工作项目视图，但不是工作请求视图。如果我在之后包括请求控制器，这将是相反的。

此外，我的 ControllerAs 语法有问题吗？因为我在 $routeProvider 中使用它，所以它根本不起作用。

Answer 1

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

将您的控制器初始化更改为：

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

和

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

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

Answer 2

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

请求查看：

'use strict';

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;

});

Angular，多个控制器和使用 $routeProvider 的路由

Angular, multiple controllers and routing with $routeProvider

javascript

angularjs

angularjs-routing

angular-ui-bootstrap

angularjs-controller