CODEWITHSUNDEEP
javascriptangular
Rolando
Rolando

Reputation: 62704

Angular not defined when trying angular2?

I am trying out angular2 in the ES5 way with this code:

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

In chrome I am getting the nasty error:

Uncaught ReferenceError: angular is not defined

Specifically with the line that says: 

 new angular.Component({

Upvotes: 4

Views: 6532

Answers (3)

jamcoupe
jamcoupe

Reputation: 1452

Here you go this is your example working in a JSFiddle

https://jsfiddle.net/rmt7m0km/1/ with the angular being set as an external resource 

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

I used https://angular.io/guide/setup

Upvotes: 0

TuffyHe
TuffyHe

Reputation: 1

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

Upvotes: 0

Anil Singh
Anil Singh

Reputation: 4212

Try this one.

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

Upvotes: 3

Related Questions