Angular 控制器作为 ES6 类：“[ng:areq] 参数 ***控制器不是函数，未定义”答案

【问题标题】：Angular Controller as ES6 Class: "[ng:areq] Argument ***Controller is not a function, got undefined"Angular 控制器作为 ES6 类：“[ng:areq] 参数 ***控制器不是函数，未定义”
【发布时间】：2017-04-08 02:19:34
【问题描述】：

尝试使用 ES6 构建一个基本的 Angular 待办事项应用程序。据我所知，控制器应该正在注册，但在路由到关联状态时我继续收到标题错误。

*索引中引用的App.js是Babel转译的Webpack输出

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="node_modules/angular-material/angular-material.css" />
  </head>
  <body ng-app="todoApp">
    <script src="../dist/app.js"></script>
    <div ui-view></div>
  </body>
</html>

app.js

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import ngStorage from 'angular-storage';
import ngMaterial from 'angular-material';
import ngAnimate from 'angular-animate';
import ngAria from 'angular-aria';

import config from './config/config'

(() => {
  const ngModule = angular.module('todoApp', [uiRouter, ngStorage, ngAnimate, ngAria, ngMaterial]);
  config(ngModule);
})();

config.js

import httpAuthInterceptor from './interceptors/httpAuthInterceptor';
import constants from './constants';

import login from '../login/index';
import todos from '../todos/index';
import todo from '../todos/todo/index';
import services from '../services/index';

export default ngModule => {
  httpAuthInterceptor(ngModule);
  services(ngModule);

  ngModule.constant('CONSTANTS', constants);

  ngModule.config(($stateProvider, $urlRouterProvider, $httpProvider) => {
    $urlRouterProvider.otherwise('/login');

    $stateProvider
      .state('login', {
        url: '/login',
        templateUrl: 'app/login/login.html',
        controller: 'loginController as vm'
      })
      .state('todos', {
        url: '/todos',
        templateUrl: 'app/todos/todos.html',
        controller: 'todosController as vm'
      });

    $httpProvider.interceptors.push('httpAuthInterceptor');

    login(ngModule);
    todos(ngModule);
    todo(ngModule);
  });
}

登录/index.js

import controller from "./login.controller";
import service from "./login.service";

export default ngModule => {
  controller(ngModule);
  service(ngModule);
};

login/login.controller.js

export default ngModule => {
  let controllerName = 'loginController';

  class loginController {
    constructor(loginService) {
      this.loginService = loginService;
      this.username;
      this.password;
    }
  }

  ngModule.controller(controllerName, loginController);
};

让我更困惑的是，下面的服务可以正常加载：

services/index.js

import session from "./session.service";

export default ngModule => {
  session(ngModule);
};

services/session.service.js

export default ngModule => {
  let providerName = 'sessionService';

  class sessionService {
    constructor(store, CONSTANTS) {
      this.CONSTANTS = CONSTANTS;
      this.store = store;

      this.currentSessionToken;

      this.init();
    }

    init() {
      this.currentSessionToken = this.retrieveSession();
      console.log(this.currentSessionToken)
    }

    storeSession (token) {
      this.store.set(this.CONSTANTS.JWT_TOKEN_KEY, token);
      this.currentSessionToken = token;
    }

    retrieveSession() {
      return this.store.get(this.CONSTANTS.JWT_TOKEN_KEY);
    }

    isAuthenticated() {
      let token = this.retrieveSession();
      if(token) {
        let tokenParams = _parseJwt(token);
        return Math.round(new Date().getTime() / 1000) <= tokenParams.exp;
      } else {
        return false;
      }
    }
  }

  ngModule.service(providerName, sessionService);

  let _parseJwt = function(token) {
    let base64Data = token.split('.')[1];
    let base64 = base64Data.replace('-', '+').replace('_', '/');
    return JSON.parse(this.$window.atob(base64));
  }.bind(sessionService);
}

【问题讨论】：

你能分享完整的错误信息吗？是您的登录或待办事项控制器触发了错误吗？
angular.js:13920 错误：[ng:areq] 参数 'todosController' 不是函数，未定义 errors.angularjs.org/1.5.8/ng/… at...
切换到相应状态时出现登录或 todos 控制器错误。
那么您的todosController 是什么样的？
与登录相同，构造函数为空。

标签： javascript angularjs ecmascript-6 babeljs angular-controller

【解决方案1】：

尝试在 index.html 中添加你的 controller.js

<script src="../dist/login/login.controller.js"></script>

【讨论】：

糟糕，这部分被忽略了。 dist/ 中的 App.js 是转译后的 Webpack 输出。

【解决方案2】：

移动这三个调用

login(ngModule);
todos(ngModule);
todo(ngModule);

在config函数之外；他们根本不属于那里。

// in config.js

export default ngModule => {
  httpAuthInterceptor(ngModule);
  services(ngModule);
  login(ngModule);
  todos(ngModule);
  todo(ngModule);

  ngModule.constant('CONSTANTS', constants);

  ngModule.config(($stateProvider, $urlRouterProvider, $httpProvider) => {
    // etc

【讨论】：

就是这样。该服务正常工作的唯一原因是因为我在配置之前运行了该功能。非常感谢，那会变成一个巨大的兔子洞。