Angular15: 画面1を表示する

2023年4月2日(日)

環境

1. 環境設定

1-1. nvm(Node Version Manager)をインストールする

ホームディレクトリに移動する。

$ cd /home/mizuki

インストールスクリプトを実行する。

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

新しい端末を起動してnvmのバージョンを確認する。

$ command -v nvm
nvm
        
$ nvm --version
0.39.3

1-2. Node.jsをインストールする

ホームディレクトリに移動する。

$ cd /home/mizuki

nvmを使ってインストール可能なNode.jsのバージョンを確認する。

$ nvm ls-remote
v18.15.0 (Latest LTS: Hydrogen)

nvmを使って最新のLTSのNode.jsをインストールする。

$ nvm install --lts
Now using node v18.15.0 (npm v9.5.0)
        
$ node -v
v18.15.0

参考情報

1-3. Angularをインストールする

インストールするディレクトリに移動する。

$ cd /home/mizuki/workspace/angular15

インストール可能なAngularのバージョンを確認する。

$ npm view @angular/cli versions
[
    '15.2.4'
]

ローカルにAngularをインストールする。

$ npm install @angular/cli@15.2.4
        
$ npx ng version
Angular CLI: 15.2.4
Node: 18.15.0
Package Manager: npm 9.5.0

2. 画面1を表示する

2-1. ワークスペースを作成する

ワークスペースを作成するディレクトリに移動する。

$ cd /home/mizuki/workspace/angular15

ワークスペースを作成する。

$ npx ng new show-gamen1
? Would you like to add Angular routing? (y/N)   -> [Yes]
? Which stylesheet format would you like to use? -> [SCSS]

ワークスペースに移動する。

$ cd show-gamen1

ローカルで実行する。

$ npx ng serve

ブラウザで表示する。

http://localhost:4200/

参考情報

2-2. 画面1のコンポーネントを追加する

ワークスペースに移動する。

$ cd /home/mizuki/workspace/angular15/show-gamen1

画面1のコンポーネントを追加する。

$ npx ng generate component gamen1

画面が見つからない場合のコンポーネントを追加する。

$ npx ng generate component page-not-found

参考情報

2-3. 画面1のコンポーネントを表示する

<router-outlet/>でコンポーネントを描画する。

src/app/app.component.html

既存のコードを削除して以下の行だけにする。

<router-outlet></router-outlet>

ルーティング情報を記述する。

src/app/app-routing.module.ts

routes変数の中身を書き換える。Gamen1ComponentとPageNotFoundComponentのimport文を追加する。

import { Gamen1Component } from './gamen1/gamen1.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
    { path: 'gamen1', component: Gamen1Component },
    { path: '', redirectTo: '/gamen1', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
];

enableTracingでブラウザのコンソールにデバッグ出力を行う。

src/app/app-routing.module.ts

@NgModuleのimportsの中身を書き換える。

@NgModule({
    imports: [RouterModule.forRoot(routes, { enableTracing: true })],
    exports: [RouterModule]
})

ローカルで実行する。

$ npx ng serve

ブラウザで表示する。

http://localhost:4200/

参考情報

3. GitHubにワークスペースをアップロードする

3-1. Eclipseを起動する

端末からコマンドでEclipseを起動する。

$ /home/mizuki/opt/eclipse

ワークスペースを指定する。

/home/mizuki/workspace/eclipse

3-2. GitHubのリモートリポジトリをクローンする

GitHubでパスワードの代わりに使うトークンを生成する。

Settings
    Developer settings
        Personal access tokens
            Fine-grained tokens
                Generate new token
                    Repository access
                        Only select repositories
                            /yvafdevnsk/angular15
                    Permissions
                        Contents
                            Access: Read and write

Eclipseでリモートリポジトリを指定する。

Location
    URI: (自動生成)
    Host: github.com
    Repository path: /yvafdevnsk/angular15

Connection
    Protocol: https
    Port: (空欄)

Authentication
    User: yvafdevnsk
    Password: (GitHubで生成したトークン)
    [x]Store in Secure Store

Eclipseでローカルのクローン先を指定する。

Destination
    Directory: /home/mizuki/workspace/github/angular15

参考情報

3-3. ワークスペースをローカルリポジトリにコピーする

ワークスペースをローカルリポジトリにコピーする。

$ cd /home/mizuki/workspace/angular15
$ cp -a show-gamen1 /home/mizuki/workspace/github/angular15

コピーしたワークスペースの.gitディレクトリを削除する。こうしないとローカルリポジトリの中に別のリポジトリがあることになってコミットできない。

$ cd /home/mizuki/workspace/github/angular15/show-gamen1
$ rm -rf .git

コピーしたワークスペースをローカルリポジトリにコミットする。

参考情報

3-4. ローカルリポジトリのコミットをリモートリポジトリにプッシュする

コミットログを記述する。

[画面1を表示する]新規追加