如何将Angular2用作非SPA?
我刚开始学习Angular2,发现所有可以在网上找到的教程都只解释了如何为单页应用程序(SPA)设置Angular2 然而,对于我网站的主页,我仍然希望使用PHP,并且只在一些地方使用Angular2,比如登录/注册/联系等 如何初始化联系人页面上的联系人组件、登录页面上的登录组件等 我不想一次加载所有的组件,只需要一个简单的组件来处理登录、注册等功能 我觉得在引导部分需要做些什么,但具体是什么呢如何将Angular2用作非SPA?,angular,Angular,我刚开始学习Angular2,发现所有可以在网上找到的教程都只解释了如何为单页应用程序(SPA)设置Angular2 然而,对于我网站的主页,我仍然希望使用PHP,并且只在一些地方使用Angular2,比如登录/注册/联系等 如何初始化联系人页面上的联系人组件、登录页面上的登录组件等 我不想一次加载所有的组件,只需要一个简单的组件来处理登录、注册等功能 我觉得在引导部分需要做些什么,但具体是什么呢 编辑:我可能还想在一个页面上使用登录+注册组件 我认为您可以在该页面上引导所需的任何组件 impo
编辑:我可能还想在一个页面上使用登录+注册组件 我认为您可以在该页面上引导所需的任何组件
import {bootstrap} from '@angular/platform-browser-dynamic';
import {ContactComponent} from './contact.component';
bootstrap(ContactComponent);
考虑在同一客户机上具有多个页面的示例: 每个客户都是一个角度SPA项目。 这意味着,客户机持有1个index.html,它根据一个参数路由到正确的spa页面 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>
主页
只是部件
无SPA的2个角组件
这一页上根本没有棱角。
ItemsA包含组件的静态页面。将数据从组件发送到静态页面。
使用组件创建静态页面。从静态页面向组件发送数据。
项目和形状将所有内容合并到一个静态页面中。
需要考虑的挑战/后果,但并非无法克服
为什么?
我经常被问到是否可以在静态页面上放置Angular 2组件而不创建SPA
答案是:是的
怎么用?
这个小应用程序是一个不完美的演示
忘掉@NgModel的一切吧
忘记System.config路径和应用程序设置
忘记一切关于传统的角度2引导
每个组件都是独立的,并自行启动
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>
具有角度2组件的静态页面
System.import('a2comps/items.ts'))
.catch(console.error.bind(console));
只是部件
从组件中发送数据
单击表中的任意行。行的数据将放在下面
角度组件生成自定义事件。普通的旧JS用于侦听自定义事件并更新视图
项目1.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"
}
];
从“angular2/platform/BROWSER”导入{bootstrap,BROWSER\u PROVIDERS,BROWSER\u APP\u PROVIDERS};
从“angular2/core”导入{Component}
从“/simple_table.ts”导入{SimpleTable}
@组成部分({
选择器:“项目”,
模板:`
`,
指令:[可简化]
})
出口类物品{
contentTitle=“项目和价格”;
项目=项目;
}
引导(项目);
//========================
//模拟数据
常数项:项[]=[
{
“id”:0,
“名称”:“项目0”,
“价格”:“$0”
},
{
“id”:1,
“名称”:“第1项”,
“价格”:“$1”
},
{
“id”:2,
“名称”:“第2项”,
“价格”:“$2”
},
{
“id”:3,
“名称”:“第3项”,
“价格”:“$3”
},
{
“id”:4,
“名称”:“第4项”,
“价格”:“$4”
},
{
“id”:5,
“名称”:“第5项”,
“价格”:“$5”
}
];
这意味着我必须为每个页面创建一个完整的Angular2应用程序,这并不理想。另外,如果我想在一个页面上使用登录+注册组件呢?那么你有一个非常简单的SPA,只有2个组件,好的3如果你添加AppComponent是的,这肯定是一个解决办法,但假设我也想使用一些共享服务。这会产生很多垃圾代码。我相信还有另一种方法可以实现这一点。是的,你可以共享服务,bootstrap(ContactComponent,['MySharedService']);在本文之后,增加页面之间的加载时间对于UI体验来说是不好的。如果您担心加载多个文件,请不要忘记,对于生产构建,您的所有文件都将合并并缩小为一个文件。所以这并不是一个问题,除非你打算在短期内迁移到SPA,否则我建议非SPA组件使用更轻量级的组件(Angular 1.x,Web组件)。Angular2有相当大的开销,而且从来没有为你想要的东西做过计划。Angular2在产生小输出方面取得了相当大的进步。并不是所有的工具都有,但实验相当成功。对于小型应用程序,输出大小小于Angularjs输出的大小。在Angular2组件之外不能有指令。但是,如果你想添加组件,这很好。您只需为每个页面创建一个不同的Angular2应用程序(您希望在其中添加不同的Angular2功能)。@GünterZöchbauer感谢您的输入。我想我会坚持角度2。你个人对鲁有什么看法