运行AngularJS ES6的错误

我正在尝试使用HTML中的最新ES6语法运行一个简单的AngularJS示例。这是我的HTML代码：

<!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="es6-shim@0.32.2" 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>

我真的不知道我在这里缺少什么，但是我一直在控制台中遇到以下错误：

未被发现的错误：[$注射器：nomod] http：//errors.angularjs.org/1.4.4.4.4/jullumentor/nomod？p0 = app ... 未接收的错误：[$喷油器：Modulerr] http：//errors.angularjs.org/1.4.4.4/juljoightor/modulerr？p0 = app ...

我在浏览器中的HTML输出：

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

更新：固定模块声明为：

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

，但现在我在控制台中遇到以下错误：

TypeError：如果没有"新"

您相信您正在错误地声明该应用程序：

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

尝试

使用

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

如果您用来检索现有模块，则可以使用

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

如果要创建一个新的模块或覆盖任何现有模块，则使用这样的使用，

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

最终通过使用Angular JS版本1.6.x

解决了问题

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

答案Bangulartk已经被确认了，但是我想为人们不准备出于任何原因而准备更新版Angularjs的案例。

我正在使用1.4.7，一旦我将函数的控制器从函数重构为ES6类。

typeError：如果没有"新"'
，就无法调用类构造函数className

为了在不更新Angularjs的情况下进行操作，我将班级的构造包裹在一个功能中。

在此示例中，它喜欢：

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

再次，不是最好的解决方案，而是在更新Angularjs依赖之前购买时间的临时解决方法。

相关内容

最新更新

热门标签：