2016-11-23 43 views
2

正在嘗試構建基本的帶有ES6的Angular待辦應用程序。據我所知,控制器應該註冊,但在路由到相關狀態時,我仍然會遇到標題錯誤。角度控制器爲ES6類:「[ng:areq]參數***控制器不是函數,未定義」

* App.js在索引中引用的是巴貝爾transpiled的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); 
}; 

更加混亂,在我看來,下面加載罰款的服務:

services/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); 
} 
+0

你能分享完整的錯誤信息嗎?是您的登錄或待辦事項控制器觸發錯誤? – Phil

+0

angular.js:13920錯誤:[ng:areq]參數'todosController'不是函數,未定義 http://errors.angularjs.org/1.5.8/ng/areq?p0=todosController&p1=not%20aNaNunction %2C%20got%20未定義 at ... –

+0

切換到相應狀態時登錄或待辦事項控制器錯誤。 –

回答

3

移動這三個電話

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 
+0

就是這樣。服務工作的唯一原因是因爲我在配置之前運行了該功能。非常感謝,那會變成一個巨大的兔子洞。 –

0

嘗試index.html中添加controller.js

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

糟糕,把這一部分留下。 dist /中的App.js是經過轉換的Webpack輸出。 –

相關問題