Контроллер Angular как класс ES6: [ng:areq] Аргумент ***Контроллер не является функцией, стал неопределенным

Попытка создать базовое приложение todo на Angular с ES6. Насколько я могу судить, контроллер должен регистрироваться, но я продолжаю получать ошибку заголовка при перенаправлении в связанное состояние.

*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.controller.js

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

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

  ngModule.controller(controllerName, loginController);
};

Меня больше смущает то, что сервис ниже загружается нормально:

сервисы/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);
}

javascript babeljs angularjs ecmascript-6 angular-controller
person Community    schedule 23.11.2016    source источник
comment
Можете ли вы поделиться полным сообщением об ошибке? Это ваш логин или контроллер todo вызывает ошибку?   -  person Phil    schedule 24.11.2016
comment
angular.js:13920 Ошибка: [ng:areq] Аргумент todosController не является функцией, он не определен errors.angularjs.org/1.5.8/ng/ в...   -  person    schedule 24.11.2016
comment
Либо логин, либо ошибки контроллера todos при переходе в соответствующее состояние.   -  person    schedule 24.11.2016
comment
Так как же выглядит ваш todosController?   -  person Phil    schedule 24.11.2016
comment
То же, что и логин, но с пустым конструктором.   -  person    schedule 24.11.2016
comment
Вам нужно устранить потенциальные проблемы здесь. Либо предоставьте свою реализацию todosController, либо удалите состояние todos из своего приложения, чтобы убедиться, что это не проблема.   -  person Phil    schedule 24.11.2016
comment
Удаление состояния todos, операторов импорта todos/todo и вызовов функций в конфигурации не приводит к изменению ошибки.   -  person    schedule 24.11.2016
comment
Круто, спасибо, что попробовал. Уверен, у меня есть ответ для вас   -  person Phil    schedule 24.11.2016

Ответы (2)


arrow_upward
4
arrow_downward

Переместите эти три вызова

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
person Phil    schedule 23.11.2016
comment
Вот оно. Единственная причина, по которой служба работала, заключалась в том, что я запустил эту функцию до config. Большое спасибо, это превратилось бы в гигантскую кроличью нору. - person ; 24.11.2016

arrow_upward
0
arrow_downward

Попробуйте добавить свой controller.js в index.html

<script src="../dist/login/login.controller.js"></script>
person eHattori    schedule 23.11.2016
comment
Ой, пропустил эту часть. App.js в dist/ — это транспилированный вывод Webpack. - person ; 24.11.2016