Angular16: 画面1を表示する

2023年7月16日(日)

環境

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.16.1 (Latest LTS: Hydrogen)

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

$ nvm install --lts
Now using node v18.16.1 (npm v9.5.1)
        
$ node -v
v18.16.1

参考情報

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

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

$ cd /home/mizuki/workspace/angular16

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

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

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

$ npm install @angular/cli@16.1.4
        
$ npx ng version
Angular CLI: 16.1.4
Node: 18.16.1
Package Manager: npm 9.5.1

2. 画面1を表示する

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

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

$ cd /home/mizuki/workspace/angular16

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

$ 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/angular16/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/angular16
                    Permissions
                        Repository permissions
                            Contents
                                Access: Read and write

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

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

Connection
    Protocol: https
    Port: (空欄)

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

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

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

参考情報

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

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

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

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

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

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

Git Repositoriesビュー
    angular16
        Branches
            Local
                main (選択する)

Git Stagingビュー
    変更をすべてコミットする。
    コミットログを記述する。
        [画面1を表示する]新規追加

参考情報

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

Historyビュー
    コミットを選択する。
        [画面1を表示する]新規追加
            右クリック > Push Commit