■angularインストール
https://angular.jp/installation

$ npm install -g @angular/cli

https://angular.jp/reference/versions

(centosが古いと)
Angular/cli が新しすぎると、node v20 を要求されるので、だめ。
バージョンを指定して、インストールしてみる。

$ npm remove -g @angular/cli
$ npm install -g @angular/cli@16.0

■typescript (tscコマンド) インストール
$ npm install -g typescript

■githubから Angular の gunclock を取りだす
$ git clone https://github.com/gunman-vagabond/Gunclock-Angular.git
$ cd Gunclock-Angular
$ npm install

■起動
$ ng serve --host 0.0.0.0
  (デフォルトで port=4200 で起動される)

$ sudo firewall-cmd --add-port=4200/tcp
$ sudo firewall-cmd --add-port=4200/tcp --permanent


■express
$ sudo npm install -g express
$ sudo npm install -g express-generator
$ express gunclock-api
$ cd gunclock-api
$ npm install

$ DEBUG=gunclock-api:* PORT=3000 npm start
  gunclock-api:server Listening on port 3000 +0ms

$ sudo firewall-cmd --add-port 3000/tcp
$ sudo firewall-cmd --add-port=3000/tcp --zone=public --permanent


■cors
$ npm install cors

vi app.js
-----------
const cors = require('cors')
app.use(cors())
-----------

■Angular
$ ng new Gunclock-Angular
$ cd Gunclock-Angular
$ ng g component gunclock       ★read/create/update/delete をid意識してやる
                                ★expressのバックエンドサーバ(REST)とのインタフェスを取る
$ ng g component gunclocks      ★全体を見る
$ ng g component gunclockNew    ★新clockの入力画面が必要
$ ng g component gunclockEdit   ★clockの更新内容を入力する画面が必要
$ ng g component gunclockDelete ★clockの内容を入力する画面はなくても、処理が独立したくなったので作る


[ /gunclock/ ] 
/gunclocks/          ★一覧画面
[ /gunclock/ceate/ ]
/gunclock/read/:id
[ /gunclock/update/:id ] 
/gunclock/delete/:id

/gunclock/new       ★新規画面
/gunclock/edit/:id  ★編集画面

■ap の src
ポイントは、下記。ガワはだいたいできてる。

- src/app/app-routing.module.ts (https://github.com/gunman-vagabond/Gunclock-Angular/blob/master/src/app/app-routing.module.ts)
・URLと対応するコンポーネント
-----
import { GunclockComponent } from './gunclock/gunclock.component';
import { GunclocksComponent } from './gunclocks/gunclocks.component';
import { GunclockNewComponent } from './gunclock-new/gunclock-new.component';
import { GunclockEditComponent } from './gunclock-edit/gunclock-edit.component';
import { GunclockDeleteComponent } from './gunclock-delete/gunclock-delete.component';

const routes: Routes = [
  { path: 'gunclocks', component: GunclocksComponent },
  { path: 'gunclock/new', component: GunclockNewComponent },
  { path: 'gunclock/read/:id', component: GunclockComponent },
  { path: 'gunclock/edit/:id', component: GunclockEditComponent },
  { path: 'gunclock/delete/:id', component: GunclockDeleteComponent }
];
-----

- src/app/gunclocks/gunclocks.component.html (https://github.com/gunman-vagabond/Gunclock-Angular/blob/master/src/app/gunclocks/gunclocks.component.html)
- src/app/gunclocks/gunclocks.component.html (https://github.com/gunman-vagabond/Gunclock-Angular/blob/master/src/app/gunclocks/gunclocks.component.htm)
- src/app/gunclocks/gunclocks.component.html (http://github.com/gunman-vagabond/Gunclock-Angular/blob/master/src/app/gunclocks/gunclocks.component.html)
- src/app/gunclocks/gunclocks.component.html (http://github.com/gunman-vagabond/Gunclock-Angular/blob/master/src/app/gunclocks/gunclocks.component.htm)
・html (テンプレート)
・オブジェクト(gunclocks)を渡されるので、for文(*ngFor)で回す
-----
Listing Gunclocks

  

    

      
ID
      
color
      
size
      
date
      

      

      

    
  

  

    

      
{{ gunclock._id }}
      
{{ gunclock.color }}
      
{{ gunclock.size }}
      
{{ gunclock.updated }}
      
show
      
edit
      
delete
    
  


new gunclock
-----

- src/app/gunclocks/gunclocks.component.ts (https://github.com/gunman-vagabond/Gunclock-Angular/blob/master/src/app/gunclocks/gunclocks.component.ts)
・オブジェクト(gunclocks)に値を覚えて、html にレンダリング(templateUrl)
・ここで、APIからRESTでとりだしている(this.http.get())
-----
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Gunclock } from '../share/models/gunclock';
import { environment } from '../../environments/environment';

@Component({
  selector: 'app-gunclocks',
  templateUrl: './gunclocks.component.html',
  styleUrls: ['./gunclocks.component.css']
})
export class GunclocksComponent implements OnInit {

  gunclocks: Gunclock[]

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get(environment.GUNCLOCK_API)
    .subscribe(o => {
      this.gunclocks = o['gunclocks'];
//      this.gunclocks = [new Gunclock(1, '#ffcccc', 15, '2020/01/01')];
    });

//    this.gunclocks = [
//      new Gunclock(1, '#ffcccc', 15, '2020/01/01'),
//      new Gunclock(2, '#ccffcc', 30, '2020/02/22'),
//      new Gunclock(3, '#ccccff', 25, '2020/03/21')
//    ]

  }

}
-----

■env
https://qiita.com/TsuyoshiUshio@github/items/4243ee860b217534c0d2

$ sudo npm install -g npm
$ ng install ejs
$ ng install

package.json に prebuildを入れる。
-----
    "prebuild": "tsc scripts/prebuild.ts && node scripts/prebuild.js"
-----

$ npm run prebuild