Angular 2Angular 2を使い始める

Download Angular 2 for free

備考

このセクションでは、さまざまな環境で使用するためにAngular2 +をインストールして設定する方法の概要と、コミュニティが開発したangle -cliのようなツールを使用するIDEについて説明します。

Angularの以前のバージョンはAngularJSであり、Angular1とも呼ばれています

バージョン

バージョン発売日
4.3.3 2017-08-02
4.3.2 2017-07-26
4.3.1 2017-07-19
4.3.0 2017-07-14
4.2.0 2017-06-08
4.1.0 2017-04-26
4.0.0 2017-03-23
2.3.0 2016-12-08
2.2.0 2016-11-14
2.1.0 2016年10月13日
2.0.2 2016-10-05
2.0.1 2016-09-23
2.0.0 2016-09-14
2.0.0-rc.7 2016-09-13
2.0.0-rc.6 2016-08-31
2.0.0-rc.5 2016-08-09
2.0.0-rc.4 2016年6月30日
2.0.0-rc.3 2016年6月21日
2.0.0-rc.2 2016-06-15
2.0.0-rc.1 2016-05-03
2.0.0-rc.0 2016-05-02

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

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

前提条件

その後、 npm install -g typescript 実行npm install -g typescript か、またはyarn global add typescriptyarn global add typescriptyarn 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.jsonsystemjs.config.jstsconfig.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.tsapp.module.tsapp.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 をチェックしてあなたのアプリを見てください。

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

角2.0.0-rc.4

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

前提条件:

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

ステップ1

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

mkdir angular2-example
cd angular2-example
 

ステップ2

アプリケーションコードの作成を始める前に、 package.jsontsconfig.jsontypings.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 を編集して、外部テンプレート、スタイルを使用したり、コンポーネント変数を追加/編集したりすることもできます。ファイルを保存した直後に変更が表示されるはずです。

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

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

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

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

前提条件:

ターミナルを開き、コマンドを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 g module my-new-module
成分 ng g component my-new-component
指令 ng g directive my-new-directive
パイプ ng g pipe my-new-pipe
サービス ng g service my-new-service
クラス ng g class my-new-class
インタフェース ng g interface my-new-interface
列挙型 ng g enum my-new-enum

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

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をご覧ください。

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インストールを実行します。

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をクローンしてください:

git@github.com: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アプリケーションではパッケージのパッケージ化とより高速な応答を感じることができます。

@HostBindingデコレータを使用して、ホストノードのプロパティの値に影響を与える属性ディレクティブ。