AngularJS从v1.1.5迁移到v1.5.8参数'Login.Controller'是不是一个函数，得到了undefined

Question

我想将angularJS从版本1.1.5迁移到最新的1.5.8，但我得到这个错误：

angular.js:13920 Error: [ng:areq] Argument 'Login.Controller' is not a function, got undefined http://errors.angularjs.org/1.5.8/ng/areq?p0=Login.Controller&p1=not%20a%20function%2C%20got%20undefined

JS

var app = {}; 
app = angular.module('myApp', ['ngResource', 'ngRoute']) 

//Login Controller 
Login = { 
/** 
* Initializes the login page. 
*/ 
controller: function ($scope, $location, User) { 
    Login.initializeScopeVariables($scope); 
    Login.createScopeFunctions($scope, $location, User); 
}, 
initializeScopeVariables: function ($scope) { 
    $scope.$root.forgotPasswordUsername = null; 
}, 
createScopeFunctions: function ($scope, $location, User) { 
    $scope.reset = function() { 
     $scope.$root.filters = {}; 
     Login.resetForm($scope); 
    } 
    $scope.submit = function() { 
     Login.submitForm($scope, $location, User); 
    } 
    $scope.validate = function() { 
     if ($scope.loginForm.$valid) { 
      $('#submit-btn').linkbutton('enable'); 
     } else { 
      $('#submit-btn').linkbutton('disable'); 
     } 
    } 
    $scope.$root.submitPasswordReminder = function() { 
     if ($scope.$root.forgotPasswordUsername) { 
      mask(true); 
      User.sendPasswordReminder($scope.$root.forgotPasswordUsername).success(
       function (data) { 
        mask(false); 
        if (data.status == M2M.Response.ERROR) { 
         error(data.statusMessage); 
        } else { 
         info(Locale.get('passwordReminderSent')); 
         $scope.clearPasswordReminderForm(); 
        } 
       } 
      ).error(errorCallback); 
     } 
    } 

    $scope.$root.clearPasswordReminderForm = function() { 
     $('#forgot-password-window').window('close'); 
     $scope.$root.forgotPasswordUsername = null; 
    } 

    $(document).keypress(function (event) { 
     if (13 == event.keyCode) { 
      $scope.submit(); 
      $scope.$apply(); 
     } 
     if (27 == event.keyCode) { 
      $scope.reset(); 
      $scope.$apply(); 
     } 
    }) 
}, 

/** 
* Resets login form 
* 
* @param $scope 
*/ 
resetForm: function ($scope) { 
    $scope.username = ''; 
    $scope.password = ''; 
    $('input').removeClass('validatebox-invalid'); 
}, 
/** 
* Submits login form 
* 
* @param $scope 
* @param $location 
* @param User 
*/ 
submitForm: function ($scope, $location, User) { 
    if (!($scope.username && $scope.password)) { 
     return; 
    } 
    mask(true); 
    User.authenticate($scope.username, $scope.password).success(
     function (data) { 
      if (data.status == M2M.Response.ERROR) { 
       mask(false); 
       error(data.statusMessage); 
      } else { 
       location.href = 'main.html'; 
      } 
     } 
    ).error(errorCallback); 
} 

}

HTML

 <div class="login-area" ng-controller="Login.controller" style="width: 1300px; margin: auto"> 
     <form autocomplete="off"> 
      <div class="login-panel" ng-form name="loginForm" align="center"> 
       <table> 
        <tr> 
         <td><fmt:message key="username"/></td> 
         <td> 
          <input class="easyui-validatebox w140" type="text" name="username" 
            data-options="required:true" 
            ng-model="username" 
            ng-change="validate()" 
            required/> 
         </td> 
        </tr> 
        <tr> 
         <td><fmt:message key="password"/></td> 
         <td><input class="easyui-validatebox w140" type="password" name="password" 
            data-options="required:true" 
            ng-model="password" 
            autocomplete="off" 
            ng-change="validate()" 
            required/></td> 
        </tr> 
        <tr> 
         <td colspan="2"> 
          <a id="submit-btn" class="easyui-linkbutton" data-options="iconCls:'icon-ok',disabled: true" 
           ng-click="submit()"><fmt:message key="submit"/></a> 
          <a id="reset-btn" class="easyui-linkbutton" data-options="iconCls:'icon-undo'" 
           ng-click="reset()"><fmt:message key="reset"/></a></td> 
        </tr> 
       </table> 
       <div class="clr tac small"> 
        <a href="#" id="forgot-passwd" onclick="$('#forgot-password-window').window('open')"><fmt:message 
          key="login.forgotPassword"/></a> 
       </div> 
       <br> 
       <div class="clr tac"> 
        <fmt:message key="login.disclaimer"/> 
       </div> 
      </div> 
     </form> 
    </div> 

