Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@gama

Anguar 5 minitues start with TypeScriptを簡単に和訳して実行してみる(2)。

Last updated at Posted at 2016-08-23

#5min Angular QuickStart
One framework. Angular 2.png

無論参考にするのはAngular公式サイトでございます。

#Buid this app!
・前提条件：node js のインストール
・Step1:アプリケーションのプロジェクトフォルダーを作成し、パッケージの依存関係を定義してスペシャルプロジェクトのセットアップをしよう
・Step2:Angular アプリケーションのroot component を作ろう
・Step3:Angular Moduleを作成しよう
・Step4:Angularにroot component を定義するmain.tsを追加しよう
・Step5:アプリケーションをホストするindex.htmlを追加しよう。
・Step6:アプリケーションを構築し、実行しよう
・アプリケーションに変化を加えよう
・要約

#Step1:Create the app's project folder
##目次
この章では
(a) プロジェクトフォルダーの作成
(b) パッケージ定義とファイルの配置をしよう
(c) パッケージをインストールしよう

##Step1-a.Create the project folder
　quick startにはありませんが、Deck topの直下にangular2-quickstart(angularjsのアプリケーションのファイル)を作っていきます。

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

###おそらく使うコマンド

コマンド コマンドの役割
pwd print working directory: 現在のworkingディレクトリを絶対パスで表示
mkdir { ディレクトリ名} make directory : { ディレクトリ名 }を作成
cd { ディレクトリ名 } change directory : 現状のディレクトリを{ディレクトリ名}に移動します。

##Step1-b.Add package definintion and configuration files
###パッケージの追加
ターミナルを開いて以下のファイルを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

ファイルの説明は以下に記載していきます。
###おそらく使うコマンド

コマンド コマンドの役割
ls list:ファイルの一覧を表示するコマンド
touch { file名 } :{file 名}のタイムスタンプを変更または、空のファイルを作成します。

###追加したファイルの説明
パッケージの定義とfile定義に従ってプロジェクトフォルダに追加します。

追加するパッケージ名 パッケージの説明
package.json quick startの依存関係といくつかの有益なscriptを定義しているパッケージリストです。詳しくはNpm Package Configurationをご確認ください。
tsconfig.json tsconfig.jsonはtypeScriptのコンパイラーファイルです。詳しくはTypeScript Confingrationをご確認ください。
typings.json TypeScriptの定義ファイルを定義します。詳しくはTypeScript Configrationをご確認ください。
systemjs.config.js JSのシステム定義ファイルです。

###追加したファイルの中身
作成したファイルに以下の中身を追加していきます。

package.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"
  }
}
tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}
typings.json
{
  "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"
  }
}
systemjs.config.js
/**
 * 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.Install packages
npmコマンドを使ってpackage.jsonのパッケージリストをインストールしていきます。
ターミナルのウィンドウで以下のコマンドを入力しきます。

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

npm installのあとにtypingsフォルダーは開くことができません。もし確認がしたい場合は、マニュアル通りにこれらをインストールしてください。

$ npm run typings install

インストールの間に赤文字の警告的エラーメッセージが表示された場合。インストールは慣例的に警告が表示されたエラーからリカバリーし、正常にインストールができます
###npm error and warnings
npm installの最初から最後までnpm errorとコンソールに表示がなく、全てが正常にうまくいった場合。
npm WARNメッセージが途中でいくつかでてきますが、インストールは完了しています。
いくつかgyp ERR!メッセージがでた後に、npm WARNメッセージが表示されることがあります。
それらを無視してもかまいません。
node-gypを使ってパッケージは再びコンパイルを試します。
再度やったコンパイルが失敗したら、パッケージはリカバーを始め、全てが正常に動作します。
npm installの最後までにnpm ERR!がでなかった場合に限ります。

###npmに必要なパッケージとライブラリを追加します。
Angularアプリケーションの開発は、ライブラリとパッケージはアプリケーションが必要としています。npm package managerに依存しています。
Angularの開発チームは依存関係と開発環境の依存関係のセクションの中のパッケージのスタートセットを推奨しています。
詳細はnpm packagesをみてください。

###つかえるScript
common development taskを実行するために私たちの提案しているpackage.jsonの中にいくつかのnpm scriptsが含まれています。

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 scriptは以下の方法に従って実行します。
script nameによってnpm runは従っています。

いくつかのコマンド(startのような)はrunキーワードを必要としいません。
###いくつかのscriptが何をするか。
・npm start:コンパイラとサーバを同時に実行します。どちらも"watch mode"で実行します。
・npm run tsc:TypeScriptコンパイラを一度実行します。
・npm run tsc:w:watch modeでタイプスクリプトコンパイラを実行します。"watch mode":プロセスは実行を続けます。監視中にType Scriptの変更をまち、変更とコンパイルを実行します。
・``npm run lite:lite-serverを実行します。軽量な静的なファイルサーバーをAngular アプリケーションがルーティングで使うサポートにとってとても素晴らしい。 ・ npm run typings```:typings toolを実行します。
・```npm run postinstall```:npmにより自動的にコールされ、パッケージを正常にインストールします。このScriptは```typing.json```の中で定義されているTypeScript definition filesをインストールします。

これでセットアップおわりました。
コードを書きはじめましょう。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?