文档章节

angular2 学习一 初识Angular2

王福林
 王福林
发布于 2016/12/01 10:32
字数 459
阅读 79
收藏 0

写一个Angular2的Hello World应用相当简单,分三步走:

1. 引入Angular2预定义类型

 
  1. import {Component,View,bootstrap} from "angular2/angular2";

import是ES6的关键字,用来从模块中引入类型定义。在这里,我们从angular2模块库中引入了三个类型: Component类、View类和bootstrap函数。

2. 实现一个Angular2组件

实现一个Angular2组件也很简单,定义一个类,然后给这个类添加注解

 
  1. @Component({selector:"ez-app"})
  2. @View({template:"<h1>Hello,Angular2</h1>"})
  3. class EzApp{}

class也是ES6的关键字,用来定义一个类。@Component@View都是给类EzApp附加的元信息, 被称为注解/Annotation

@Component最重要的作用是通过selector属性(值为CSS选择符),指定这个组件渲染到哪个DOM对象上。 @View最重要的作用是通过template属性,指定渲染的模板。

3. 渲染组件到DOM

将组件渲染到DOM上,需要使用自举/bootstrap函数:

 
  1. bootstrap(EzApp);

这个函数的作用就是通知Angular2框架将EzApp组件渲染到DOM树上。

简单吗?我知道你一定还有疑问,别着急,我们慢慢把缺失的知识点补上!

把@Component的selector属性改为"ez-app",还应该改哪里可以获得和示例同样的结果?

HTML

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <title>hello,angular2</title>
    <!--模块加载器-->
    <script type="text/javascript" src="lib/system@0.16.11.js"></script>
    <!--Angular2模块库-->
    <script type="text/javascript" src="lib/angular2.dev.js"></script>
	<script>
    	//设置模块加载规则
    	System.baseURL = document.baseURI;
		System.config({
        	map:{traceur:"lib/traceur"},
			traceurOptions: {annotations: true}
		});
	</script>	    
</head>
<body>
	<!--组件渲染锚点-->
	<my-app></my-app>
    
    <!--定义一个ES6脚本元素-->
    <script type="module">
    	//从模块库引入三个类型定义
        import {Component,View,bootstrap} from "angular2/angular2";
        
        //组件定义
        @Component({selector:"my-app"})
        @View({template:"<h1>Hello,Angular2</h1>"})
        class EzApp{}       
        
        //渲染组件
        bootstrap(EzApp);
    </script>
</body>
</html>

CSS

h1{background:black;color:white;display:inline-block}

 

© 著作权归作者所有

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

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

开元中国2015
11/09
0
0
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
AngularJS2.0 教程系列(一)

Why Angular2 Angular1.x显然非常成功,那么,为什么要剧烈地转向Angular2? 性能的限制 AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移,各种特性 被加...

笔阁
2015/07/22
0
1
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0
[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen
05/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

颜色模型与颜色应用---RGB颜色模型

中国龙-扬科
12分钟前
3
0
网络优化-tcp和udp的协作

TODO

梦想游戏人
14分钟前
3
0
list和数组转化

Java中List转换为数组,数组转List List转换为Array可以这样处理: ArrayList<String> list=new ArrayList<String>(); String[] strings = new String[list.size()]; list.toArray(strings);......

west_coast
15分钟前
2
0
LSP 商户端API

Your domain:                  lsp-api-merchant.hhs2717.cnVirtualhost conf:             /usr/local/nginx/conf/vhost/lsp-api-merchant.hhs2717.cn.confDirectory of:......

BeanHo
24分钟前
2
0
设计模式 之 访问者模式

设计模式 之 访问者模式 概念 核心理念:将数据结构与算法分离。 使用场景:数据结构不变动,算法经常变动。 1、一个Visitor类存放被访问的对象,访问者主要处理具体算法与行为。 // 访问者...

GMarshal
28分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部