首页:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><%= TITLE %></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<app>Loading...</app>
<!-- inject:js -->
<!-- endinject -->
<%= INIT %>
</body>
</html>
页面的body中有一个app标签,它内部有一个文本节点"Loading...",这个标签会一直处于可见状态,直到应用启动好、主组件渲染完成为止。
<%= INIT %>和<-- inject:js...,这两个是模版占位符,用来注入内容的,在不同的例子里面注入的内容不同,这些模版不是angular特有的,只是用来避免大量的重复代码,转换后的内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Switching to Angular 2</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- inject:css -->
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- endinject -->
</head>
<body>
<app>Loading...</app>
<!-- inject:js -->
<script src="/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/node_modules/reflect-metadata/Reflect.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/rxjs/bundles/Rx.min.js"></script>
<!-- endinject -->
<script>
System.config({"defaultJSExtensions":true,"paths":{"bootstrap":"/dist/dev/bootstrap","markdown":"/node_modules/markdown/lib/markdown","immutable":"/node_modules/immutable/dist/immutable.js"},"map":{"rxjs":"/node_modules/rxjs","@angular":"/node_modules/@angular"},"packages":{"@angular/core":{"main":"index.js","defaultExtension":"js"},"@angular/compiler":{"main":"index.js","defaultExtension":"js"},"@angular/common":{"main":"index.js","defaultExtension":"js"},"@angular/platform-browser":{"main":"index.js","defaultExtension":"js"},"@angular/platform-browser-dynamic":{"main":"index.js","defaultExtension":"js"},"@angular/router-deprecated":{"main":"index.js","defaultExtension":"js"},"@angular/http":{"main":"index.js","defaultExtension":"js"},"rxjs":{"defaultExtension":"js"}}});
System.import("./app")
.catch(function () {
console.log("Report this error to https://github.com/mgechev/switching-to-angular2/issues", e);
});
</script>
</body>
</html>
app.ts代码如下:
import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
@Component({
selector: 'app',
templateUrl: './app.html'
})
class App {
target:string;
constructor() {
this.target = 'world';
}
}
bootstrap(App);
一开始从@angular/core模块导入了@Component装饰器,从@angular/platform-browser-dynamic模块导入了bootstrap函数,然后用@Component装饰了APP类。
接下来定义了组件的视图,这里使用了templateUrl而不是内联模版template,模版在app.html中:
<h1>Hello {{target}}!</h1>
最后一行代码把根组件传递给bootstrap方法并启动应用。