Question

我正在使用此代码尝试ES5方式的angular2：

<html>
    <head>
            <script src="https://code.angularjs.org/2.0.0-alpha.31/angular2.sfx.dev.js"></script>
            <script>
            function AppComponent() {}

            AppComponent.annotations = [
                new angular.Component({
                        selector: 'my-app'
                }),
                new angular.View({
                        template: '<h1>My first Angular 2 App</h1>'
                })
            ];

            document.addEventListener('DOMContentLoaded', function() {
              angular.bootstrap(AppComponent);
            });
            </script>
    </head>
    <body>
        <my-app></my-app>
    </body>
</html>

在Chrome中我遇到了令人讨厌的错误：

Uncaught ReferenceError: angular is not defined

具体说明：

 new angular.Component({

Answer 1

试试这个。

<!DOCTYPE html>
<html>

<head>
        <link rel="stylesheet" href="style.css" />
        <script src="https://code.angularjs.org/2.0.0-alpha.31/angular2.sfx.dev.js"></script>
        <script>
                function Service() {};

                Service.prototype.greeting = function() {
                        return 'hello';
                };

                var Cmp = ng.
                Component({
                        selector: 'cmp',
                        viewInjector: [Service]
                }).
                View({
                        template: '{{greeting}} world!'
                }).
                Class({
                        constructor: [Service, function Cmp(service) {
                                this.greeting = service.greeting();
                        }]
                });

                document.addEventListener('DOMContentLoaded', function() {
                        ng.bootstrap(Cmp);
                });
        </script>
</head>

<body>
        <cmp></cmp>
</body>

</html>

Answer 2

在这里，这是你在JSFiddle

中工作的例子

https://jsfiddle.net/rmt7m0km/1/将角度设置为外部资源

<body>
    <script>
        function AppComponent() {}
            AppComponent.annotations = [
              new angular.ComponentAnnotation({
                selector: 'my-app'
              }),
              new angular.ViewAnnotation({
                template: '<h1>My first Angular 2 App</h1>'
              })
            ];
            document.addEventListener('DOMContentLoaded', function() {
              angular.bootstrap(AppComponent);
            });
    </script>
    <my-app></my-app>
</body>

我使用了https://angular.io/guide/setup

Answer 3

use ng, not angular

    function AppComponent() {
        this.text = 'Hello';
    };

    AppComponent.annotations = [
        new ng.ComponentAnnotation({
                selector: 'my-app'
        }),
        new ng.ViewAnnotation({
                template: '<h1>{{text}}, My first Angular 2 App</h1>'
        })
    ];

    document.addEventListener('DOMContentLoaded', function() {
      ng.bootstrap(AppComponent);
    });

尝试angular2时角度没有定义？

3 个答案: