进行Angular2的快速入门和教程 – 第一部分

2 年 ago

清, 宇

2 minutes

JavaScript/TypeScript初学者曰苦战Angular2，特此记录之，重复之处乃容许也。

怎么做？

在这篇文章中，我们将介绍Angular2的快速入门。我们在这里创建的应用程序将成为后续的教程“英雄之旅”的前提。

目标对象

我稍微接触过编程，但是我是JavaScript的初学者，适用于对AngularJS没有接触过且英文水平不是很强的人。

版本

我们在Angular2.0.0-rc.5中进行了实施。

这篇投稿的英文引用来源

虽然版本不同，但我认为影响不会太大。

执行结果

完成快速入门后，您将创建出类似以下链接的内容。
这是一个类似于“Hello World”的示例。

提前需要的东西

必要なものバージョン概要npm3以上Javascriptのパッケージマネージャnode.js5以上サーバサイドでJavascriptを動かすための環境TypeScript1.8.10以上Javascriptを静的型付け言語にする言語

我使用Atom作为脚本编辑器。似乎还有其他选项，如Visual Studio和WebStorm。
请自行搜索安装所需软件的方法。

步骤1：创建和设置项目

请创建以下的目录和文件。
请从这里复制粘贴文件的内容。

#dir/file概要1angular2-quickstart/プロジェクトディレクトリ2#1/package.jsonnpmが使う定義ファイル
このアプリケーションが必要とするモジュール(ライブラリ)一覧3#1/systemjs.config.jsSystemJSの定義ファイル
SystemJSは,javascriptモジュール(ライブラリ)を動的に読み込むためのライブラリ4#1/tsconfig.jsontypescriptが使う定義ファイル
javascriptのバージョンなどを指定する5#1/typings.jsontypescriptの型情報定義ファイルを取得するための定義ファイル
使用するモジュールの型情報ファイルを取得するために必要
TypesScriptの型チェックで使用する

关于package.json的参考：
NPM包（英文）
npm package.json使用手册

SystemJS是一个关于systemjs.config.js的参考文档。

关于tsconfig.json的参考信息：
TypeScript配置（英语）

从命令行(命令提示符、终端等)中，
进入angular2-quickstart文件夹，
执行npm install命令，
安装所需的模块。(文件大小相当大。)
之后假定当前目录为angular2-quickstart。

步骤2：创建应用程序

我会创建一个目录应用程序。

我們會在這個目錄下創建腳本等等。
接下來，我們將創建文件：app/app.module.ts。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

app.module.ts是应用程序的起点文件。
在快速入门中，执行以下操作：

モジュールのインポート・・・import {クラス(モジュール名)} from ‘ディレクトリ/ファイル名(拡張子なし)’の形で記載

NgModule ・・・@NgModuleデコレータを使用するために必要
BrowserModule ・・・ブラウザで動かすために必要。
AppComponent ・・・後ほど作成する部品。2

NgModuleデコレータの定義

@ほにゃららで、ほにゃらら部分をデコレートできる。ほにゃららに引数を渡すイメージ
imports: 必要な他のモジュール
declarations: このモジュールに属するコンポーネント,ディレクティブ,パイプを指定する

コンポーネント: 表示する画面の一部をコントロールする。後ほど作成
ディレクティブ: htmlのタグの属性を書き換える
パイプ:シェルのパイプみたいなもの

bootstrap: ルート(エントリ)コンポーネントを指定

AppModuleクラスの宣言

Angularアプリは、ひとつのルートモジュールを持ち、ここではAppModuleとする。export宣言で外部からの参照ができるようになる

步骤3：创建组件

创建文件：app/app.module.ts。


import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})

export class AppComponent { }

Angular应用通常包含一个根组件。它与想要动态变化的HTML模板一起控制页面的一部分。我们在快速入门中执行以下操作。

Component ・・・@Componentデコレータを使用するために必要

Componentデコレータの定義

htmlのどの部分に対して、どんなhtmlテンプレートを使用し、コンポーネントをどう作成するかを宣言する
selector: 書き換え対象のHTML要素を特定するための文字列。今回の場合index.htmlに定義する、my-app要素を書き換える
template: 書き換え後の内容。動的に変化するものを含むのでJSPっぽい

AppComponentクラスの宣言

ここでの宣言により、AppModuleで使える

步骤4：启动应用程序

创建文件 app/main.ts。


import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

这是用于运行应用程序的初始设置文件。此文件将调用AppModule。
之所以将AppModule、AppComponent和main.ts分开，是因为这次为浏览器创建了main.ts。而对于智能手机应用程序，如使用Apache Cordova，会需要进行修改。

第五步：创建网页的入口

在项目根目录（angular2-quickstart）中创建一个index.html文件。

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

要点如下。

core-js: ブラウザ間の差を埋めるためのライブラリ
zone.js ,reflect-metadata: Angularで必要なライブラリ
SystemJS: モジュールのロードで必要なライブラリ

systemjs.config.jsとhtml内のスクリプトにより、appディレクトリ内のmain.jsが呼ばれる

タグ内のタグがAppComponentにより書き換えられる

(なおの様な書き方はエラーになる様です。)

添加样式表

在index.html中定义调用的样式表。


/* Master Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}

步骤6：启动应用程序

请在项目目录（angular2-quickstart）内执行以下命令。

运行npm start

这个命令是在package.json文件中定义的，并且以下进程会并行启动。

lite-serverと呼ばれる静的ファイルサーバ: スクリプトなどファイルが変更されるたびに、ブラウザを更新する

只需执行命令，浏览器将自动启动并显示“我的第一个Angular2应用程序”的文字，然后就完成了。

本章已经结束。接下来的章节中，我们将通过应用程序“英雄之旅”来创建一个更实用的Angular2应用程序。

由于在意译过程中正式版本的Angular2被发布，导致本系列的文章中包含了各种版本的内容，但是我认为不需要进行任何更改。

当使用相对路径指定导入文件时，需要加上”./”。