您的位置：首页 > Web前端 > AngularJS

Angular2组件开发—模板语法（一）

2015-12-10 17:12 696 查看

最简单的模板

组件的View注解用来声明组件的外观，它最重要的属性就是template - 模板。 Angular2的模板是兼容HTML语法的，这意味着你可以使用任何标准的HTML标签编写组件模板。

所以，在最简单的情况下，一个Angular2组件的模板由标准的HTML元素构成，看起来就是一段HTML码流。Angular2将原封不同地渲染这段模板：

有两种方法为组件指定渲染模板：

1. 内联模板

可以使用组件的View注解中的template属性直接指定内联模板：

@View({
template : `<h1>hello</h1>
<div>...</div>`
})

在ES6中，使用一对`符号就可以定义多行字符串，这使得编写内联的模板轻松多了。

2. 外部模板

也可以将模板写入一个单独的文件：

<!--ezcomp-tpl.html-->
<h1>hello</h1>
<div>...</div>

然后在定义组件时，使用templateUrl引用外部模板

@View({
templateUrl : "ezcomp-tpl.html"
})

例如：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>template - standard HTML</title>
<script type="text/javascript" src="lib/system@0.16.11.js"></script>
<script type="text/javascript" src="lib/angular2.dev.js"></script>
<script type="text/javascript" src="lib/system.config.js"></script>
</head>
<body>
<ez-app></ez-app>
<script type="module">
import {Component,View,bootstrap} from "angular2/angular2";

@Component({selector : "ez-app"})
@View({
template : `
<h1>Hello,Angular2</h1>
<p>
使用ES6开发Angular2应用的一个好处就是，可以不用拼接模板字符串了。
</p>

输入文本框：<input type="text" name="firstname"><br />
添加的按钮：<button type="button">按钮</button>

<ul>
<li>在模板中可以使用任何标准的HTML元素</li>
<li>如果模板定义在单独的文件里，可以使用templateUrl引入</li>
</ul>
`
})
class EzApp{}

bootstrap(EzApp);
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航