初识Angular2

iszjw

　　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));