Angular CLI は、Angular フレームワークの公式ビルド ツールです。この記事では、開発環境、Angular CLI のインストール方法、および Angular CLI を使用して単純な Angular を構築して実行する方法について説明します。応用。
Angular 中国語公式 Web サイト: https://angular.cn/guide/quickstart
始める前に、開発環境に Node.js® と npm パッケージ マネージャーが含まれていることを確認してください。
Angular には、Node.js の 8.x または 10.x バージョンが必要です。
node -v コマンドを実行します。 Node.js をインストールするには、nodejs.org にアクセスしてください。 [関連チュートリアルの推奨事項: 「angular チュートリアル 」]
Angular、Angular 両方CLI および Angular アプリケーションは、npm パッケージである特定のライブラリによって提供される機能に依存します。 npm パッケージをダウンロードしてインストールするには、npm パッケージ マネージャーが必要です。
この記事では、yarn クライアントを使用しますコマンド ライン インターフェイス、管理依存関係パッケージ
yarn クライアントがインストールされているかどうかを確認するには、ターミナル/コントロールに移動して # を実行します。コンソール ウィンドウで ##yarn -v コマンドを実行します。
npm を使用して CLI をインストールするには、ターミナル/コンソール ウィンドウを開いて次のコマンドを入力します:
yarn global add @angular/cli
ng --version コマンド。次の図は、インストールが成功したことを示しています。
ワークスペースは、アプリケーションを開発する場所です。コンテクスト。各ワークスペースには、1 つ以上の プロジェクト で使用される多数のファイルが含まれています。各プロジェクトは、アプリケーション、ライブラリ、またはエンドツーエンド (e2e) テストで構成されるファイルのセットです。
ワークスペースと初期アプリケーション プロジェクトを作成するには:ng new を実行し、名前 my-app # を指定します。 ##、以下に示すように:
ルート ディレクトリが
my-appmy-app とも呼ばれます) (ただし、 サブディレクトリ)完全なコマンド:
ng new my-app --styleless##ステップ 3: 開発サーバーの起動
Angular には開発サーバーが含まれているため、アプリケーションをローカルで簡単に構築し、開発サーバーを起動できます。 
CLI コマンド
ngserve オプションを指定して開発サーバーを起動します。 ng serve --open
ngserve このコマンドは自動的にサーバーを起動し、ファイルの変更を監視します。これらのファイルを変更すると、アプリケーションが再構築されます。 -o) オプションを使用すると、ブラウザが自動的に開き、http://localhost:4200/## にアクセスします。 。
ステップ 4: 最初の Angular コンポーネントを編集するコンポーネントは、Angular アプリケーションの基本的な構成要素です。データを画面に表示し、ユーザー入力をリッスンし、その入力に基づいてアクションを実行します。
です。 1、打开 2、把 src/app/app.component.ts 浏览器将会用修改过的标题自动刷新。 3、打开 src/app/app.component.less 漂亮多了！ 每个工作空间中的所有项目共享同一个 CLI 配置环境。该工作空间的顶层包含着全工作空间级的配置文件、根应用的配置文件以及一些包含根应用的源文件和测试文件的子文件夹。 CLI コマンド ng generated src/ src/./src/app/app.component.ts。title 属性从 'my-app' 修改成 'My First Angular App'。@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'My First Angular App!';
}./src/app/app.component.less 并给这个组件提供一些样式。h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}工作区配置文件
工作空间配置文件 用途 .editorconfig代码编辑器的配置。参见 EditorConfig。 .gitignore指定 Git 应忽略的不必追踪的文件。 README.md根应用的简介文档. angular.json为工作区中的所有项目指定 CLI 的默认配置，包括 CLI 要用到的构建、启动开发服务器和测试工具的配置项，比如 TSLint，Karma 和 Protractor。欲知详情，请参阅 Angular 工作空间配置 部分。 package.json配置工作空间中所有项目可用的 npm 包依赖。有关此文件的具体格式和内容，请参阅 npm 的文档。 package-lock.json提供 npm 客户端安装到 node_modules 的所有软件包的版本信息。欲知详情，请参阅 npm 的文档。如果你使用的是 yarn 客户端，那么该文件就是 yarn.lock。src/根项目的源文件。 node_modules/向整个工作空间提供npm包。工作区范围的 node_modules依赖关系对所有项目都可见。tsconfig.json工作空间中各个项目的默认 TypeScript 配置。比如运行项目时遇到一个问题https://blog.csdn.net/a1056244734/article/details/108326580，就需要更改 tsconfig.json中配置tsconfig.base.json供工作空间中所有项目使用的基础 TypeScript 配置。所有其它配置文件都继承自这个基础文件。欲知详情，参见 TypeScript 文档中的使用 extends 进行配置继承部分 tslint.json工作空间中各个项目的默认 TSLint 配置。比如全局是否使用单引号，变量命名语法，每行最大字段数等等 アプリケーション プロジェクト ファイル
ng new my-app はデフォルトで「my-app」という名前のワークスペース フォルダーを作成し、 # 新しいアプリケーションを生成します##src/ フォルダー内のワークスペースの最上位にあるルート アプリケーションのスケルトン。新しく生成されたアプリケーションには、ルート コンポーネントとそのテンプレートを含むルート モジュールのソース ファイルが含まれています。 コマンドを使用して、アプリケーションに機能とデータを追加できます。この初期ルート アプリケーションは、CLI コマンドの デフォルト アプリケーション です (他のアプリケーションを作成した後にデフォルトを変更しない限り)。 サブフォルダーには、ルート アプリケーションのソース ファイル (アプリケーション ロジック、データ、および静的リソース) が含まれています。マルチプロジェクト ワークスペースの場合、projects/ フォルダー内の他のプロジェクトには、それぞれ同じ構造の project-name/src/ サブディレクトリが含まれています。 アプリケーション ソース ファイル
トップレベル ファイル アプリケーションのテストと実行のサポートを提供します。そのサブフォルダーには、アプリケーションのソース コードとアプリケーション固有の構成が含まれています。 #アプリケーション サポート ファイル
目的 assets/ アプリケーションのロジックとデータを定義するコンポーネント ファイルが含まれます。詳細については、下記 画像やその他の静的リソース ファイルが含まれており、アプリのビルド時にそのままコピーする必要があります。 特定のターゲット環境のビルド構成オプションが含まれます。デフォルトでは、名前のない標準開発環境と実稼働 (「prod」) 環境があります。他のターゲット環境構成を定義することもできます。 は、タブ バーのアプリのアイコンとして使用されます。 誰かがサイトにアクセスしたときに表示されるメイン HTML ページ。 CLI はアプリの構築時にすべての JavaScript ファイルと CSS ファイルを自動的に追加するため、通常は
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
