I am trying out angular2 in the ES5 way with this code:
<html>
<head>
<script src=".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({
I am trying out angular2 in the ES5 way with this code:
<html>
<head>
<script src="https://code.angularjs/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({
- I'm stuck on this too. The Angular 2 displaying data guide uses this format, though I haven't found it in the other guides. – Phil D. Commented Feb 15, 2016 at 4:27
3 Answers
Reset to default 3Try this one.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs/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>
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);
});
Here you go this is your example working in a JSFiddle
https://jsfiddle/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