遥寄三山
遥寄三山

【Angular2】Angular2——Hello World！

前言

        作为例子之父，Hello World是每个语言学习之时做的第一个例子，今天我们就来比较一下，使用ES5规范的Hello World和使用Typescript的Hello World有什么异同吧。

ES5

        ES全称ECMAScript，它实际上是一种脚本在语法和语义上的标准。实际上JavaScript是由ECMAScript，DOM和BOM三者组成的。

        ES5相信很多人都用过，绝大多数浏览器都支持ES5，当ES6（ES2015）出来时，加入了很多新特性，对ES5来说，这是一个巨大的飞跃。但是，并非大部分浏览器都能跟上这个脚步，我们如何才可以在还不支持ES6的浏览器中运行ES6呢？

Typescript

        TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

        它可以将符合ES6规范的ts代码转换为适合ES5规范的js代码，也就是说，我们可以在仅仅支持ES5的浏览器上使用更多特性的ES6代码规范，是不是超酷呢？

代码

ES5

index.html
app.js 
var App = ng.core.Component({
    selector: 'app',
    template: '
Hello {{target}}!
'
})
.Class({
    constructor: function () {
        this.target = 'world';
    }
});
ng.platformBrowserDynamic.bootstrap(App);

Typescript

index.html




    
    
    <%= TITLE %>
    
    
    
    


    Loading...
    
    
    <%= INIT %>
app.ts 
import {Component} from  '@angular/core'
import {bootstrap} from "@angular/platform-browser-dynamic";
@Component({
    selector: 'app',
    templateUrl: './app.html',
})
class App {
    target:string;
    constructor() {
        this.target = 'world';
    }
}
bootstrap(App);
app.html 
Hello {{target}}!
输出后的app.js 
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('angular2/core');
var browser_1 = require("angular2/platform/browser");
var App = (function () {
    function App() {
        this.target = 'world';
    }
    App = __decorate([
        core_1.Component({
            selector: 'app',
            templateUrl: './app.html',
        }),
        __metadata('design:paramtypes', [])
    ], App);
    return App;
}());
browser_1.bootstrap(App);
输出后的index.html 



    
    
    Switching to Angular 2
    
    
    
    
    


    Loading...

代码解释

        对于ES5规范下的代码，相信我们都很容易懂，app.js中定义了这个组件，在我们的HTML中（需要引用那么多的JS插件，具体作用自行搜索吧）直接引用则会得到想要的效果（显示Hello World！）。

        但是对于Typescript，我们就需要解释一番了。

首先，我们从它的index.html来入手

        Angular2本身是一个JS文件，所以我们需要一个script标签来引入它，并且需要引入一些Angular/TypeScript依赖的文件：

·es6-shim（为了兼容旧浏览器）

·angular2-polyfills（提供跨浏览器的一些基本的标准化，包含的代码专门用于zone,promise和reflection）

·SystemJS（模块加载器，帮助创建模块和解决模块之间的依赖，使复杂的模块加载在浏览器端过程变得容易）

·RxJS（库用与在JS中进行反应式编程）

        也就是我们在输出后的index.html的中添加的标签。

接下来是app.ts文件

导入模块

        import语句定义了在我们代码中需要用到的模块，这里我们导入了两个模块，Component和Bootstrap。我们从@angular/core模块导入了Component模块，@angular/core这部分告诉我们程序在哪里可以找到我们依赖；同样从模块@angular/platform-browser-dynamic中导入bootstrap模块。

创建组件

        我们Angular应用中编写HTML标签，浏览器只认识内置的标签，如