控制器未根据控制台注册

Posted 2023-02-24

【中文标题】控制器未根据控制台注册

【英文标题】：Controller not registered according to console

【发布时间】：2017-10-13 09:26:40

【问题描述】：

由于某种原因，我的控制器似乎没有注册，老实说我不确定为什么......

我一直在关注 PluralSight 上的 AngularJS 和 Django 开发课程。讲师的堆栈和我的堆栈之间的唯一区别是我使用的是 Angular 1.6.4，而他使用的是 1.5.0。我之前遇到过一些错误（比如路由语法），但总体来说还不错。

编辑：

我应该提一下，我只是按照讲师的指示编写与他相同的代码。

---

然而，现在我只是卡住了。我在 scrumboard.config.js 中有这个路由：

(function () 

    "use strict";

    angular.module('scrumboard.demo', ["ngRoute"])
        .config(["$routeProvider", config])
        .run(["$http", run]);

        function config($routeProvider) 

            $routeProvider
                .when('/', 
                    templateUrl: "/static/html/scrumboard.html",
                    controller:  "ScrumboardController",
                )
                .when('/login', 
                    templateUrl: "/static/html/login.html",
                    controller:  "LoginController",
                )
                .otherwise('/');
        

        function run($http) 
            $http.defaults.xsrfHeaderName = 'X-CSRFToken';
            $http.defaults.xsrfCookieName = 'csrftoken';
        
)();

这个控制器用于login.html：

(function() 

    "use strict";

    angular.module("scrumboard.demo", [])
        .controller("LoginController",
                    ["$scope", "$http", "$location", LoginController]);

    function LoginController($scope, $http, $location) 

        $scope.login = function () 

            $http.post('/auth_api/login/', $scope.user)
                .then(function (response)
                    $location.url("/");
                ,
                function(error) 
                    //failure
                    $scope.login_error = "Invalid username or password";
                );
        ;
    ;

)();

导航到localhost:8000/#!/login 时，我可以看到我的表单：

<form ng-submit="login()">
    <div style="..."> login_error </div>
    <div>
        <label>Username</label>
        <input type="text" ng-model="user.username"/>
    </div>
    <div>
        <label>Password</label>
        <input type="password" ng-model="user.password"/>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</form>

但是出于某种奇怪的原因，我的控制台一直告诉我我的 LoginController 没有注册。

谁能帮助我正确的方向？

对不起，如果我遗漏了任何类型的文件，但我对 Angular 很陌生，所以我真的不知道要添加什么。

如果您需要任何其他信息，请告诉我！

【问题讨论】：

你能显示你的脚本标签在 index.html 中的加载顺序吗？

【参考方案1】：

从控制器对login.html 的定义中删除[]。

angular.module("scrumboard.demo")
    .controller("LoginController",
                ["$scope", "$http", "$location", LoginController]);

【讨论】：

正如另一个答案中提到的那样，我尝试了使用和不使用[]，但路线似乎仍然抛出相同的 hissyfit...

@geostocker 你有相同的ScrumboardController 代码吗，如果有，也将[] 移到那里。

【参考方案2】：

您将模块scrumboard.demo 声明两次。

删除[]

 angular.module("scrumboard.demo")
        .controller("LoginController",
                    ["$scope", "$http", "$location", LoginController]);

没有angular.module()的第二个参数是getter，否则是setter

【讨论】：

我也是这么想的，但即使没有[]，它也会抛出同样的问题。我添加了[] 以检查它是否会产生任何影响。不过感谢您的建议！ :)

当您回滚到与教程中相同的版本时会发生什么...并确保ngRoute 版本也匹配？

你也忘了包含LoginController所在的文件吗？

【参考方案3】：

在入口点 html 中，文件 scrumboard.config.js 的脚本标记应位于文件控制器文件之前。同样正如@charlietfl 所说，应该删除两次声明。

这样，

<script src="your_path/scrumboard.config.js"></script>
<script src="your_path/scrumboard.controller.js"></script>

希望这能解决问题。