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

转载于:https://www.cnblogs.com/bonelee/p/6841654.html

AngularJS2.0 hello world例子——引入这么多额外的依赖库真是很忧伤啊相关推荐

tensorflow 2.10.0安装所需依赖库版本确定方法
tensorflow 2.10.0安装所需依赖库版本确定方法 1 依赖版本组合 2 系统环境 3 依赖版本确定方法 3.1推理法 3.1.1 TensorFlow依赖范围 3.1.2 显卡驱动支持范围 ...
【鲁棒优化笔记】以Coding入门鲁棒优化：以一个例子引入（二）-错误版
[鲁棒优化笔记]以Coding入门鲁棒优化:以一个例子引入(二) 投资组合的例子鲁棒优化模型的reformulation: 利用对偶进行reformulation 利用对偶进行reformulati ...
在ThinkPHP框架（5.0.24）下引入Ueditor并实现向七牛云对象存储上传图片同时将图片信息保存到MySQL数据库，同时实现lazyload懒加载...
这是我花了很多天的时间才得以真正实现的一组需求. 文章后面有完整Demo的GitHub链接. 一. 需求描述 1. 应用是基于ThinkPHP5开发的: 2. 服务器环境是LNMP,PHP版本是7.2 ...
GluonCV 升级0.8版，引入深度估计、助力街景分析
街景分析是计算机视觉应用最广泛的一个领域之一,越来越多的项目正在围绕街景展开,比如生成一个交互式的虚拟城市,建造一个属于自己的无人车等等. 最近,OpenBot项目的推出大大降低了小机器人成本.一部旧 ...
.NET 使用 ILMerge 合并多个程序集，避免引入额外的依赖
我们有多种工具可以将程序集合并成为一个.打包成一个程序集可以避免分发程序的时候带上一堆依赖而出问题. ILMerge 可以用来将多个程序集合并成一个程序集.本文介绍使用 ILMerge 工具和其 Nu ...
.NET 使用 ILRepack 合并多个程序集（替代 ILMerge），避免引入额外的依赖
我们有多种工具可以将程序集合并成为一个.比如 ILMerge.Mono.Merge.前者不可定制.运行缓慢.消耗资源(不过好消息是现在开源了):后者已被弃用.不受支持且基于旧版本的 Mono.Ceci ...
爱python的胖虾_爱了爱了！0.052 秒打开 100GB 数据，这个Python开源库火爆了！
原标题:爱了爱了!0.052 秒打开 100GB 数据,这个Python开源库火爆了! 编译 | AI科技大本营(ID:rgznai100) 许多组织都在尝试收集和利用尽可能多的数据,以改善其经营方式 ...
android.mk 添加v7_Android.mk引入第三方jar包和so库文件的方法
以SystemUI为例,如果需要在SystemUI中引入第三方jar包以及so库,可作如下处理: 首先,在frameworks\base\packages\SystemUI下新建libs目录: 将需要 ...
win10 + bazel-0.20.0 + tensorflow-1.13.1 编译tensorflow GPU版本的C++库
win10 + bazel-0.20.0 + tensorflow-1.13.1 编译tensorflow GPU版本的C++库安装所需软件/库 Step1. 安装vs2015,CUDA 10.0和 ...

AngularJS2.0 hello world例子——引入这么多额外的依赖库真是很忧伤啊

初识Angular2

AngularJS2.0 hello world例子——引入这么多额外的依赖库真是很忧伤啊相关推荐

最新文章

热门文章