Angular2基础学习

Angular初识

ES6工具链

• systemjs – 通用模块加载器,支持AMD,CommonJS,ES6等各种格式的JS的模块加载
• es6-module-loader – ES6模块加载器,systemjs会自动加载这个模块
• traceur –ES6转码器,将ES6代码转换为当前浏览器支持的ES5代码.systemjs会自动加载 这个模块.

Angular应用三步走

1. 引入Angular2预定义类型

import {Component, View, bootstrap} from "angualr2/anguar";

2. 实现一个Angualr2组件

定义一个类,然后在这个类加注解

[@Component](/user/Component)({selector:"ez-app"})
[@View](/user/View)({template:"<h1>Hello,Angular2</h1>"})
class EzApp{}

@Component和@View都是给类EzApp附加的元信息， 被称为注解Annotation。

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

3. 渲染组件到DATE_FORMAT

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

bootstrap(EzApp);

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

注解/Annotation

你一定好奇@Component和@View到底是怎么回事。看起来像其他语言（比如python） 的装饰器，是这样吗？

ES6规范里没有装饰器。这其实利用了traceur的一个实验特性：注解。给一个类 加注解，等同于设置这个类的annotations属性：

//注解写法
[@Component](/user/Component)({selector:"ez-app"})
class EzApp{...}

等同于:

class EzApp{...}
EzApp.annotations = [new Component({selector:"ez-app"})];

注解可以看做编译器（traceur）层面的语法糖，但和python的装饰器不同， 注解在编译时仅仅被放在annotation里，编译器并不进行解释展开 - 这个解释的工作是 Angular2完成的：

小结

在Angular2中，bootstrap是围绕组件开始的，你定义一个组件，然后启动它。如果没有一个组件， 你甚至都没有办法使用Angular2！

支持多种渲染引擎

以组件而非DOM为核心，意味着Angular2在内核隔离了对DOM的依赖 - DOM仅仅作为一种可选的渲染引擎存在：