この記事では主に、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
おそらく一般的に使用されるコマンドパラメータは次のとおりです:
ng generate component person ng generate component person --inline-template --inline-style ng g c person ng g c person -it -is
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 つのコンポーネントをそれぞれ宣言します。
それからコミットします。 .
ng g d filter-box -d
これはファイルレポートです。以下は実際の生成です:
ng g d filter-box
ディレクティブは、コンポーネントと同じで、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进行Build(构建)和Serve详解
以上がAngular CLI を使用してブループリントからコードを生成する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
