Visual Studio CodeでのAngular開発
前回ローカルにAngularのプロジェクトを作成しました。
今回はStackBlitzで作成したホームページっぽい所まで作っていきます。
Compnentの追加
Visual Studio Codeのappフォルダで右クリックし、Menuから
Componentを選択します。(StackBlitzと似てますね。)
buttonコンポーネントを追加しましょう。
追加されたコンポーネントがコチラ。
追加したコンポーネントの表示
今回作成されたプロジェクトを見ると既にRouterファイルが存在します。
ここにbuttonコンポーネントを設定します。
以下のターミナルで
ng serve --open
を実行して実行結果を表示してみましょう。
表示されたページ最下部に「button works!」と表示されました。
これでbuttonコンポーネントが表示されました。
Angular Materialの設定
では一度ng serve --openをCtrl+cで止めましょう。
Angular Materialのページにある
ng add @angular/material
をターミナルで実行しましょう。
実行したらyYで設定を終了します。
何やらテーマだのBrowserAnimationだの選択させられた結果、app.module.tsに
勝手にAngular Materialを利用するための設定がされてました！
素晴らしいですね。
Materialボタンの追加
Materialのmat-raised-buttonを設定します。
app.module.tsにMatButtonModuleを追加します。
app.component.htmlは何やら色々書いてあるのですが、
消して以下の内容だけにします。
routerLinkでボタンを設定し、リンクが押された時にボタンが表示されるようにしました。
app-routing.module.tsの設定のpathをbuttonに変更します。
buttonコンポーネントのbutton.component.htmlを以下のように変更します。
Materialボタンの表示
ng serve --openで画面を表示してみましょう。
buttonのハイパーリンクを押してみましょう。
OKボタンが表示されました。
これでホームページを作る要素はプログラムできたと思います。
これを応用しておしゃれなホームページを作りましょう。
