文档章节

angular2 学习二 最简单的模板

王福林
 王福林
发布于 2016/12/01 10:56
字数 427
阅读 28
收藏 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>

 

© 著作权归作者所有

共有 人打赏支持
王福林
粉丝 10
博文 94
码字总数 37444
作品 0
徐汇
程序员
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
0
0
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
2018/05/19
0
0
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
2018/06/02
0
0
Angular 2.0 调查:43% 选择 Webstorm 编辑器

这是 Jeff Whelpley 和 Patrick Stapleton 发布的博客,他们并不是全职的 Angular 团队成员,是 Angular 社区值得称赞的贡献者。本文是对所有用户都想知道的,关于 Angular 的一些总结。 几周...

oschina
2015/09/03
8.5K
14
现在就开始使用AngularJS的三个重要原因

日期:2013-1-21 来源:GBin1.com 在线演示 如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性。简单来说Angular.js是google开发者设计和开...

gbin1
2013/01/21
18
0

没有更多内容

加载失败,请刷新页面

加载更多

详解webpack-dev-server的简单使用

webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外,它还有一个通过Sock.js来连接到服务器的微型运行时. 我们来看一下下面的...

前端攻城老湿
21分钟前
0
0
深度解析JavaScript事件对象

这篇文章主要介绍了JavaScript事件对象,结合实例形式深入分析了javascript DOM、IE及其他浏览器相关事件对象操作技巧与注意事项,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可...

前端攻城小牛
23分钟前
0
0
Android下拉刷新开源框架

添加依赖 //下拉刷新 implementation 'com.jcodecraeer:xrecyclerview:1.5.9' xml引用 <com.jcodecraeer.xrecyclerview.XRecyclerView android:id="@+id/act_xrecycler......

lanyu96
29分钟前
0
0
Linux内核中ioremap映射的透彻理解

几乎每一种外设都是通过读写设备上的寄存器来进行的,通常包括控制寄存器、状态寄存器和数据寄存器三大类,外设的寄存器通常被连续地编址。根据CPU体系结构的不同,CPU对IO端口的编址方式有两...

天王盖地虎626
33分钟前
1
0
Collection中的之retainAll()方法的理解

//在jdkapi中的方法,说明返回值为boolean类型, boolean retainAll(Collection<?> c) ; //api中给的注释 //Retains only the elements in this list that are contained in the specified......

南桥北木
36分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部