javascript - angularjs 工厂未定义

Question

我有以下userModule:

(function () {
var userModule = angular.module('user', [
    'Auth'
]);

userModule.controller('UserController', ['$http', '$scope', function (UserFactory) {
    var uc = this;
    uc.user ={}; //set when login

    uc.login = login;

    function login(username, password)
    {
        UserFactory.login(username,password).then(function success(reponse){
            uc.user = reponse.data
        })
    }
}]);

userModule.factory('UserFactory', function UserFactory ($http)
{
    'use strict';
    return{
        login: login
    };
    function login(username, password)
    {
        return $http.post(API_URL + '/login',
            {
                username: username,
                password: password
            });
    }

});

})();

现在，当我调用登录函数时，我收到一条错误消息，告诉我 UserFactory 未定义

谁能告诉我我做错了什么？

我的表格

        <form class="panel-body wrapper-lg" ng-controller="UserController as userCtrl"
          ng-submit="userCtrl.login(userCtrl.user.username, userCtrl.user.password)" >
        <div class="form-group">
            <label class="control-label">Brugernavn</label>
            <input type="email" class="form-control input-lg" id="txt_username" name="username"
                   placeholder="Brugernavn" ng-model="userCtrl.user.username">
        </div>
        <div class="form-group">
            <label class="control-label">Kodeord</label>
            <input type="password" name="password" placeholder="Kodeord" class="form-control input-lg"
                   ng-required="" ng-model="userCtrl.user.password">
        </div>
        <input type="submit" class="btn btn-lb-primary" value="Log på">

    </form>

Answer 1

当使用数组作为第二个参数定义 Controller 时，您实际上只是告诉 Angular 依赖注入(inject)引擎在作为最后一个参数的函数/闭包中注入(inject)什么内容。因此，您必须明确告诉它注入(inject) UserFactory。在您的情况下， Controller 闭包中的 UserFactory 将是 $http 服务的实例。

userModule.controller('UserController', ['$http', '$scope', 'UserFactory', function ($http, $scope, UserFactory) {
    var uc = this;
    uc.user ={}; //set when login

    uc.login = login;

    function login(username, password)
    {
        UserFactory.login(username,password).then(function success(reponse){
            uc.user = reponse.data
        })
    }
}]);

虽然我不确定这有什么区别，但我喜欢按时间顺序声明我的模块、服务等，即首先创建您的 userModule，然后创建您的 UserFactory，最后是您的 Controller 。

作为优化的一个想法，请尝试为您的工厂使用与 Controller 相同的语法:

userModule.factory('UserFactory', ['$http', function UserFactory ($http)
{
    //....
}]);

使用数组语法的原因是，当您缩小 js 时，局部变量将具有一些无法解析为服务的名称，因为 Angulars 依赖注入(inject)器无法读取变量名称，最终看起来像:

userModule.factory('UserFactory', ['$http', function UserFactory (t)
{
    //....
}]);