Angluarsjs 2 学习笔记一

Angluarsjs 2 学习笔记一

2017-06-08 / 0 评论 / 54 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年10月27日,已超过884天没有更新,若内容或图片失效,请留言反馈。

(转)# *** 初识Angular 2**

1. 引入Angular2预定义类型

import {Component, View, bootstrap} from “angular2/angular2”;
import 是ES6的关键字,用来从模块中引入类型定义。Here, We will 引入三个类型from angular2模块库中:Component类, View类和bootstrap函数。

2. 实现一个Angular2组件

实现一个Angular2组件也很简单,定义一个类,然后给这个类添加注解:

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

class也是ES6的关键字,用来定义一个类。@Component@View都是给类EzApp附加的元信息,被称为注解/Annotation。
@Component最重要的作用是通过selector属性(值为CSS选择符),指定这个组件渲染到哪个DOM对象上。 @View最重要的作用是通过template属性,指定渲染的模板。

  1. 渲染组件到DOM
    将组件渲染到DOM上,需要使用自举/bootstrap函数:
    bootstrap(EzApp);
    这个函数的作用就是通知Angular2框架将EzApp组件渲染到DOM树上。

** 知识点:**
1. 注解/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团队向traceur团队提出的,这不是traceur的默认选项, 因此你看到,我们配置systemjs在使用traceur模块时打开注解:

System.config({
  map:{traceur:"lib/traceur"},
  traceurOptions: {annotations: true}
});

小结

如果你了解一点Angular1.x的bootstrap,可能隐约会感受到Angular2中bootstrap的一些 变化 - 我指的并非代码形式上的变化。

以组件为核心

在Angular1.x中,bootstrap是围绕DOM元素展开的,无论你使用ng-app还是手动执行bootstrap()函数,自举过程是建立在DOM之上的。

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

支持多种渲染引擎

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

上面的图中,DOM Render已经实现,Server Render正在测试,iOS Render和Android Render 是可预料的特性,虽然我们看不到时间表。

这有点像React了。(@hadong 是不是用React写过代码?)

0

评论 (0)

取消