CODEWITHSUNDEEP
htmlangularjsecmascript-6
BangularTK
BangularTK

Reputation: 554

Error running AngularJS ES6

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'

Upvotes: 2

Views: 335

Answers (4)

Guilherme Dellagustin
Guilherme Dellagustin

Reputation: 83

The answer BangularTK was already confirmed, but I'd like to offer an alternative for cases where people are not ready to update to a newer version of AngularJS for any reason.

I'm using 1.4.7 and I faced the exact same issue once I refactored a controller from a function into a ES6 class.

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

In order to work it around without updating AngularJS, I wrapped the construction of my class into a function.

In this example, it would like like:

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

    function SampleCtrlWrapper() {
        return new SampleCtrl();
    }

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

</script>

Again, not the best solution, but a temporary workaround to buy time before you update your AngularJS dependency.

Upvotes: 1

BangularTK
BangularTK

Reputation: 554

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>

Upvotes: 1

Kannan Thangadurai
Kannan Thangadurai

Reputation: 1135

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);

Upvotes: 1

rrd
rrd

Reputation: 5957

You're declaring the app incorrectly I believe:

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

Try that instead

Upvotes: 2

Related Questions