初识Angular2

Angular2是面向未来的科技，要求浏览器支持ES6+，我们现在要尝试的话，需要加一些垫片来抹平当前浏览器与ES6的差异：

angular2-polyfills - 为ES5浏览器提供ES6特性支持，比如Promise等。
systemjs - 通用模块加载器，支持AMD、CommonJS、ES6等各种格式的JS模块加载
typescript - TypeScript转码器，将TypeScript代码转换为当前浏览器支持的ES5 代码。在本教程中，systemjs被配置为使用TypeScript转码器。
Rx - javascript版本的反应式编程/Reactive Programming实 现库，被打包为systemjs的包格式，以便systemjs动态加载。
angular2.dev - Angular2框架，被打包为systemjs的包格式，以便systemjs动态加载模块。

http.dev - angular2的HTTP访问库router.dev - angular2的路由库

1.引入Angular2预定义类型

import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";

import是ES6的关键字，用来从模块中引入类型定义。在这里，我们从angular2模块库中引入了两个类型： Component类和bootstrap函数。

2.实现一个Angualr2组件

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

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

class也是ES6的关键字，用来定义一个类。@Component是给类EzApp附加的元信息，被称为注解/Annotation。

@Component最重要的作用是：

通过selector属性（值为CSS选择符），告诉Angular2框架，这个组件渲染到哪个DOM对象上。
通过template属性，告诉Angular2框架，使用什么模板进行渲染。

3.渲染到DOM

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

bootstrap(EzApp);

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

注解/Annotation

@Component和@View 就是给一个类添加注解，等同于设置这个类的annotations属性：

@Component({selector:"ez-app"})
class EzApp{...}

等同于

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

注解/Annotation的功能就是Angular2团队向编译器开发团队提出的，因此这通常不是编译器的默认选项，因此我们在配置systemjs时使用TypeScript转码时打开注解：

System.config({
  transpiler: 'typescript',
  typescriptOptions: { emitDecoratorMetadata: true },
});

systemJS - 用于在在浏览器和NodeJS中加载ES6模块，AMD，CommonJS和全局脚本。

System.config({

  // set all requires to "lib" for library code
  baseURL: '/lib/',

  // set "app" as an exception for our application code
  paths: {
    'app/*': '/app/*.js'
  }
});

System.import('app/app').then(null, console.error.bind(console));

注解/Annotation

相关文章