Angular 2 チュートリアル
Angular 2を使い始める

備考

バージョン

angular-cliでangular2をインストールする

この例は、Angular 2の簡単な設定と簡単なサンプルプロジェクトの生成方法です。

前提条件：

• Node.js v4以上
• npm v3またはそれ以上または糸 。

ターミナルを開き、コマンドを1つずつ実行します。

npm install -g @angular/cli

または

yarn global add @angular/cli

パッケージマネージャの選択によって異なります。

前のコマンドが実行可能な追加、グローバル角度/ CLI @インストールng PATHに。

新しいプロジェクトをセットアップするには

新しいプロジェクトを設定するフォルダに移動します。

次のコマンドを実行します。

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

これで、Angular 2で簡単なサンプルプロジェクトを作成できるようになりました。これで、端末に表示されているリンクに移動し、そのリンクが何を実行しているかを見ることができます。

既存のプロジェクトに追加するには

現在のプロジェクトのルートに移動します。

次のコマンドを実行します。

ng init

これにより、プロジェクトに必要な足場が追加されます。ファイルは現在のディレクトリに作成されるので、空のディレクトリで実行してください。

ローカルでプロジェクトを実行する

ブラウザで実行中にアプリケーションを表示したり操作したりするには、プロジェクトのファイルをホストするローカル開発サーバーを起動する必要があります。

ng serve

サーバーが正常に開始された場合は、サーバーが実行されているアドレスが表示されます。通常これは：

http://localhost:4200

このローカル開発サーバーは、Hot Module Reloadingに接続されているので、html、typescript、またはcssを変更すると、ブラウザが自動的に再読み込みされます（ただし、必要に応じて無効にすることができます）。

コンポーネント、ディレクティブ、パイプおよびサービスの生成

ng generate <scaffold-type> <name> （または単にng g <scaffold-type> <name> ）コマンドを使用すると、Angularコンポーネントを自動的に生成できます。

# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component

angle-cliが生成することができる足場には、いくつかのタイプが考えられます。

型名を最初の文字で置き換えることもできます。例えば：

ng gm my-new-moduleを使用して新しいng gm my-new-moduleを生成するか、またはng gc my-new-componentを使用してコンポーネントを作成します。

ビルディング/バンドル

Angular 2 Webアプリケーションの構築がすべて完了し、Apache TomcatのようなWebサーバーにインストールしたい場合は、プロダクションフラグが設定されているかどうかにかかわらずbuildコマンドを実行するだけです。プロダクションはコードを最小化し、プロダクション設定を最適化します。

ng build

または

ng build --prod

次に、プロジェクトのルートディレクトリで/distフォルダを探します。そこにはビルドが含まれています。

小規模なプロダクションバンドルの利点をご希望の場合は、Ahead-of-Timeテンプレートコンパイルを使用して、最終ビルドからテンプレートコンパイラを削除することもできます。

ng build --prod --aot

ユニットテスト

Angular 2は組み込みの単位テストを提供し、Angle-Cliで作成されたすべてのアイテムは基本単位テストを生成し、展開することができます。ユニットテストはジャスミンを使って書かれ、カルマを通して実行されます。テストを開始するには、次のコマンドを実行します。

ng test

このコマンドは、プロジェクト内のすべてのテストを実行し、ソースファイルが変更されるたびに、アプリケーションのテストまたはコードであるかどうかにかかわらず、それらを再実行します。

詳細については、 angi-cli github pageをご覧ください。

angle-cliなしでAngular 2を始める。

角2.0.0-rc.4

この例では、「Hello World！」を作成します。単純化のために1つのルートコンポーネント（ AppComponent ）を持つアプリケーション。

前提条件：

• Node.js v5以降
• npm v3以降

注：コンソール/ターミナルでnode -vとnpm -v実行すると、バージョンを確認できnode -v 。

ステップ1

プロジェクトの新しいフォルダを作成して入力します。それをangular2-exampleと呼んでみましょう。

mkdir angular2-example
cd angular2-example

ステップ2

アプリケーションコードの作成を始める前に、 package.json 、 tsconfig.json 、 typings.json 、およびsystemjs.config.jsの4つのファイルを追加します。

免責事項： 公式5分クイックスタートでも同じファイルが見つかります。

package.json - npmを使用してすべての依存関係をダウンロードできるようにし、単純なスクリプトの実行を提供して、簡単なプロジェクトでの作業を容易にします。 （タスクを自動化するには、 Gulpのようなものを将来使用することを検討する必要があります）。

{
  "name": "angular2-example",
  "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.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "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.14",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

tsconfig.json - TypeScriptトランスパイライザを設定します。

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

typings.json - 使用しているライブラリをTypeScriptに認識させます。

{
  "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+20160621231320"
  }
}

systemjs.config.js -設定SystemJSを （あなたが使用することもできWebPACKのを ）。

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application's 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);

ステップ3

依存関係を入力してインストールしましょう

npm install

コンソール/端末に表示されます。

ステップ4

angular2-exampleフォルダ内にindex.htmlを作成します。

<html>
  <head>
    <title>Angular2 example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 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></my-app>
  </body>
</html>

あなたのアプリケーションは、 my-appタグの間でレンダリングされます。

しかし、Angularは何をレンダリングするかまだ分​​かりません。それを伝えるために、 AppComponentを定義します。

ステップ5

appというサブフォルダを作成し、 appを構成するコンポーネントとサービスを定義することができます。 （この場合、 AppComponentコードとmain.tsだけが含まれます）。

mkdir app

ステップ6

