QOXに入社してすぐにAngularの勉強をはじめました。
そろそろ3ヶ月ほど経つので備忘録としてまとめたいと思います
●Angular CLI
AngularCLIとは
雛形の自動生成や更新ファイルを自動更新してくれるなどすんごい便利なやつ
インストール
|
1 |
$ npm install -g angular-cli |
-gでグローバル空間にインストールすることを指定します。
installは短縮した記述ができます。
|
1 |
$ npm i -g angular-cli |
アプリを新規作成
|
1 |
$ ng new app-name |
“app-name”には任意の名前
新規作成するとapp.componentとapp.module.tsとその他諸々が生成されます。
app.module.tsはアプリケーション全体のモジュール。
機能ごとに機能モジュールを作りapp.module.tsにインポートします。
component作成
|
1 |
$ ng generate component component-name |
“component-name”には任意
generateは短縮した記述ができます。
|
1 |
$ ng g component component-name |
module作成
|
1 |
$ ng g module module-name |
“module-name”は任意の名前
moduleを指定してcomponentを作成
|
1 |
$ ng g component component-name —module-name |
“component-name “は任意の名前
“module-name”は任意の名前
●クラスバインディング
要素のclass属性からcssクラスを追加したり削除したりできます。
|
1 |
[class]=“cssName” |
コンポーネントで定義したcssクラス名をバインドすることができます。
|
1 |
[class.class-name]=“isExample” |
“class-name”で指定したcssクラスを”isExample”の真偽の結果に応じて追加したり削除したりします。
|
1 |
[ngClass]=“isExample? 'class-name1 class-name2’ : 'class-name3 class-name4’” |
スペース区切りで指定されたcssクラスが追加されます。
|
1 |
[ngClass]=“isExample? [ ‘class-name1 class-name2’ ]: [ ‘class-name3 classname4’ ]” |
配列要素で指定されたcssクラスが追加されます。
|
1 |
[ngClass]=“{ 'class-name1': isExample, ‘class-name2’: !isExample }" |
キーがcssクラスを指し、値の真偽値に応じて追加、削除を行います。