Angular 2
角膜炎

前書き

angle-cliで空のAngular2アプリケーションを作成する

要件：

• NodeJS： ダウンロードページ
• npmまたは糸

新しいディレクトリフォルダからcmdを使用して次のコマンドを実行します。

1. npm install -g @angular/cliまたはyarn global add @angular/cli
2. ng new PROJECT_NAME
3. cd PROJECT_NAME
4. ng serve

localhost：4200でブラウザを開きます

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

あなたのcmdを使ってください：ng generate（または単にng g）コマンドを使ってAngularコンポーネントを生成することができます：

• コンポーネント： 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-classt
• インタフェース： ng g interface my-new-interface
• Enum： ng g enum my-new-enum
• モジュール： ng g module my-module

第三者のライブラリを追加する

angular-cli.jsonでは、アプリの設定を変更できます。

ng2-bootstrapを追加する場合は、次のようにします。

1. npm install ng2-bootstrap --saveまたはyarn add ng2-bootstrap

2. angular-cli.jsonでは、node-modulesにブートストラップのパスを追加するだけです。

   "scripts": [
       "../node_modules/jquery/dist/jquery.js",
       "../node_modules/bootstrap/dist/js/bootstrap.js"
    ]
   

角張った状態で構築する

outDirキーのangle-cli.jsonでは、ビルドディレクトリを定義できます。

これらは同等です

ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

これらもそうです

ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build

ビルド時に、index.htmlのベースタグ（）を--base-href your-urlオプションで変更できます。

index.htmlのベースタグhrefを/ myUrl /に設定します

ng build --base-href /myUrl/
ng build --bh /myUrl/

スタイルシートとしてのscss / sassを持つ新しいプロジェクト

@angular/cliによって生成されコンパイルされるデフォルトのスタイルファイルはcssです。

代わりにscssを使用する場合は、次のようにプロジェクトを生成します。

ng new project_name --style=scss

sassを使用する場合は、次のようにプロジェクトを生成します。

ng new project_name --style=sass

@ angular / cliのデフォルトのパッケージマネージャとして糸を設定する

yarnは、@ angular / cliのデフォルトのパッケージマネージャであるnpmの代替手段です。 @ angular / cliのパッケージマネージャとして糸を使用したい場合は、以下の手順に従ってください：

要件

• 糸 （ npm install --global yarnまたはインストールページを参照 ）
• @ angular / cli （ npm install -g @angular/cliまたはyarn global add @angular/cli ）

糸を@ angular / cliパッケージマネージャとして設定するには：

ng set --global packageManager=yarn

npmを@ angular / cliパッケージマネージャとして設定するには：

ng set --global packageManager=npm