angular2 学习二 最简单的模板
angular2 学习二 最简单的模板
王福林 发表于1年前
angular2 学习二 最简单的模板
  • 发表于 1年前
  • 阅读 24
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

最简单的模板

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

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

html-template

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

1. 内联模板

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

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

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

2. 外部模板

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

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

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

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

在示例的模板中,增加一个输入文本框和一个按钮!

 

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>
                <input type="text" value="fdf">
                <button>测试</button>
                <p>
                	使用ES6开发Angular2应用的一个好处就是,可以不用拼接模板字符串了。
                </p>
                <ul>
                	<li>在模板中可以使用任何标准的HTML元素</li>
                    <li>如果模板定义在单独的文件里,可以使用templateUrl引入</li>
                </ul>
            `
        })
        class EzApp{}
        
        bootstrap(EzApp);
    </script>
</body>
</html>

 

共有 人打赏支持
粉丝 9
博文 92
码字总数 34910
×
王福林
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: