Error: [ng:areq] Argument 'ext-modules/fleet/jsFleetController.js' is not a function, got undefined

Question

我每次加载模板文件时都会收到 "Error: [ng:areq] Argument 'ext-modules/fleet/jsFleetController.js' is not a function, got undefined" 这条错误消息。

下面是代码，请大神指点一下代码有什么问题。谢谢。

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Truck Trackers</title>


    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/font-awesome.min.css" rel="stylesheet" />

    <link href="main/app.css" rel="stylesheet" />
    <link href="ext-modules/fleet/jsFleet.css" rel="stylesheet" />
    <link href="ext-modules/drivers/jsDrivers.css" rel="stylesheet" />



    <script src="scripts/angular.js"></script>
    <script src="scripts/jquery-2.1.4.min.js"></script>
    <script src="scripts/angular-route.js"></script>


    <script src="main/appModule.js"></script>
    <script src="main/appRouting.js"></script>

    <script src="ext-modules/fleet/jsFleetModule.js"></script>
    <script src="ext-modules/fleet/jsFleetController.js"></script>

    <script src="ext-modules/drivers/jsDriversModule.js"></script>
    <script src="ext-modules/drivers/jsDriversController.js"></script>


    <script src="services/trucksService.js"></script>

</head>
<body class="container-fluid">
    <header class="js-title-bar">

                <div class="js-logo-area">
                    <img class="js-icon" ng-src="http://nebula.wsimg.com/eef77b1aea4eaf8d6ef180c127ac9733?AccessKeyId=FEE0E7FB4235C78BAABD&disposition=0&alloworigin=1" />
                    <div class="js-title-area">
                        <p class="js-logo-title"> <strong>Truck Tracker's</strong></p>
                        <p class="js-logo-subtitle">Where ever you GO, we FIND you !</p>
                    </div>   
            </div>

    </header>

        <div ng-view></div>

</body>
</html>

myApp 模块

"use strict";

angular.module("myApp", ["ngRoute","jsFleet","jsDrivers"]);

myApp 路由

angular.module('myApp').config(function ($routeProvider) {
    $routeProvider
    .when('/main', {
        templateUrl: 'main/main.html',

    })
    .when('/fleet', {

        controller: 'ext-modules/fleet/jsFleetController.js',
        templateUrl: 'ext-modules/fleet/jsFleetTemplate.html'
    })
        .when('/drivers', {
            controller: 'ext-modules/drivers/jsDriversController.js',
            templateUrl: 'ext-modules/drivers/jsDriversTemplate.html'

        })
    .otherwise({ redirectTo: '/main' });
});

main.HTML

<div class="icon-bar" href="#/main" >

    <a href="#/fleet" class="item">
        <i class="fa fa-truck" style="font-size:48px;"></i>
        <label>Fleet</label>
    </a>

         <a href="#/drivers" class="item">
             <i class="fa fa-users" style="font-size:48px;"></i>
             <label>Drivers</label>
         </a>

         </div>

jsFleet 模块

"use strict";    
angular.module("jsFleet", []);

jsFleet 模板

<div class="panel1 panel-primary">
    <div class="panel-heading" align="center">TRUCKS</div>
        <table class="table table-bordered table-condensed table-striped">

                <tr>
                    <th>TruckID</th>
                    <th>Status</th>
                    <th>Dest.</th>
                    <th>Alerts</th>
                </tr>
            <tr ng-repeat="row in trucks">
                <td>{{row.truckID}}</td>
                <td>{{row.status}}</td>
                <td>{{row.destination}}</td>
                <td>{{row.alerts}}</td>
            </tr>      

        </table>
    </div>

jsFleet 控制器

"use strict";

angular.module("jsFleet").controller("jsFleetController",
    ['$scope', 'trucksService',
        function ($scope, trucksService) {

                $scope.trucks = trucksService.getTrucks();

    }]);

trucksService.js

"use strict";

angular.module("jsFleet").service("trucksService",

       function () {
           this.getTrucks = function () {
               return trucks;
           };
           this.getTruck = function (truckID) {
               for (var i = 0, len = trucks.length; i < len; i++) {
                   if (trucks[i].truckID === parseInt(truckID)) {
                       return trucks[i];
                   }
               }
               return {};
           };
           var trucks = [
               {
                   truckID: 1,
                   status: Running,
                   destination: WPG,
                   alerts: Nothing
               },
                   {
                       truckID: 5,
                       status: Running,
                       destination: WPG,
                       alerts: Nothing
                   },
                   {
                       truckID: 2,
                       status: Running,
                       destination: WPG,
                       alerts: Nothing
                   },
                   {
                       truckID: 3,
                       status: Running,
                       destination: WPG,
                       alerts: Nothing
                   },
                   {
                       truckID: 4,
                       status: Running,
                       destination: WPG,
                       alerts: Nothing
                   }
           ];

       });

Answer 1

您在路由配置中的 controller: 定义不正确。 controller 参数需要指定控制器的名称，而不是控制器所在的文件。

而不是：

.when('/fleet', {

    controller: 'ext-modules/fleet/jsFleetController.js',
    templateUrl: 'ext-modules/fleet/jsFleetTemplate.html'
  })
  .when('/drivers', {
    controller: 'ext-modules/drivers/jsDriversController.js',
    templateUrl: 'ext-modules/drivers/jsDriversTemplate.html'

  })

你应该有：

.when('/fleet', {
    controller: 'jsFleetController',
    templateUrl: 'ext-modules/fleet/jsFleetTemplate.html'
  })
  .when('/drivers', {
    controller: 'jsDriversController',
    templateUrl: 'ext-modules/drivers/jsDriversTemplate.html'

  })

同时查看您的脚本，您的脚本似乎以错误的顺序加载。每个 JavaScript 文件必须先加载 ，然后 任何其他 JavaScript 才能引用它。因此，引用其他模块的 JavaScript 文件应该是最后加载的文件。

尝试更改脚本文件的顺序，即：

<script src="ext-modules/fleet/jsFleetModule.js"></script>
<script src="ext-modules/fleet/jsFleetController.js"></script>

<script src="ext-modules/drivers/jsDriversModule.js"></script>
<script src="ext-modules/drivers/jsDriversController.js"></script>

<script src="services/trucksService.js"></script>

<script src="main/appModule.js"></script>
<script src="main/appRouting.js"></script>

Answer 2

我猜问题出在你的路由中，当你指定控制器时你只需要给它起名字而不是 url:

controller: 'ext-modules/fleet/jsFleetController.js',

应该改为

controller: 'jsFleetController'

Error: [ng:areq] Argument 'ext-modules/fleet/jsFleetController.js' is not a function, got undefined

Error: [ng:areq] Argument 'ext-modules/fleet/jsFleetController.js' is not a function, got undefined

angularjs

angularjs-directive

angularjs-service

angularjs-scope

angularjs-controller