Question

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

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

到目前为止，它正在运行，但仅限于视图，具体取决于最后加载的控制器。

以下是代码：

路由配置，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'
      });

  }]);

Controller 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;

});

Controller 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;

});

使用$ routeProvider进行角度，多个控制器和路由

2 个答案: