5分钟的Angular快速入门

我只需要一個選項，將以下內容以中文進行本地化轉述：
不管是參考哪個，我會在Angular官方網站上找到。

开发这个应用程序！

・前提条件：需要安装Node.js
・步骤1：创建应用程序的项目文件夹，并定义包的依赖关系，设置特殊项目的配置
・步骤2：创建Angular应用程序的根组件
・步骤3：创建Angular模块
・步骤4：添加用于定义根组件的main.ts到Angular中
・步骤5：添加用于托管应用程序的index.html
・步骤6：构建并运行应用程序
・对应用程序进行更改

步骤1：创建应用的项目文件夹

索引

この章では
(a) プロジェクトフォルダーの作成
(b) パッケージ定義とファイルの配置をしよう
(c) パッケージをインストールしよう

步骤1-a. 创建项目文件夹

虽然没有快速启动，但是我们将在Deck顶部的下方创建一个名为angular2-quickstart的文件夹(用于存放AngularJS应用程序的文件)。

$ pwd 
/Users/{ USER 名}/Desktop/
$ mkdir angular2-quickstart
$ cd angular2-quickstart
$ pwd
/Users/{ USER 名}/Desktop/angular2-quickstart

可能会使用的命令

第一步：添加包定义和配置文件。

增加包装

打开终端并按照以下步骤添加AngularJS文件。

$ pwd 
/Users/{ user名 }/Desktop/angular2-quickstart
$ touch package.json
$ ls 
package.json
$ touch tsconfig.json
$ touch typings.json
$ touch systemjs.config.js
$ ls
package.json        tsconfig.json
systemjs.config.js  typings.json

文件的说明将在下面逐步进行列出。

可能会使用的命令可能是”おそらく使用的命令”

新增添加文件的说明

根据包和文件的定义，将其添加到项目文件夹中。

追加的文件内容

我们将在创建的文件中逐步添加以下内容。

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.5",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.15",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160807145350"
  }
}

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

1-c. 安装软件包

ターミナルのウィンドウで以下のコマンドを入力しきます。

```terminal
$ pwd
/Users/{ user名 }/Desktop/angular2-quickstart
$ npm install

在npm install之后，无法打开typings文件夹。如果想要确认的话，请按照手册安装它们。
终端运行：
$ npm run typings install

如果在安装过程中出现红色警告错误消息。按照惯例，可以从显示警告的错误中恢复，并成功安装。

npm错误和警告

如果在npm install的整个过程中没有npm错误和控制台输出，并且一切都顺利进行。
可能会在中间出现一些npm WARN消息，但安装已完成。
在出现一些gyp ERR!消息后，可能会显示npm WARN消息。
可以忽略它们。
使用node-gyp重新编译软件包。
如果再次编译失败，则软件包将开始恢复，并且一切都将正常工作。
只有在npm install的最后没有出现npm ERR!时才只能使用。

添加npm所需的软件包和库。

Angular应用程序开发需要使用库和软件包。它们依赖于npm软件包管理器。
Angular开发团队推荐在依赖关系和开发环境依赖关系部分中，启动的软件包集合。
请查看npm packages了解详细信息。

可用的脚本

我们建议在package.json中的一些npm脚本中包含一些常见的开发任务。

package.json
{
“scripts”: {
“start”: “tsc && concurrently \”npm run tsc:w\” \”npm run lite\” “,
“lite”: “lite-server”,
“postinstall”: “typings install”,
“tsc”: “tsc”,
“tsc:w”: “tsc -w”,
“typings”: “typings”
}
}

大多数的npm脚本都遵循以下的执行方式。
npm run根据脚本名称进行操作。

有一些类似于”start”的命令不需要使用”run”关键词。

有一些脚本是干什么用的。

・npm start: 同时运行编译器和服务器。两者都在“watch mode”下运行。
・npm run tsc: 执行一次TypeScript编译器。
・npm run tsc:w: 在watch mode下运行TypeScript编译器。在此模式下，进程会持续执行，监视TypeScript的变化并执行变化和编译。
・npm run lite: 执行lite-server。对于Angular应用程序在路由中使用轻量级静态文件服务器非常棒的支持。
・npm run typings: 执行typings工具。
・npm run postinstall: 自动由npm调用，用于成功安装软件包。此脚本将安装在typing.json中定义的TypeScript定义文件。

这样设置就结束了。
我们开始写代码吧。