Angular CLI を使用してブループリントからコードを生成する方法の詳細な説明

この記事では主に、Angular CLI を使用してブループリントからコードを生成する詳細な説明を紹介し、参考として提供します。

最初の記事は「angular cli を使用して angular5 プロジェクトを生成する」: http://www.jb51.net/article/136621.htm

この記事では主にコンポーネント、ディレクティブ、サービス、クラス、インターフェイスの生成について説明します。 enum など

ng generated コマンド。

このコマンドの形式は、ng generated です。

--dry-run パラメータを使用して例:

ng コンポーネント person を生成すると、person.component.ts が生成されます。

ng サービス sales-data を生成すると、sales-data.service.ts が生成されます。 .

ng クラス user-model の生成は、UserModel クラスを含む user-model.ts を生成します。

Components.

ng xxx xxx を生成するコマンドはまだ少し長いですが、ここでは angular cli がビルドしています。 in コマンドのエイリアス。例:

ng コンポーネント person このコマンドでは、

の Generate は文字 g に置き換えることができ、

のコンポーネントは文字

に置き換えることができます。これら 2 つのコマンドは同じです:

ng generate component person
ng g c person

コンポーネント関連のコマンドとエイリアスを表示するには、ここにアクセスできます:

https://github.com/angular/angular-cli/wiki/generate-component

おそらく一般的に使用されるコマンドパラメータは次のとおりです:

-- flat はフォルダーを作成する必要があるかどうかを示します
--inline-template (-it) テンプレートを ts ファイルに配置する必要があるかどうかを示します
--inline-style (-is) スタイルを ts ファイルに配置するかどうか
--spec スペックファイル (テストファイル) を作成する必要がありますか
--view-encapsulation (-ve)ビューのカプセル化戦略 (単にスタイル ファイルのスコープ戦略として理解されます)。
--change-detection (-cd) 変更検出戦略。
--prefix はこのコンポーネントのプレフィックスを設定します
- -dry-run (-d) は、生成されたファイルのリストを出力します。
同じ効果を持つ次の 2 つのコマンドのペアを見てください。 エイリアスを使用する方が便利です。

ng generate component person
ng generate component person --inline-template --inline-style

ng g c person
ng g c person -it -is

次のコマンドを試してみましょう:

プロジェクトを作成します: ng new my-app npm install が完了するまで待ってから続行します

プロジェクトを確立した後、ディレクトリに入り、コマンドを実行します:

ng g c person -d

このコマンドは、上記の 4 つのファイルを生成し、app.module.ts を更新します。

次の -d パラメーターを削除してファイルを生成します:

ファイルが生成されたことが確認できます。そして、app.module.ts を更新し、その中でコンポーネント宣言を作成します。

いくつかのパラメーターを使用して、別のコンポーネントを再度生成してみてください。カプセル化と変更検出戦略を表示します:

ng g c student -ve Emulated -cd OnPush

パラメーターが機能することを確認します。

ソース コード管理ページを通じて、これら 2 つのコマンドが app.module に影響を与えることがわかります。 行われた更新内容:

生成された 2 つのコンポーネントをそれぞれ宣言します。

それからコミットします。 .

Directive.

ng g d filter-box -d

これはファイルレポートです。以下は実際の生成です:

ng g d filter-box

vscode のソースコード管理を通じて、変更を確認できます:

ディレクティブは、コンポーネントと同じで、app.moduleでも宣言されている2つのファイルを生成しました。

ディレクトリ構造を見てください:

生成されたディレクティブの構造にはディレクトリがありません。 flat

フラット スタイルを生成せず、独自のフォルダーを持たせたい場合は、-- flat パラメーターを使用します。自分のフォルダーです。

コミットします。

サービス。

ng g d filter-box2 --flat false

可以看到 这个命令会生成flat结构的service.

然后把-d去掉, 真实生成文件:

ng g s order-data

可以从源码管理看到, 只生成了两个文件, 并没有在app.module里面注册:

当然可以在这里写代码把刚才生成的service注册进去.

但是正确的做法是使用 -m 参数来指定需要注册的module:

ng g s order-data2 -m app

这次生成的order-data2 service就会在app.module.ts里面进行注册了.

然后再commit一下.

Model/Interface/Enum/Pipe.

model:

ng g cl models/user

这个命令会创建models文件夹, 然后在里面创建user这个model:

interface:

ng g i models/animal

enum:

ng g e models/gender

commit一下.

Pipe.

ng g p camel-case

除了生成两个文件之外, 这个命令默认也会更新app.module.

Module.

ng g m login

可以看到module默认是自带文件夹的.

然后我试试添加一个component, 目的是要在login module进行声明:

可以看到我要创建的welcome component默认是在app.module里面进行声明的, 这时候如果想要在login module进行声明, 就要使用 -m 参数:

去掉-d执行生成命令后:

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用Angular CLI生成路由的方法

使用Angular CLI进行Build(构建)和Serve详解

使用Angular CLI进行单元测试和E2E测试的方法

以上がAngular CLI を使用してブループリントからコードを生成する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。