Error running AngularJS ES6

1
votes

I'm trying to run a simple AngularJS example using the latest ES6 syntax in html. Here's my html code:

<!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>

I don't really know what I'm missing here but I keep getting the following errors in console:

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 ...

My html output in browser:

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

Update: Fixed module declaration as:

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

But now I'm getting the following error in console:

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

3
htmlangularjsecmascript-6

3 Answers

2
votes

You're declaring the app incorrectly I believe:

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

Try that instead

1
votes

use 

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

If you are using to retrieve an existing module, You can use 

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

if you are creating a new module or overwrite any existing module, you use like this,

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

Problem finally fixed by using Angular JS version 1.6.x

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