文档章节

angular2 学习一 初识Angular2

王福林
 王福林
发布于 2016/12/01 10:32
字数 459
阅读 83
收藏 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
徐汇
程序员
私信 提问
加载中
请先登录后再评论。
Flappy Bird(安卓版)逆向分析(一)

更改每过一关的增长分数 反编译的步骤就不介绍了,我们直接来看反编译得到的文件夹 方法1:在smali目录下,我们看到org/andengine/,可以知晓游戏是由andengine引擎开发的。打开/res/raw/at...

enimey
2014/03/04
5.8K
18
Nutch学习笔记4-Nutch 1.7 的 索引篇 ElasticSearch

上一篇讲解了爬取和分析的流程,很重要的收获就是: 解析过程中,会根据页面的ContentType获得一系列的注册解析器, 依次调用每个解析器,当其中一个解析成功后就返回,否则继续执行下一个解...

强子哥哥
2014/06/26
712
0
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.1K
1
编程语言--Tcl/Tk

Tcl/Tk 是一种简明,高效,可移植性好的编程语言。在信息产业领域具有广泛的应用。 Tcl/Tk 的发明人 John Ousterhout 教授在八十年代初,是伯克利大学的教授。在其教学过程中,他发现在集成电...

匿名
2012/11/11
8.6K
0
AngularJS 的UI增强指令集--AngularUI

Angular UI 顾名思义,AngularJS 的UI增强指令集,提供了IE、jQuery 兼容,以及一些常用 UI 组件。 包含的模块有: UI-Utils UI-Modules UI-Alias UI-Bootstrap NG-Grid UI-Router IDE Plug...

匿名
2012/12/24
4.2W
0

没有更多内容

加载失败,请刷新页面

加载更多

spring集成kafka

1、引入依赖jar包 <dependency><groupId>org.springframework.kafka</groupId><artifactId>spring-kafka</artifactId></dependency> 2、配置kafka信息 spring: kafka: bootstra......

简到珍
9分钟前
0
0
Spring Security 原理分析(一)

Spring Security 初始化 在普通的spring mvc 框架中,我们需要 @Configuration@EnableWebSecuritypublic class MyWebSecurityConfiguration extends WebSecurityConfigurerAdapter 手动添......

街角的小丑
17分钟前
6
0
查看 Linux 系统服务的 5 大方法

Linux 系统服务有时也称为守护程序,是在Linux启动时自动加载并在Linux退出时自动停止的系统任务。 在本文中,良许将为大家介绍如何列出 Linux 系统里所有运行的服务,以及如何检查某个服务的...

良许Linux
22分钟前
9
0
如何显示已上演的更改? - How do I show the changes which have been staged?

问题: I staged a few changes to be committed; 我上演了一些改变来承诺; how can I see the diff of all files which are staged for the next commit? 如何查看为下一次提交而暂存的所有...

技术盛宴
31分钟前
25
0
HashMap 的 defaultLoadFactor 的一种推导计算思路

1. 为啥需要 defaultLoadFactor 现在主流的 HashMap,一般的实现思路都是开放地址法+链地址法的方式来实现。 即数组 + 链表的实现方式,通过计算哈希值,找到数组对应的位置,如果已存在元素...

zhxhash
35分钟前
23
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部