[Anguler]QuickStartのプロジェクトを実行する

jsのフレームワークであるAngulerでは、QuickStartプロジェクトというひな型プロジェクトが用意されています。

今回は、このQuickStartプロジェクトを手元のPCで実行する方法を説明します。

node.jsのインストール

下記のページからnode.jsをダウンロードして、インストールします。
https://nodejs.org/ja/

QuickStartプロジェクトをダウンロード

下記のコマンドで取得できます。

git clone https://github.com/angular/quickstart.git

何が入ったか確認する

findすると、以下のようなファイル構成でした。

cd quickstart

find . -print

./.editorconfig
./.gitignore
./.travis.yml
./bs-config.e2e.json
./bs-config.json
./CHANGELOG.md
./e2e/app.e2e-spec.ts
./e2e/tsconfig.json
./karma-test-shim.js
./karma.conf.js
./LICENSE
./non-essential-files.osx.txt
./non-essential-files.txt
./package.json
./protractor.config.js
./README.md
./src/app/app.component.spec.ts
./src/app/app.component.ts
./src/app/app.module.ts
./src/favicon.ico
./src/index.html
./src/main.ts
./src/styles.css
./src/systemjs-angular-loader.js
./src/systemjs.config.extras.js
./src/systemjs.config.js
./src/tsconfig.json
./tslint.json

npmパッケージをインストールする

npmパッケージをnpm installコマンドでインストールします。何がインストールされるは、quickstart/package.jsonに書いてあります。コマンドを実行すると、node_modulesディレクトリにパッケージが入るので、package.jsonと見比べてみると良いです。

npm install

HTTPサーバを起動

テスト用のhttpサーバは下記のコマンドで実行できます。

npm start

npm startで何が実行されるかは、package.jsonに書いてあります。中身を見ると、npm run build:watchと、npm run serveを実行しているようです。

{
  "scripts": {
    ...
    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
  }
}

package.jsonから、さらにbuild:watchとserveの定義をチェックすると、下記のコマンドを実行していました。

{
  "scripts": {
    ...
    "build:watch": "tsc -p src/ -w",
    "serve": "lite-server -c=bs-config.json",
  }
}

実行結果を確認する

http://localhost:3000/にアクセスして、Hello AngularのページがでればOKです。

Amazonでおトクに買い物する方法

AmazonチャージでポイントGET

Amazonは買いもの前にAmazonギフト券をチャージしてポイントをゲットしないと損！

こちらもおススメ