我不明白为什么这是在angular的最新版本中发生的。

我是否需要对代码进行更改？

Answer 1

这是您如何定义控制器。请参阅Angular Documentation。

myApp.controller('GreetingController', ['$scope', function($scope) { 
    $scope.greeting = 'Hola!'; 
}]); 

角需要知道which..err..component是一种服务，其中一个工厂，控制器等，让你与你的模块状yourApp.controller注册。

在上例中，GreetingController将是控制器的名称。所以在你的情况下，它会变成loginController。您可以在回调函数中定义所有功能。

function($scope,..){ 
    //code goes here. 
} 

其中...是其他依赖关系。

---

var app = {}; 
app = angular.module('myApp', ['ngResource', 'ngRoute']) 

//Login Controller 
app.Controller('LoginController', '$scope', '$location', 'User' function($scope, $location, User){ 
    $scope.initializeScopeVariables(); 
    $scope.createScopeFunctions(); 

     $scope.initializeScopeVariables= function() { 
       $scope.$root.forgotPasswordUsername = null; 
     } 

     $scope.createScopeFunctions= function() { 
      $scope.reset = function() { 
        $scope.$root.filters = {}; 
        $scope.resetForm(); 
      } 
      $scope.submit = function() { 
        $scope.submitForm(); 
      } 
      $scope.validate = function() { 
        if ($scope.loginForm.$valid) { 
          $('#submit-btn').linkbutton('enable'); 
        } else { 
          $('#submit-btn').linkbutton('disable'); 
        } 
      } 
      $scope.$root.submitPasswordReminder = function() { 
        if ($scope.$root.forgotPasswordUsername) { 
          mask(true); 
          User.sendPasswordReminder($scope.$root.forgotPasswordUsername).success(
            function (data) { 
              mask(false); 
              if (data.status == M2M.Response.ERROR) { 
                error(data.statusMessage); 
              } else { 
                info(Locale.get('passwordReminderSent')); 
                $scope.clearPasswordReminderForm(); 
              } 
            } 
          ).error(errorCallback); 
        } 
      } 

      $scope.$root.clearPasswordReminderForm = function() { 
        $('#forgot-password-window').window('close'); 
        $scope.$root.forgotPasswordUsername = null; 
      } 
      /** 
      * Resets login form 
      * 
      * @param $scope 
      */ 
      $scope.resetForm= function() { 
        $scope.username = ''; 
        $scope.password = ''; 
        $('input').removeClass('validatebox-invalid'); 
      }, 
      /** 
      * Submits login form 
      * 
      * @param $scope 
      * @param $location 
      * @param User 
      */ 
      $scope.submitForm= function() { 
        if (!($scope.username && $scope.password)) { 
          return; 
        } 
        mask(true); 
        User.authenticate($scope.username, $scope.password).success(
          function (data) { 
            if (data.status == M2M.Response.ERROR) { 
              mask(false); 
              error(data.statusMessage); 
            } else { 
              location.href = 'main.html'; 
            } 
          } 
        ).error(errorCallback); 
      } 
     } 
}); 
$(document).keypress(function (event) { 
     if (13 == event.keyCode) { 
       $scope.submit(); 
       $scope.$apply(); 
     } 
     if (27 == event.keyCode) { 
       $scope.reset(); 
       $scope.$apply(); 
     } 
}) 

我希望它会工作，它是根据角度1.5.x.只是调整自己的代码所以，让我知道如果你有任何错误。