07月26, 2016

Hello Angular2

前言

Angular 2 正式版还没有出来,但是发现官网已经推广开发版本了,所以尝了一下鲜,来吧,从 Hello World 开始。

1. 安装需要的工具

这部分和 ng 2 没多大关系,但是我第一次根据官网 5 分钟配置中发现了一些坑,所以做一下准备,免得打击了第一次使用技术的自信心。

  1. Node 和 NPM 最新版(省略)
  2. jspm 包管理器来初始化 SystemJS 模块加载器那一套

创建一个项目目录

mkdir ng && cd ng

安装 jspm 环境

sudo npm install jspm/jspm-cli -g
npm init
npm install jspm --save-dev
// 一路回车就行了
jspm init

配置一下 config.js

System.config({
    "baseURL": "/",
    "transpiler": "traceur",
    "paths": {
        "*": "*.js",
        "github:*": "jspm_packages/github/*.js"
    },
    "map": {
        "traceur": "github:jmcriffey/bower-traceur@0.0.88",
        "traceur-runtime": "github:jmcriffey/bower-traceur-runtime@0.0.88"
    }
});

安装一个本地服务工具

sudo npm install -g http-server
// ng 目录下启动
http-server

2. 开始体验

(1)使用 TypeScript,所以先安装 tsd 包管理器

sudo npm install -g tsd@^0.6.0

(2)安装 ng 2 依赖的核心

tsd install angular2 es6-promise rx rx-lite

这里安装完成后会创建包管理器的文件夹:typings

(3)在 ng 目录下创建代码文件

touch app.ts index.html

(4)配置一下 TypeScript

sudo npm install -g typescript@^1.5.0-beta
// 在 ng 目录下运行监听编译
tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts

(5)接下来编写 app.ts 文件

///<reference path="typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap} from "angular2/angular2";

// Annotation section
@Component({
    selector: "my-app"
})
@View({
    template: "<h1>Hello {{ name }}</h1>"
})
// Component controller
class MyAppComponent {
    name: string;

    constructor() {
    this.name = "Angular2";
    }
}

bootstrap(MyAppComponent);

(6)下载官方的 traceur-runtime.js 和 angular2.dev.js(为了速度,你也可以直接引入)

<!-- index.html -->
<html>
    <head>
        <title>Angular 2 Quickstart</title>
        <script src="typings/js/traceur-runtime.js"></script>
        <script src="jspm_packages/system.js"></script>
        <script src="config.js"></script>
        <script src="typings/js/angular2.dev.js"></script>
    </head>
    <body>

    <!-- The app component created in app.ts -->
    <my-app></my-app>
    <script>System.import("./app");</script>

    </body>
</html>

最后的文件目录如下:

文件目录

运行的结果图:

ng2 hello

源码下载:360云盘下载 (提取码:0da5)

本文链接:http://www.60sky.com/post/Hello-Angular2.html

-- EOF --

Comments