Question

尝试使用ES6构建基本的Angular todo应用程序。据我所知，控制器应该注册，但在路由到关联状态时我仍然会得到标题错误。

*索引中引用的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);
};

服务/ 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);
}

Answer 1

移动这三个电话

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

Answer 2

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

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

角度控制器为ES6类：“[ng：areq]参数***控制器不是函数，未定义”

2 个答案: