文档章节

angular2 学习二 最简单的模板

王福林
 王福林
发布于 2016/12/01 10:56
字数 427
阅读 27
收藏 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
徐汇
程序员
【前端】—聊聊我认识的Angular

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

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

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

机器的心脏
06/02
0
0
JavaScript MVW 框架 - AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,...

匿名
2011/01/20
0
44
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
AngularJS 自定义控件

[AngularJS Custom Directives][1] 好讨厌不带日期的博客,而且说得好啰嗦 自定义指令介绍 AngularJS 指令作用是在 AngulaJS 应用中操作 Html 渲染。比如说,内插指令 ( ), 指令以及 指令。 ...

开源中国匿名会员
2014/07/11
0
3

没有更多内容

加载失败,请刷新页面

加载更多

linux学习-0919

linux和windows互传文件 用户配置文件和密码配置文件 用户组管理 用户管理 一、linux和windows互传文件 linux和windows可以互相传输文件,但是需要使用xshell 并且安装lrzsz包: yum insta...

wxy丶
24分钟前
1
0
收集几个开源的微信小程序开发框架

1、 mpvue mpvue 是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小...

哥本哈根的小哥
30分钟前
1
0
Golang CSP并发模型

今天介绍一下 go语言的并发机制以及它所使用的CSP并发模型 CSP并发模型 CSP模型是上个世纪七十年代提出的,用于描述两个独立的并发实体通过共享的通讯 channel(管道)进行通信的并发模型。 CS...

xtof
31分钟前
1
0
用chrome在电脑上模拟微信内置浏览器

先了解安卓微信和Ios微信的UA(User agent:用户代理) 安卓微信UA: mozilla/5.0 (linux; u; android 4.1.2; zh-cn; mi-one plus build/jzo54k) applewebkit/534.30 (khtml, like gecko) ve......

可达鸭眉头一皱
37分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部