AngularとTypeScriptでSPAを作成する

求人
AngularとTypeScriptでSPAを作成する

VS Codeが「VS Live Share」なんて便利なものを出してきたのでペアプログラミングができるし、エディタはVS Codeを使いましょう。

nodeはnodistでとりえずインストールします。node8.9以上を使用しましょう。

Angular CLIをインストールする

AngularはTypeScriptを採用しています。静的型付けのJSなので素敵です。

では、Angular CLIをグローバルインストールします。

次にAngularプロジェクトを作成します。

今回はプロジェクト名はappsとしました。

なんかエラーでました。調べときます。

サーバを起動してみます。

これでhttp://localhsot:4200/でウェルカムページがオープンします。(–openをつけると強制的にブラウザ起動します)

AngularとTypeScriptでSPAを作成する

ルート – src – app配下に以下ファイルが作成されます。ルートコンポーネントになります。

ファイル
app.components.ts
app.components.css
app.components.html
app.components.ts
app.module.ts

src – app – app.module.ts

ルートコンポーネントにだけこのファイルがあります。使用するモジュールを宣言するファイルで、中身の内容は以下のとおりです。

キー 内容
declarations コンポーネント名
imports  Angularのモジュール
providers サービスなどのモジュール
bootstrap 一番最初に起動されるコンポーネント

src – index.html

index.htmlがメインのhtmlファイルとなります。ほとんど修正することはないと思いますが、タイトルぐらいは修正したりするかもしれません。

src – style.css

この位置にあるstyle.cssは、全てのアプリに影響を与えたい場合に記述します。

試しにルートコンポーネントをいじる

app.components.ts

msgという変数を追加しました。この変数はhtmlファイル内で、{{msg}}として使うことができます。

app.components.html(一部)

ファイルを変更して保存したらホットデプロイされるので再起動は不要です。

AngularとTypeScriptでSPAを作成する

Angular CLIのバージョン確認

Angular CLIのバージョンを確認したい場合、以下コマンドで確認できます。

こんな感じです。

コンポーネントを作成する

コンポーネントを作成すると、ルートコンポーネント配下にコンポーネントが作成されます。

コンポーネントを作成するには

と実行します。コンポーネント名を「abc」とすると、src – app – abcというディレクトリが作成されます。

abcディレクトリ内には以下ファイルが作成されます。

ファイル
 abc.component.css
 abc.component.html
 abc.component.spec.ts
 abc.component.ts

コンポーネントは早い話がHTMLのカスタムタグだと思います。abcなら<app-abc></app-abc>って感じでしょうか。

これも試しにルートコンポーネントのapp.components.htmlを修正してみます。

描画します。

AngularとTypeScriptでSPAを作成する

コンポーネント名.component.tsファイル

コンポーネント名を「abc」とするとこのファイルの中身は以下のようになります。

OnInitとは

OnInitとは、ngOnInitメソッドを持つインタフェースのようです。ngOnInitメソッドは、コンポーネントが作られた後に呼び出されます。

OnInit

app.module.tsに自動的にコンポーネントが追加される

ng generateコマンドでコンポーネントを追加すると、app.module.tsファイルに自動でコンポーネントが追加されるので、手動で追加が不要になります。

カスタムタグ(コンポーネント)に属性をつける@Input

コンポーネントに属性を付けることができます。

dellというコンポーネントを作成したとします。

dell.component.tsファイルを編集します。

この2行だけを追加します。これでalt属性とsrc属性を使用することができます。

次にdell.component.htmlを編集します。

わかりやすく属性を表示するだけです。

ルートコンポーネントのapp.component.htmlに以下の1行を追加しましょう。

以下のようにレンダリングされます。

AngularとTypeScriptでSPAを作成する

定数クラスを定義する

Constクラスみたいなのを定義しておくと便利だと思います。

src – app配下にconst.component.tsファイルとして保存します。

参考サイト

関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA