CODEWITHSUNDEEP
javascriptangular
user3531149
user3531149

Reputation: 1539

AngularJs2 'angular not defined' error following starting guide

I'm getting started with AngularJs 2 by following their quickstart

which has been working just fine so far.

Now I have moved on to their displaying data guide but I got stuck and this point.I'm using ES5.

the index : 

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Angular 2 Quickstart</title>
        <!-- Angular is working on removing the traceur dependency -->
        <script src="node_modules/angular2/bundles/angular2.sfx.dev.js"></script>
        <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
        <script src="app.js"></script>
        <script src="components/display.js"></script>
    </head>

    <body>
        <my-app></my-app>
        <display-stuff></display-stuff>
    </body>
</html>

The display.js: 

function DisplayComponent()
{
    this.myOwnVar = 'Chicki chicki Gabriel';
}

DisplayComponent.annotations = [
    new angular.ComponentAnnotation({
        selector: 'display'
    }),
    new angular.ViewAnnotation({
        template:
            '<p>My name is, hi, my name is who, my name is: {{ myOwnVar }}</p>'
    })
];

It says angular is not defined which I think is, since the app.js from the previous tutorial works perfectly fine: 

(function() {
    var AppComponent = ng
        .Component({
            selector: 'my-app',
            template: '<h1>My first Template audited gf</h1>'
        })
        .Class({
            constructor: function() {

            }
        });

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

Upvotes: 1

Views: 366

Answers (1)

lokanx
lokanx

Reputation: 1499

For a working example, see https://gist.github.com/lokanx/6bc34b10bbe9cd7c2d59.

display.js

(function () {
   var Display = ng.Component({
        selector: 'display',
        templateUrl: 'views/display.html',
        directives: [ng.NgFor, ng.NgIf],
        providers: [Display]
    })
    .Class({
        constructor: function () {
            this.myName = "Alice";
            this.names = ["Aarav", "Martín", "Shannon"];
        }
    });

    ng.provide("Display", Display);
})();

And app.js

(function () {
    var AppComponent = ng.Component({
        selector: 'my-app',
        templateUrl: 'views/app.html',
        directives: [Display]
    })
    .Class({
        constructor: function () {}
    });

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

})();

app.html

 <h1>My First Angular 2 App </h1>
 <display></display>

display.html

<p>My name: {{ myName }}</p>

And may I suggest you start writing your angular2 code in typescript instead? It is a lot easier.

Upvotes: 0

Related Questions