Menu
I am new to angular so please help. I am getting an error while trying to run a simple code with angular with angular ng-controller tag where I am displaying a variable in html being defined in a javascript file as:
var MainController = function($scope){
$scope.message = "harsh";
and displaying in html as in this:html page
The error on chrome console is as:
Uncaught ReferenceError: System is not defined(anonymous function) @ angular2.js:3098
which points to some function in angular2js:
System.register("angular2/src/core/facade/lang", [], true, function(require, exports, module) {
I don't understand the problem. Is it related to the angular2.js which I included from angularjs.org?
538
Answer: Execute Code after jQuery Library has Loaded The most common reason behind the error "Uncaught ReferenceError: $ is not defined" is executing the jQuery code before the jQuery library file has loaded. Therefore make sure that you're executing the jQuery code only after jQuery library file has finished loading.
The Javascript ReferenceError occurs when referencing a variable that does not exist or has not yet been initialized in the current scope.
Try including the System JS file in your HTML.
<script src="https://jspm.io/[email protected]"></script>
Check this Github repo for any help: https://github.com/kensplanet/angularjs2-hello-world/blob/master/index.html
Angular2 way of doing it
Plunker link: http://plnkr.co/edit/36PZLTZ58bXmD4me0cpS?p=preview
index.html
<html>
<head>
<title>AngularJS2 Hello World Demo</title>
<script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
<script src="https://jspm.io/[email protected]"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
</head>
<body>
<harsh></harsh>
<script>
System.import('harsh');
</script>
</body>
</html>
harsh.js
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
switch (arguments.length) {
case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
}
};
var angular2_1 = require('angular2/angular2');
var angularjs2Component = (function () {
function angularjs2Component() {
this.name = "Harsh";
}
angularjs2Component = __decorate([
angular2_1.Component({
selector: 'harsh'
}),
angular2_1.View({
template: '<h1>Hello {{name}}<h1>'
})
], angularjs2Component);
return angularjs2Component;
})();
angular2_1.bootstrap(angularjs2Component);
Output:
Hello Harsh
158
I got the same issue in Angular 2.0 with TypeScript.
Im my issue I was requesting url with an extra slash '/' like 'http://localhost:3000/login/' (an extra slash after 'login')
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
