我刚开始用Angular2，结果发现，可以在网上找到所有的教程仅介绍如何设置Angular2单页应用（SPA）。
然而，对于我的网站首页我还是想用PHP，只需使用Angular2的几个地方，如登录/注册/联系方式等。
这怎么可能初始化接点部件的接触网页，登录组件的登录页面，等上？
我不希望所有的人都来一次加载，只是一个简单的组件，它在处理记录，注册等功能。
我相信的东西需要在自举部分完成，但究竟是什么？
编辑：我可能还需要使用登录+注册组件在一个页面上。
我想你可以引导你需要在该网页上的任何部件
import {bootstrap} from '@angular/platform-browser-dynamic';
import {ContactComponent} from './contact.component';
bootstrap(ContactComponent);
考虑下面这个例子具有相同的客户端上的多个页面：
每个客户端是一个角SPA项目。这意味着，客户持有1周的index.html被路由到基于参数正确的水疗中心页面。
https://embed.plnkr.co/plunk/eSq44S
index.html文件：
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand">Just Components</span>
</div>
<div id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="items.html">Items</a></li>
<li><a href="shapes.html">Shapes</a></li>
<li><a href="items_and_shapes.html">Items and Shapes</a></li>
<li><a href="other_static.html">Challenges/Consequences</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div>
<h1>Angular 2 Components Without a SPA</h1>
<table class="table table-bordered lead">
<tr><td class="col-xs-3 text-right">Home</td><td>There is no angular on this page at all.</td></tr>
<tr><td class="col-xs-3 text-right">Items</td><td>A static page with Component. Send data <em>OUT</em> of Component <em>TO</em> static page.</td></tr>
<tr><td class="col-xs-3 text-right">Shapes</td><td>A static page with Component. Send data <em>INTO</em> Component <em>FROM</em> static page.</td></tr>
<tr><td class="col-xs-3 text-right">Items & Shapes</td><td>Combine everything into one static page.</td></tr>
<tr><td class="col-xs-3 text-right">Challenges/Consequences</td><td>for consideration, but not insurmountable</td></tr>
</table>
</div>
<div>
<h4>Why?</h4>
<p>I'm asked routinely if you can put Angular 2 Components on a static page without creating a SPA.</p>
<p>This is the answer: Yes</p>
<h4>How?</h4>
<p>This little app is an <em>imperfect</em> demonstration.</p>
<p>Forget everything about @NgModel</p>
<p>Forget everything about System.config path and app settings!</p>
<p>Forget everything about tradtional Angular 2 bootstrapping!</p>
<p>Each Component stands alone and boots itself</p>
</div>
</div>
</body>
</html>
Items.html：
<!DOCTYPE html>
<html>
<head>
<title>Static Pages with Angular 2 Components</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="a2comps/config.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/http.min.js"></script>
<script src="non_angular.js"></script>
<script>
System.import('a2comps/items.ts')
.catch(console.error.bind(console));
</script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand">Just Components</span>
</div>
<div id="navbar">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li class="active"><a href="items.html">Items</a></li>
<li><a href="shapes.html">Shapes</a></li>
<li><a href="items_and_shapes.html">Items and Shapes</a></li>
<li><a href="other_static.html">Challenges/Consequences</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="container">
<div class="row">
<div class="col-xs-8">
<items>
<div class="text-center"><img src="gears.svg"></div>
</items>
</div>
<div class="col-xs-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Send Data OUT of a Component</h3>
</div>
<div class="panel-body">
<p>Click any row in a table. The row's data will be placed below.</p>
<br>
<p>The Angular Component generates a custom event. Plain old JS is used to listen for the custom event and update the view traditionally.</p>
<br>
<div id="itemizer"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Items.ts：
import {bootstrap, BROWSER_PROVIDERS, BROWSER_APP_PROVIDERS} from "angular2/platform/browser";
import {Component} from "angular2/core"
import {SimpleTable} from "./simple_table.ts"
@Component({
selector: "items",
template: `
<simple-table [contentTitle]="contentTitle" [tableContent]="items"></simple-table>
`,
directives: [SimpleTable]
})
export class Items {
contentTitle = "Items & Prices";
items = ITEMS;
}
bootstrap(Items);
//========================
// MOCK DATA
const ITEMS: Item[] = [
{
"id": 0,
"name": "Item 0",
"price": "$0"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$4"
},
{
"id": 5,
"name": "Item 5",
"price": "$5"
}
];