2016-12-01 14 views
0

html로 최신 ES6 구문을 사용하여 간단한 AngularJS 예제를 실행하려고합니다. 여기 내 html 코드입니다 :AngularJS ES6 실행 중 오류가 발생했습니다.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Basic Angular JS</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script data-require="[email protected]" data-semver="0.32.2" src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.32.2/es6-shim.min.js"></script> 
</head> 
<body> 

<div ng-app="app" ng-controller="SampleCtrl as sc"> 
    <h3>Hello {{sc.firstName + " " + sc.lastName}}!</h3> 
</div> 

<script> 
(function(){ 
    'use strict'; 
    class SampleCtrl { 
     constructor() { 
      this.firstName = "John"; 
      this.lastName = "Doe"; 
      console.log("ctrl works"); 
     } 
    } 

    angular 
     .module('app') 
     .controller('SampleCtrl', SampleCtrl); 
})(); 

</script> 
</body> 
</html> 

난 정말 내가 여기에 누락 모르겠어요하지만 콘솔에서 다음과 같은 오류가 점점 계속 : 브라우저에서

Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.4.8/ $injector/nomod?p0=app ... Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/ $injector/modulerr?p0=app ...

내 HTML 출력 :

Hello {{sc.firstName + " " + sc.lastName}}! 

업데이트 : 고정 모듈 선언과 같은 :

angular 
     .module('app', []) 
     .controller('SampleCtrl', SampleCtrl); 

하지만 지금은 콘솔에서 다음과 같은 오류 받고 있어요 :

TypeError: Class constructor SampleCtrl cannot be invoked without 'new'

답변

1

당신은 응용 프로그램을 선언하고 잘못 저는 믿습니다 :

angular 
    .module('app', []) 
    .controller('SampleCtrl', SampleCtrl); 

그 시도 대신에

+0

은 이제 콘솔에 오류가있어 ... 그 고정 : 형식 오류 : 클래스 생성자가 SampleCtrl이 '새로운' – BangularTK

+1

이 1.5.x.를 시도 @BangularTK없이 호출 할 수 없습니다 정확히 언제 이것이 고쳐 졌는지 기억하지 못합니다. – estus

+0

@estus YESSS! 나는 1.6.x를 시도했고 그것은 지금 매력처럼 작동한다 !! 나는 너에게 충분히 감사 할 수 없다! :) – BangularTK

1

사용

angular.module('app',[]).controller('SampleCtrl', SampleCtrl); 

당신이 우리 인 경우 기존 모듈을 검색 할 수 보내고, 당신은

angular.module('app',[]).controller('SampleCtrl', SampleCtrl); 
1

문제는 마침내 각도 JS 버전을 사용하여 고정, 당신은 다음과 같이 사용, 새 모듈을 만드는 경우

angular.module('app').controller('SampleCtrl', SampleCtrl); 

를 사용하거나 기존 모듈을 덮어 쓸 수 있습니다 1.6.x 이상인

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"></script> 
관련 문제