如何在 Angular 1.6 中加载控制器（参数“simpleController”不是函数，未定义）答案

【问题标题】：How to load controller in Angular 1.6 (Argument 'simpleController' is not a function, got undefined)如何在 Angular 1.6 中加载控制器（参数“simpleController”不是函数，未定义）
【发布时间】：2017-11-05 12:22:06
【问题描述】：

我正在尝试学习 AngularJS，我有 View1，它使用 simpleController，但是 AngularJS (1.6) 抛出错误，我找不到正确的语法来使它工作。

我的存储库是：https://github.com/tommcclean/Learning_Angular。

错误：ng:areq。不好的论据。参数“simpleController”不是函数，未定义

View1 包含...

<div ng-controller="simpleController as ctrl">
    <h2>View One</h2>

    <p>{{ ctrl.testValue }}</p>
</div>

simpleController 包含...

"use strict";

(function () {
    angular.module('demoApp').controller('simpleController', []);

    function simpleController() {
        var self = this;

        self.testValue = "Test Value";

        self.updateValue = function () {
            self.testValue = "Test Value Updated";
        };

        return self;
    };
});

demoApp 是由我首先加载的 routes.js 文件创建的。

"use strict";

var app = angular.module('demoApp', ["ngRoute"]);

app.config(function ($routeProvider) {
    $routeProvider
        .when('/view1',
        {
            controller: 'simpleController',
            templateUrl: '../views/view1.html'
        })
        .otherwise({ redirectTo: '/view1' });
});

我的“水疗中心”主页包含...

<!DOCTYPE html>
<html>

<head>
    <title>Sample Demo Application</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>

<body ng-app="demoApp" class="container">
    <h1>Welcome to my Sample Application</h1>

    <a href="#!view1">View 1</a>

    <div ng-view></div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <script src="../app/initialise/routes.js"></script>
    <script src="../app/controllers/simpleController.js"></script>

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>

【问题讨论】：

标签： angularjs model-view-controller single-page-application

【解决方案1】：

查看 .controller 定义应该将函数而不是空数组作为第二个参数。

"use strict";

(function () {
    angular.module('demoApp').controller('simpleController', simpleController);

    function simpleController() {
        var self = this;

        self.testValue = "Test Value";

        self.updateValue = function () {
            self.testValue = "Test Value Updated";
        };

        return self;
    };
});

"use strict";

var app = angular.module('demoApp', ["ngRoute"]);

app.config(function ($routeProvider) {
    $routeProvider
        .when('/view1',
        {
            controller: 'simpleController',
            controllerAs: 'ctrl',
            templateUrl: '/view1.html'
        })
        .otherwise({ redirectTo: '/view1' });
});

(function () {
    function simpleController() {
        var self = this;

        self.testValue = "Test Value";

        self.updateValue = function () {
            self.testValue = "Test Value Updated";
        };

        return self;
    };
    angular.module('demoApp').controller('simpleController', simpleController);

})();

<body ng-app="demoApp" class="container">
    <h1>Welcome to my Sample Application</h1>

    <a href="#!view1">View 1</a>

    <div ng-view></div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    
    <script type="text/ng-template" id="/view1.html">
  
<div>
    <h2>View One</h2>

    <p>{{ ctrl.testValue }}</p>
</div>
</script>
</body>

【讨论】：

谢谢肖恩，这似乎已经解决了这个错误，但我现在收到错误“错误：$controller:ctrlreg。未注册具有此名称的控制器。名称为“simpleController”的控制器没有注册。”是这种变化的结果，还是我做错了什么？
嗯不确定错误有点不熟悉。将尝试将您的代码粘贴到此处的运行示例中。
@TomMcClean 知道了这么几件事，ng-controller 不是必需的，只需要在路由定义中使用控制器，另一件事是没有调用 IIFE，所以在结束并修复它。
另外，非常感谢您为问题提供了完整的上下文，并没有让它变得庞大，非常感谢:)
感谢您花时间帮助这个 Shaun，这是一个很大的帮助，我现在可以按照您的建议运行它！ :)