ファイルapp/app.component.ts作成します。

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

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <ul>
        <li *ngFor="let message of messages">
            {{message}}
        </li>
    </ul>
  `
})
export class AppComponent { 
    title = "Angular2 example";
    messages = [
        "Hello World!",
        "Another string",
        "Another one"
    ];
}

何が起こっていますか？まず、このコンポーネントのHTMLタグとテンプレートをAngularに与えるために使用する@Componentデコレータをインポートします。次に、テンプレートに使用できるtitle変数とmessages変数を持つクラスAppComponentを作成しmessages 。

さて、そのテンプレートを見てみましょう：

<h1>{{title}}</h1>
<ul>
    <li *ngFor="let message of messages">
        {{message}}
    </li>
</ul>

*ngForディレクティブを使用して、 h1タグにtitle変数を表示してから、 messages配列の各要素を示すリストを作成していmessages 。配列の各要素に対して、 *ngForは、 li要素内で使用するmessage変数を作成しmessage 。結果は次のようになります。

<h1>Angular 2 example</h1>
<ul>
    <li>Hello World!</li>
    <li>Another string</li>
    <li>Another one</li>
</ul>

ステップ7

ここで、 main.tsファイルを作成します。これは、Angularが最初に見たファイルです。

app/main.tsファイルを作成します。

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

私たちは、インポートしているbootstrap機能とAppComponent後、使用して、クラスをbootstrapルートとして使用するコンポーネントの角を伝えるために。

ステップ8

それはあなたの最初のアプリを起動する時間です。タイプ

npm start

あなたのコンソール/ターミナルで。これはから準備スクリプトを実行しますpackage.json LITE-サーバを起動し、ブラウザウィンドウに自分のアプリを開き、ウォッチモードでの活字体のtranspilerを実行します（そう.tsファイルはtranspiledされ、変更を保存するとき、ブラウザが更新されます） 。

今何？

公式のAngular 2ガイドとその他のStackOverflowのドキュメントのトピックを調べてください。

AppComponentを編集して、外部テンプレート、スタイルを使用したり、コンポーネント変数を追加/編集したりすることもできます。ファイルを保存した直後に変更が表示されるはずです。

Visual StudioをNPMおよびNODEの更新と同期させておく

ステップ1： Node.jsのダウンロードを検索します。通常はC：/ program files / nodejsにインストールされています。

ステップ2： Visual Studioを開き、[ツール]> [オプション]

ステップ3：オプションウィンドウで、「プロジェクトとソリューション>外部Webツール」にナビゲートします。

ステップ4： Node.jsファイルの場所（C：/ program files / nodejs）で新しいエントリを追加する。重要なのは、メニューの矢印ボタンを使用して、参照をリストの先頭に移動する。

ステップ5： Visual Studioを再起動し、npmコマンドウィンドウからプロジェクトに対してnpmインストールを実行します。

その厄介な会社の代理を通過する

XYZ MegaCorpのWindows作業用コンピュータでAngular2サイトを稼働させようとしている場合は、会社のプロキシを経由して問題が発生している可能性があります。

プロキシを通過する必要があるパッケージマネージャは少なくとも2つあります。

1. NPM
2. 入力

NPMの場合、次の行を.npmrcファイルに追加する必要があります。

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/

入力するには、 .typingsrcファイルに次の行を追加する必要があります。

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
rejectUnauthorized=false

これらのファイルはおそらくまだ存在しないため、空のテキストファイルとして作成することができます。それらをプロジェクトルートに追加することもできます（ package.jsonと同じ場所に置くことも、 %HOMEPATH%置くこともできます。これらはすべてのプロジェクトで利用可能になります）。

明らかではなく、人々がプロキシ設定が機能していないと考える主な理由は、ドメインとユーザー名を区切る\ URLエンコードである%5Cです。 Steve Robertsに感謝します。 企業プロキシの後ろにnpmを使用する.pac

node.js / expressjsバックエンドでAngular 2を使い始める（httpサンプルが含まれています）

シンプルな「Hello World！」を作成します。 node.js（expressjs）バックエンドを使ってAngular2 2.4.1（ @NgModule変更）のアプリケーション

前提条件

• Node.js v4.xx以上
• npm v3.xx以上または糸

その後、 npm install -g typescript実行npm install -g typescriptか、またはyarn global add typescriptをyarn global add typescriptをyarn global add typescriptにインストールします。

ロードマップ

ステップ1

私たちのアプリ用の新しいフォルダ（およびバックエンドのルートディレクトリ）を作成します。 Angular2-expressと呼ぶことにしましょう。

コマンドライン ：

mkdir Angular2-express
cd Angular2-express

ステップ2

node.jsアプリケーション用にpackage.json （依存関係用）とapp.js （ブートストラップ用）を作成します。

package.json：

{
  "name": "Angular2-express",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "node app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.13.3",
    "express": "^4.13.3"
  }
}

app.js：

var express = require('express');
var app = express();
var server = require('http').Server(app);
var bodyParser = require('body-parser');

server.listen(process.env.PORT || 9999, function(){
    console.log("Server connected. Listening on port: " + (process.env.PORT || 9999));
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}) );

app.use( express.static(__dirname + '/front' ) );

app.get('/test', function(req,res){ //example http request receiver
  return res.send(myTestVar);
});

//send the index.html on every page refresh and let angular handle the routing
app.get('/*',  function(req, res, next) {
    console.log("Reloading");
    res.sendFile('index.html', { root: __dirname }); 
});

その後、 npm installまたはyarnを実行して依存関係をインストールします。

今、私たちのバックエンド構造が完成しました。フロントエンドに移動しましょう。

ステップ3

当社のフロントエンドは、名前のフォルダ内にある必要がありfront 、当社の内部Angular2-expressフォルダ。

コマンドライン：

mkdir front
cd front

私たちがバックエンドでやったように、フロントエンドは依存ファイルも必要とします。次のファイルを作成してみましょう： package.json 、 systemjs.config.js 、 tsconfig.json

package.json ：

{
  "name": "Angular2-express",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.4.1",
    "@angular/compiler": "~2.4.1",
    "@angular/compiler-cli": "^2.4.1",
    "@angular/core": "~2.4.1",
    "@angular/forms": "~2.4.1",
    "@angular/http": "~2.4.1",
    "@angular/platform-browser": "~2.4.1",
    "@angular/platform-browser-dynamic": "~2.4.1",
    "@angular/platform-server": "^2.4.1",
    "@angular/router": "~3.4.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.0.2",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "typescript": "2.0.2"
  }
}

systemjs.config.js：

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    defaultJSExtensions:true,
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/*"
  ]
}

その後、 npm installまたはyarnを実行して依存関係をインストールします。

これで依存ファイルが完成しました。 index.htmlましょう：

index.html：

<html>
  <head>
    <base href="/">
    <title>Angular2-express</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 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>

これで最初のコンポーネントを作成する準備が整いました。 frontフォルダ内にappという名前のフォルダを作成します。

コマンドライン：

mkdir app
cd app

main.ts 、 app.module.ts 、 app.component.tsという名前の以下のファイルを作ってみましょう

main.ts：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

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

app.module.ts：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from "@angular/http";

import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ 
    BrowserModule,
    HttpModule    
  ],
  declarations: [ 
    AppComponent
  ],
  providers:[ ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {}

app.component.ts：

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

@Component({
  selector: 'my-app',
  template: 'Hello World!',
  providers: []
})
export class AppComponent { 
  constructor(private http: Http){
    //http get example
    this.http.get('/test')
     .subscribe((res)=>{
       console.log(res);
     });
  }
}

その後、typescriptファイルをjavascriptファイルにコンパイルします。現在のディレクトリ（Angular2-expressフォルダ内）から2レベル上に移動し、以下のコマンドを実行します。

コマンドライン：

cd ..
cd ..
tsc -p front

私たちのフォルダ構造は次のようになります：

Angular2-express
├── app.js
├── node_modules
├── package.json
├── front
│   ├── package.json
│   ├── index.html
│   ├── node_modules
│   ├── systemjs.config.js
│   ├── tsconfig.json
│   ├── app
│   │   ├── app.component.ts
│   │   ├── app.component.js.map
│   │   ├── app.component.js
│   │   ├── app.module.ts
│   │   ├── app.module.js.map
│   │   ├── app.module.js
│   │   ├── main.ts
│   │   ├── main.js.map
│   │   ├── main.js

最後に、Angular2-expressフォルダの中で、コマンドラインでnode app.jsコマンドを実行しnode app.js 。お気に入りのブラウザを開き、 localhost:9999をチェックしてあなたのアプリを見てください。

Angular 4をダイビングしよう！

Angular 4が利用可能になりました！実際にはAngularはAngular 2以降のセーバーを使用しますが、変更を破棄したときにメジャー番号を増やす必要があります。 Angularチームは、変化を引き起こす機能を延期しました。これはAngular 4でリリースされます。Router 3には既にバージョン3があるため、Angular 3はスキップされてコアモジュールのバージョン番号を調整できます。

Angularチームのように、Angular 4アプリケーションは、スペースの消費が少なく、以前よりも速くなります。アニメーションパッケージを@ angle / coreパッケージから分離しています。誰かがアニメーションパッケージを使用していない場合、コードの余分なスペースは生産に終わらないでしょう。テンプレートバインディング構文は、if / elseスタイル構文をサポートするようになりました。 Angular 4はTypescript 2.1と2.2の最新バージョンと互換性があります。したがって、Angular 4はよりエキサイティングになります。

ここでは、プロジェクトでAngular 4の設定を行う方法を説明します。

3種類の方法で角度設定を開始しましょう：

Angular-CLI（Command Line Interface）を使用すると、すべての依存関係がインストールされます。

• 角度2から角度4に移行できます。

• githubを使用してAngular4の定型文をクローンすることができます。 （これは最も簡単なものです。）

• Angular-CLI（コマンドラインインターフェイス）を使用した角度設定。

Angular-CLIを使用する前に、マシンにノードがインストールされていることを確認してください。ここでは、ノードv7.8.0を使用しています。ターミナルを開き、Angular-CLIの次のコマンドを入力します。

npm install -g @angular/cli

または

yarn global add @angular/cli

使用するパッケージマネージャによって異なります。

Angular-CLIを使用してAngular 4をインストールしましょう。

ng new Angular4-boilerplate

cd Angular4-boilerplate私達はすべて角度4に設定されています。とても簡単で簡単な方法です.😌

角度2から角度4に移動する角度設定

今度は第2のアプローチを見てみましょう。 Angular 2をAngular 4に移行する方法を示します。そのためには、Angular 2プロジェクトを複製し、Angular 2依存性をpackage.jsonのAngular 4 Dependencyに更新する必要があります。

"dependencies": {
    "@angular/animations": "^4.1.0",
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/core": "^4.0.1",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@angular/router": "4.0.2",
    "typescript": "2.2.2"
   }

これらはAngular 4の主な依存関係です。次に、npmをインストールしてnpmを起動してアプリケーションを実行します。私のpackage.jsonを参照してください。

githubプロジェクトからの角度設定

この手順を開始する前に、マシンにgitがインストールされていることを確認してください。ターミナルを開き、以下のコマンドを使ってangular4-boilerplateをクローンしてください：

[email protected]:CypherTree/angular4-boilerplate.git

次に、すべての依存関係をインストールして実行します。

npm install

npm start

また、Angular 4の設定が完了しました。すべての手順は非常に簡単なので、いずれかを選択することができます。

angular4-boilerplateのディレクトリ構造

Angular4-boilerplate
-karma
-node_modules
-src
   -mocks
   -models
      -loginform.ts
      -index.ts
   -modules
      -app
        -app.component.ts
     -app.component.html
      -login
    -login.component.ts
    -login.component.html
    -login.component.css
      -widget
     -widget.component.ts
     -widget.component.html
     -widget.component.css
    ........    
   -services
       -login.service.ts
    -rest.service.ts
   -app.routing.module.ts
   -app.module.ts
   -bootstrap.ts
   -index.html
   -vendor.ts
-typings
-webpack
-package.json
-tsconfig.json
-tslint.json
-typings.json 

ディレクトリ構造の基本的な理解：

すべてのコードはsrcフォルダにあります。

mocksフォルダは、テスト目的で使用されるモックデータ用です。

modelフォルダには、コンポーネントで使用されているクラスとインターフェイスが含まれています。

モジュールフォルダには、app、login、widgetなどのコンポーネントのリストが含まれています。すべてのコンポーネントには、typescript、html、およびcssファイルが含まれています。 index.tsはすべてのクラスをエクスポートするためのものです。

servicesフォルダーには、アプリケーションで使用されるサービスのリストが含まれています。私は休憩サービスと別のコンポーネントサービスを分離しています。休憩サービスにはさまざまなhttpメソッドが含まれています。ログインサービスは、ログインコンポーネントとレストサービスの間のメディエータとして機能します。

app.routing.tsファイルには、アプリケーションのすべての可能なルートが記述されています。

app.module.tsは、rootモジュールとしてappモジュールを記述します。

bootstrap.tsはアプリケーション全体を実行します。

webpackフォルダにはwebpack設定ファイルが含まれています。

package.jsonファイルはすべての依存関係の一覧です。

カルマにはユニットテストのカルマ構成が含まれています。

node_modulesには、パッケージバンドルのリストが含まれます。

ログインコンポーネントから始めることができます。 login.component.html

<form>Dreamfactory - Addressbook 2.0 
 <label>Email</label> <input id="email" form="" name="email" type="email" /> 
 <label>Password</label> <input id="password" form="" name="password" 
 type="password" /> 
 <button form="">Login</button>
</form>

login.component.tsで

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Form, FormGroup } from '@angular/forms';
import { LoginForm } from '../../models';
import { LoginService } from '../../services/login.service';

@Component({
    selector: 'login',
    template: require('./login.component.html'),
    styles: [require('./login.component.css')]
})
export class LoginComponent {

    constructor(private loginService: LoginService, private router: Router, form: LoginForm) { }

    getLogin(form: LoginForm): void {
      let username = form.email;
      let password = form.password;
      this.loginService.getAuthenticate(form).subscribe(() => {
          this.router.navigate(['/calender']);
      });
    }
}

このコンポーネントをindex.tsにエクスポートする必要があります。

export * from './login/login.component';

app.routes.tsにログイン用の経路を設定する必要があります

const appRoutes: Routes = [
   {
       path: 'login',
       component: LoginComponent
   },
   ........
   {
       path: '',
       pathMatch: 'full',
       redirectTo: '/login'
   }
];

ルートコンポーネントのapp.module.tsファイルでは、そのコンポーネントをインポートするだけです。

.....
import { LoginComponent } from './modules';
......
@NgModule({
    bootstrap: [AppComponent],
    declarations: [
       LoginComponent
       .....
       .....
       ]
      ..... 
  })
  export class AppModule { }

その後、npmのインストールとnpmの開始が行われます。どうぞ！ローカルホストのログイン画面を確認することができます。問題が発生した場合は、angular4の定型文を参照することができます。

基本的に、コーディングでAngular 2と正確に似ていることがわかりましたが、Angular 4アプリケーションではパッケージのパッケージ化とより高速な応答を感じることができます。