在Angular2中尝试实现Hello World

2 年 ago

宇, 华

2 minutes

我总结了在Angular2中进行HelloWorld的步骤。

前提条件

環境バージョンPCWinnodev5.6.0npm3.6.0

假设已安装了 Node 和 npm。

提供环境

1. 创建目录

mkdir angular-hello
cd angular-hello
npm init

有关npm的入门，请参考这里。

请安装。

这次特意分开写成了一条一条。
这是因为笔者毕竟是初学者，
为了确认每个安装是干什么的，
以及查询并边学习，所以进行了这样的分隔。
参考的网站如下。

npm install typescript
npm install browserify
npm install angular2

環境バージョンtypescript1.8.10browserify13.0.0angular22.0.0-beta.17

npm install es6-shim@^0.35.0
npm install reflect-metadata@0.1.2
npm install rxjs@5.0.0-beta.6
npm install zone.js@^0.6.6

如果遇到 npm 报错“未满足的对等依赖”，请参考以下内容。
上述问题是由于依赖关系引起的错误。

安装并完整地安装所有版本。

构建脚本

“package.json” 可以被简单地解释为一个用于描述项目依赖和配置的文件。

在运行 npm init 后，编辑 package.json。
这次，根据参考网站，我们将使用 Browserify 进行构建。

{
    "scripts": {
        "tsc": "tsc -p .",
        "browserify": "browserify ./index.js -o ./bundle.js",
        "build": "npm run tsc && npm run browserify"
    }
}

tsconfig.json 文件

创建 tsconfig.json。

{
    "compilerOptions": {
    "target": "es5",
    "noImplicitAny": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node"
  },
  "files": [
    "./index.ts"
  ]
}

创建文件

index.html 网页

参考页面类似的方式，直接使用模板创建index.html。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Hello Angular 2!</title>
</head>
<body>
  <my-app>Loading…</my-app>
  <script src="./bundle.js"></script>
</body>
</html>

索引.ts

/// <reference path="node_modules/angular2/typings/browser.d.ts" />

import "es6-shim";
import "reflect-metadata";
import "rxjs/Rx";
import "zone.js/dist/zone";

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

@Component({
  selector: `hello-world`,
  template: `
    <h1>Hello World!</h1>
  `
})
class HelloWorldComponent {
}

@Component({
  selector: `my-app`,
  template: `
    <hello-world></hello-world>
  `,
  directives: [HelloWorldComponent]
})
class MyAppComponent {
}

bootstrap(MyAppComponent);

建造

npm run build

将生成 bundle.js。

打开index.html，
当屏幕上的「loading…」变为「Hello World !」时，完成。

参考页

以下是一些关于Angular 2的链接：

– http://qiita.com/hashrock/items/15f4a4961183cfbb2658
– http://qiita.com/armorik83/items/ae737ab584012a0f5876
– https://angular.io/docs/ts/latest/quickstart.html
– http://rdlabo.jp/angular2-376.php
– http://qiita.com/M-ISO/items/d693ac892549fc95c14c

总结

勉強しながら実行できたけど、まだ十分理解しているとは言えない感じ。。。
不仅要通过模仿完成，还要边运行边全面理解，不能只凭咒语就结束。