Angular2 doesn't work
Question
I am new in Angular, so I choose Angular2.
I was following official guide here
Here is code
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.sfx.dev.js"></script>
<script src="app.js"></script>
</head>
<body>
<my-app></my-app>
</body>
</html>
app.js
var AppComponent = ng
.Component({
selector: 'my-app'
})
.View({
template: '<h1 id="output">My First Angular 2 App</h1>'
})
.Class({
constructor: function () { }
});
Then I type live-server --port=8000 , but it display nothing.
2 answers
solution1
4 ACCPTED 2015-09-22 06:15:00
You need to check if DOM is ready with DOMContentLoaded first and then Bootstrap the app.
Official Angular 2.0 has mentioned to bootstrap.
Also as Jorg said:
"Angular 2 is currently in Developer Preview. We recommend using Angular 1.X for production applications"
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.sfx.dev.js"></script>
<script src="main.js"></script>
</head>
<body>
<my-app></my-app>
</body>
</html>
Javascript (ES5):
var AppComponent = ng
.Component({
selector: 'my-app'
})
.View({
template: '<h1 id="output">My First Angular 2 App</h1>'
})
.Class({
constructor: function () { }
});
document.addEventListener('DOMContentLoaded', function() {
ng.bootstrap(AppComponent);
});
solution2
0 2015-09-22 06:11:39
can you add ng.bootstrap(AppComponent, []); to the bottom on app.js and update your angular version to <script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.sfx.dev.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.