Angularの勉強

QOXに入社してすぐにAngularの勉強をはじめました。
そろそろ3ヶ月ほど経つので備忘録としてまとめたいと思います

Angular CLI

AngularCLIとは
雛形の自動生成や更新ファイルを自動更新してくれるなどすんごい便利なやつ

インストール

$ npm install -g angular-cli

-gでグローバル空間にインストールすることを指定します。

installは短縮した記述ができます。

$ npm i -g angular-cli

アプリを新規作成

$ ng new app-name

“app-name”には任意の名前

新規作成するとapp.componentとapp.module.tsとその他諸々が生成されます。
app.module.tsはアプリケーション全体のモジュール。
機能ごとに機能モジュールを作りapp.module.tsにインポートします。

component作成

$ ng generate component component-name

“component-name”には任意
generateは短縮した記述ができます。

$ ng g component component-name

module作成

$ ng g module module-name

“module-name”は任意の名前

moduleを指定してcomponentを作成

$ ng g component component-name —module-name

“component-name “は任意の名前
“module-name”は任意の名前

クラスバインディング

要素のclass属性からcssクラスを追加したり削除したりできます。

[class]=“cssName”

コンポーネントで定義したcssクラス名をバインドすることができます。

[class.class-name]=“isExample”

“class-name”で指定したcssクラスを”isExample”の真偽の結果に応じて追加したり削除したりします。

[ngClass]=“isExample? 'class-name1 class-name2’ : 'class-name3 class-name4’”

スペース区切りで指定されたcssクラスが追加されます。

[ngClass]=“isExample? [ ‘class-name1 class-name2’ ]: [ ‘class-name3 classname4’ ]”

キーがcssクラスを指し、値の真偽値に応じて追加、削除を行います。