AngularJS2.0 hello world例子——引入这么多额外的依赖库真是很忧伤啊
初识Angular2
写一个Angular2的Hello World应用相当简单，分三步走：
1. 引入Angular2预定义类型
- import {Component,View,bootstrap} from "angular2/angular2";
import是ES6的关键字，用来从模块中引入类型定义。在这里，我们从angular2模块库中引入了三个类型： Component类、View类和bootstrap函数。
2. 实现一个Angular2组件
实现一个Angular2组件也很简单，定义一个类，然后给这个类添加注解：
- @Component({selector:"ez-app"})
- @View({template:"<h1>Hello,Angular2</h1>"})
- class EzApp{}
class也是ES6的关键字，用来定义一个类。@Component和@View都是给类EzApp附加的元信息， 被称为注解/Annotation。
@Component最重要的作用是通过selector属性（值为CSS选择符），指定这个组件渲染到哪个DOM对象上。 @View最重要的作用是通过template属性，指定渲染的模板。
3. 渲染组件到DOM
将组件渲染到DOM上，需要使用自举/bootstrap函数：
- bootstrap(EzApp);
这个函数的作用就是通知Angular2框架将EzApp组件渲染到DOM树上。
简单吗？我知道你一定还有疑问，别着急，我们慢慢把缺失的知识点补上！
<!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>
摘自：http://www.hubwiz?.com/class/5599d367a164dd0d75929c76
AngularJS2.0 hello world例子——引入这么多额外的依赖库真是很忧伤啊的更多相关文章
- Spring框架系列(2) - Spring简单例子引入Spring要点
上文中我们简单介绍了Spring和Spring Framework的组件,那么这些Spring Framework组件是如何配合工作的呢?本文主要承接上文,向你展示Spring Framework组件 ...
- 打造AngularJs2.0开发环境
angularjs2.0刚发布, typescript2.0也刚发布, 于2016.9.29记录. 参考文档:https://angular.cn/docs/ts/latest/quickstart. ...
- EasyNet.Solr 4.4.0发布及例子
EasyNet.Solr 4.4.0发布及例子 EasyNet.Solr 4.4.0已经发布,可以直接从http://easynet.codeplex.com/ 下载试用并反馈.最新版本进行了以下改动 ...
- webapi 发布接口报405错误（angularjs2.0）
参考链接:http://www.cnblogs.com/shenbin/p/5680976.html web访问接口报405错误,以前的jQuery访问方式访问接口没有问题. 但是换成angularj ...
- Android studio 3.0以上版本无法引入，找不到v4，v7包方案解决
Android studio 3.0以上版本无法引入v4.v7包报红,即找不到v4.v7包,解决方案如下: 步骤: 1,Close Object,点击左上角的关闭工程. 2,点击x,删除项目. 3,重 ...
- AngularJs2.0
AngularJs2.0中文官网站发布了. 官网地址:https://angular.cn/ 官网点击任何中文地方都可以显示英文原文,中文文档暂时只有 TypeScript的,JavaScript和d ...
- 在ThinkPHP框架（5.0.24）下引入Ueditor并实现向七牛云对象存储上传图片同时将图片信息保存到MySQL数据库，同时实现lazyload懒加载
这是我花了很多天的时间才得以真正实现的一组需求. 文章后面有完整Demo的GitHub链接. 一. 需求描述 1. 应用是基于ThinkPHP5开发的: 2. 服务器环境是LNMP,PHP版本是7.2 ...
- .NET 使用 ILMerge 合并多个程序集，避免引入额外的依赖
原文:.NET 使用 ILMerge 合并多个程序集,避免引入额外的依赖 我们有多种工具可以将程序集合并成为一个.打包成一个程序集可以避免分发程序的时候带上一堆依赖而出问题. ILMerge 可以用来 ...
- .NET 使用 ILRepack 合并多个程序集（替代 ILMerge），避免引入额外的依赖
原文:.NET 使用 ILRepack 合并多个程序集(替代 ILMerge),避免引入额外的依赖 我们有多种工具可以将程序集合并成为一个.比如 ILMerge.Mono.Merge.前者不可定制.运 ...
随机推荐
- vi 命令学习（二）
[选中文本(可视模式)] v 可视模式 从光标位置开始按正常模式选择文本 V 可视行模式 选中光标经过的完整行 ctrl + v 可视块模式 垂直方向选中文本 [ 撤销和恢复撤销] u undo 撤销 ...
- cmd命令安装、卸载、启动和停止Windows Service
1.运行--〉cmd:打开cmd命令框 2.在命令行里定位到InstallUtil.exe所在的位置 InstallUtil.exe 默认的安装位置是在C:/Windows/Microsoft.NET ...
- block相关归纳
经过今天的Block的学习.上网查询相关文章归纳了一下 一.一个使用Block的好处有: Block可以用在许多不同的环境中,这样可以让代码更加简单,以及减少函数声明的数量,不用实现代理协议. 简单性 ...
- enote笔记语言（5）——其他（ver0.2）
章节:其他 ((主:单词)) 用来醒目地强调这个句子中哪个词语作主语 sentence: ...
- STL++?pb_ds平板电视初步探索
什么是pb_ds? 除了众所周知的STL库,c++还自带了ext库(应该可以这么叫吧),其中有用pb_ds命名的名称空间(俗称平板电视).这个名称空间下有四个数据类型结构.这些都是鲜为人知的.经过测试 ...
- 微信小程序理解8大误区，你中招了吗？
2016年年底程序员话题中最火的是什么?莫过于微信小程序!小程序被炒得沸沸扬扬,再次证明一点,微信想让什么火,真的就能让什么火!这种能力真是全中国再也没有人有了,政府也没有.但是,小程序刚刚开始,你对 ...
- angular中处理多个异步请求的方法汇总
在实际业务中经常需要等待几个请求完成后再进行下一步操作.但angularjs中$http不支持同步的请求. 解决方法一: $http多层嵌套 $http.get('url1').success(fun ...
- log4j.properties配置内容的理解
一直知道log4j是用来记录日志的,但一直没去看log4j到底是怎么用的,这两天看了几个log4j.properties配置语句详解的帖子,在这里简陋地记录一下. 在完全不知道log4j怎么用的时候, ...
- [luoguP3203][HNOI2010]BOUNCE 弹飞绵羊（LCT）
传送门 每个点都会跳到另一个点,连边就是一棵树. 更改弹力就是换边. 求一个点跳多少次跳到终点就是求这个点的深度,那么只需要维护 size 域,access(n + 1) 然后 splay(x),求 ...
- FFT快速傅里叶变换
FFT太玄幻了,不过我要先膜拜HQM,实在太强了 1.多项式 1)多项式的定义 在数学中,由若干个单项式相加组成的代数式叫做多项式.多项式中的每个单项式叫做多项式的项,这些单项式中的最高项次数,就是这 ...