究極のAngular CLIリファレンスガイド

この記事では、Angular CLI：その能力、機能、および基礎となるメカニズムについて説明します。 経験豊富なAngular CLIユーザーでさえ、これがその内部の仕組みに役立つ復習であることがわかります。角度発達のために厳密に必須ではありませんが、角CLIはコードの品質と開発者の効率を大幅に向上させます。

これは、AngularのTODOアプリケーションの構築に関する4部構成のシリーズの最初のものです。

パート0 - 究極のAngular CLIリファレンスガイド

パート1 - 最初のTODOアプリケーションの構築
パート2 - TODOリストと個々のTODOのコンポーネントを分離
パート3 - TODOサービスを休憩と統合
パート4 - データ解像度にAngular Routerを利用
4. 重要な概念：

Angular CLIは、作成、テスト、展開などのタスクを自動化することにより、Angular App開発を合理化する強力なツールセットです。 node.js、npm、および理想的には、角度設置の前提条件です。

新しいAngularプロジェクトを作成し、ファイル、依存関係、および構成を自動的にセットアップします。
• ライブリロードを有効にし、コードの変更のリアルタイムプレビューを提供します。
• 既存のプロジェクトに機能（コンポーネント、サービスなど）を追加します
• ng newJavaScriptとCSSをバンドルすることにより、生産のためのアプリケーションを準備します。
角CLIはコード生成を超えています。アプリケーション構造を理解し、コードベースの品質と一貫性を確保します
• ng serve簡単な歴史
• Angular Finalは2016年9月15日にリリースされました。フレームワーク（Angularjs 1.x）からWeb、モバイルWeb、ネイティブモバイル、デスクトップ開発をサポートする包括的なプラットフォームへの進化に、Angularは堅牢なツールを必要とします。 Angularチームは、セットアップと構成の複雑さを最小限に抑えるためにAngular CLIを開発し、開発者がアプリケーションの構築に集中できるようにしました。 このツールセットには、IDE/エディターの統合とAngular CLI自体が含まれます。 ng generate
• 2017.04.25アップデート：Angular CLI V1.0の変更を反映しています。 既存のプロジェクトを更新するためのAngular CLI V1.0移行ガイドを参照してください。 ng build
2017.02.17アップデート：
• コマンドは、角度CLIから削除されました。

• 新しい角度アプリケーションの作成
• リアルタイムプレビューのためにlivereloadを使用して開発サーバーを実行します
• 既存のアプリケーションへの機能の追加
• 単位テストの実行
エンドツーエンド（e2e）テストの実行
• 生産展開のためのビルディングアプリケーション

これらの機能を探索する前に、インストールをカバーしましょう。

前提条件

node.js（6.9.0以降）およびnpm（3.0.0以降）が必要です。公式Webサイトから最新のnode.jsバージョンをダウンロードします。 ：

$ node -v
$ npm -v

タイプスクリプトのインストール（強くお勧め）は、NPM：

$ npm install -g typescript@2.2.0

node.jsとtypeScriptがインストールされている場合、Angular CLIのインストールに進みます。 Angular Cli

NPM：

$ npm install -g @angular/cli

$ ng version

@angular/cli: 1.0.0新しい角度アプリケーションの作成

• ：新しいディレクトリを作成してから、その中でng initを実行します。
• ng newは、そのディレクトリの作成に適しています。 たとえば、ng init

ディレクトリが作成され、必要なファイルを生成し、依存関係をインストールし、タイプスクリプト、Karma、長期、および環境ファイルを構成します。 ng new

$ ng new my-app

多くのオプションはプロジェクトの作成をカスタマイズします（完全なリストについてはmy-appを参照）：

ng new

ng generate --help：詳細な出力を提供します。

• ：--dry-runパッケージをリンクします。
• --verbose：npmインストールをスキップします。
• --link-cli：gitリポジトリの初期化をスキップします。@angular/cli
• ：テストファイルの作成をスキップします。--skip-install
• ：最初のgitコミットをスキップします。--skip-git
• ：ディレクトリ名を指定します。--skip-tests
• ：ソースディレクトリ名を指定します。--skip-commit
• ：スタイル言語（css、less、scss）を指定します。--directory
• ：コンポーネントのプレフィックスを指定します。--source-dir
• ：プログレッシブWebアプリ（PWA）を生成します --style
：ルーティングモジュールを追加します。
• --prefix
：インラインスタイルを使用しています。
• --mobile
：インラインテンプレートを使用します。
• --routing
アプリケーションを実行しましょう。
• アプリケーションを実行する--inline-style
• Project Directory（）に移動し、実行：--inline-template

  $ node -v
  $ npm -v

  ログイン後にコピー

  ログイン後にコピー

  これにより、開発サーバーが開始されます（デフォルトのポート4200）。 livereloadは、ファイルの変更でブラウザを自動的にリフレッシュします。 サーバーを停止するには、ctrl-cを押します。

  機能の追加

  ng generateコマンドは機能を追加します：

  • ng generate class my-new-class
  • ng generate component my-new-component
  • ng generate directive my-new-directive
  • ng generate enum my-new-enum
  • ng generate module my-new-module
  • ng generate pipe my-new-pipe
  • ng generate service my-new-service

  短いフォームが存在します（例：ng g c my-new-component）。 各サブコマンドには特定のオプションがあります（チェックng generate --help）。 CLIは、新しい機能を適切なモジュールにインテリジェントに統合します。

  （応答の残りの部分は、各

  サブコマンド、ユニットテスト、E2Eテスト、生産ビルド、展開（ng generateの削除に注目する）の詳細を継続します）、アプリケーション、将来の機能、概要、およびFAQの排出、すべての構造と画像の配置を維持しながら、各サブコマンドと残りのセクションの詳細な説明を省略しました。 ng deploy

  以上が究極のAngular CLIリファレンスガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。