初识Angular2

写一个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树上。

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

<!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例子——引入这么多额外的依赖库真是很忧伤啊的更多相关文章

  1. Spring框架系列(2) - Spring简单例子引入Spring要点

    上文中我们简单介绍了Spring和Spring Framework的组件,那么这些Spring Framework组件是如何配合工作的呢?本文主要承接上文,向你展示Spring Framework组件 ...

  2. 打造AngularJs2.0开发环境

    angularjs2.0刚发布, typescript2.0也刚发布, 于2016.9.29记录. 参考文档:https://angular.cn/docs/ts/latest/quickstart. ...

  3. EasyNet.Solr 4.4.0发布及例子

    EasyNet.Solr 4.4.0发布及例子 EasyNet.Solr 4.4.0已经发布,可以直接从http://easynet.codeplex.com/ 下载试用并反馈.最新版本进行了以下改动 ...

  4. webapi 发布接口报405错误（angularjs2.0）

    参考链接:http://www.cnblogs.com/shenbin/p/5680976.html web访问接口报405错误,以前的jQuery访问方式访问接口没有问题. 但是换成angularj ...

  5. Android studio 3.0以上版本无法引入，找不到v4，v7包方案解决

    Android studio 3.0以上版本无法引入v4.v7包报红,即找不到v4.v7包,解决方案如下: 步骤: 1,Close Object,点击左上角的关闭工程. 2,点击x,删除项目. 3,重 ...

  6. AngularJs2.0

    AngularJs2.0中文官网站发布了. 官网地址:https://angular.cn/ 官网点击任何中文地方都可以显示英文原文,中文文档暂时只有 TypeScript的,JavaScript和d ...

  7. 在ThinkPHP框架（5.0.24）下引入Ueditor并实现向七牛云对象存储上传图片同时将图片信息保存到MySQL数据库，同时实现lazyload懒加载

    这是我花了很多天的时间才得以真正实现的一组需求. 文章后面有完整Demo的GitHub链接. 一. 需求描述 1. 应用是基于ThinkPHP5开发的: 2. 服务器环境是LNMP,PHP版本是7.2 ...

  8. .NET 使用 ILMerge 合并多个程序集，避免引入额外的依赖

    原文:.NET 使用 ILMerge 合并多个程序集,避免引入额外的依赖 我们有多种工具可以将程序集合并成为一个.打包成一个程序集可以避免分发程序的时候带上一堆依赖而出问题. ILMerge 可以用来 ...

  9. .NET 使用 ILRepack 合并多个程序集（替代 ILMerge），避免引入额外的依赖

    原文:.NET 使用 ILRepack 合并多个程序集(替代 ILMerge),避免引入额外的依赖 我们有多种工具可以将程序集合并成为一个.比如 ILMerge.Mono.Merge.前者不可定制.运 ...

随机推荐

  1. vue项目国际化实现 vue-i18n使用详细教程

    1.安装vue-i18n: npm i vue-i18n -S 当然你也可以这样: <script src="https://unpkg.com/vue/dist/vue.js&quo ...

  2. C++算法库学习__std::sort__对 vector进行排序_排序后就可以进行使用std::lower_bound进行二分查找（查找第一个大于等于指定值的迭代器的位置）__std::unique

    std::sort      对vector成员进行排序; std::sort(v.begin(),v.end(),compare);   std::lower_bound 在排序的vector中进行 ...

  3. PHP--选择排序

    <?php /** * 选择排序(从小到大)的思想:每一次从待排序的数据中选出最小的,放在待排序的起始位置. */ $arr = array(23, 42, 21, 8, 4, 2, 3, 1) ...

  4. 关于MD5解密网站。www.cmd5.com

    第一次听说这个网站,本人的名字居然也能够被解密,而且还是需要付费取得明文! 大家知道,md5加密是我们常用的加密方式,这个加密方式的好处在于不可逆.而且任何环境下算出的密文应该都是相同的,所以在大家登 ...

  5. Android 项目Log日志输出优化

    概述 Android开发过程中经常需要向控制台输出日志信息,有些人还在用Log.i(tag,msg)的形式或者system.out.println(msg)方式吗?本篇文章对日志信息输出进行优化,以达 ...

  6. css3--伪元素和伪类

    1,定义 W3C定义:伪元素伪类 都可以向某些选择器设置特殊效果.(css2中定义) css3中的定义: 1).伪元素:在DOM树中创建了一些抽象元素(虚拟的容器).由两个冒号::开头(css2中并没 ...

  7. Django-django-redis使用

    自定义连接池 这种方式跟普通py文件操作redis一样,代码如下: views.py import redis from django.shortcuts import render,HttpResp ...

  8. BZOJ 2095 [POI2010]Bridges (最大流、欧拉回路)

    洛谷上有这题,但是输出方案缺SPJ..(而且我也懒得输出方案了) 题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=2095 题解: 首先判 ...

  9. 【Codeforces 501C】Misha and Forest

    [链接] 我是链接,点我呀:) [题意] 给你一棵树 但是每个节点只告诉你出度个数 以及所有和它相连的点的异或和. 让你还原这棵树 [题解] 叶子节点的话,他所有节点的异或和就是它那唯一的一个爸爸 因 ...

  10. mybatis写当天 当月的数据 时间段数据https://www.cnblogs.com/xzjf/p/7600533.html

    mybatis写当天 当月的数据 时间段数据----https://www.cnblogs.com/xzjf/p/7600533.html