以下、現在（2022年）も適宜追記・加筆中。
全般
●基本構成
・「テンプレート」「コンポーネント」「サービス」 という３層構成となっている。テンプレート（.html）とコンポーネントは基本は１：１の関係であり、コンポーネントがプログラムの部分となる。注
・テンプレート中にあるタグ属性が埋め込まれており、Angularはこれをディレクティブ”と解釈し実行する。参考、参考
⇒AngularJSがすでに定義している「ng-model」「ng-view」等もdirectiveとのこと。参考
・コンポーネントというのは、アプリケーションのViewを作成するのと、それらのアプリケーションロジックをサポートする とのこと。：参考
⇒Built-in-component:*NgIf、*NgSwitch、*ngFor、*ngStyle (styleの定義が動的に変更可能となる)、*ngClass (classの定義が動的に変更可能となる） など。⇒参考
⇒デコレータ（参考）：＠で始まる表記。@Componentはコンポーネントデコレータ。デコレータとは「装飾」とのこと。
@Component({
デコレータの中身をここに記述する;
})
export class コンポーネント名{
プルグラム本体（プロバティ、メソッドを記述）が入る
}・サービス：@Injectable() export class {・・・}の・・・にてサービスを記述する。
・module
⇒angular入門。@NgModule(xxx) export class AppModule {}。xxxにてメタデータを記述する。
●フォルダ・ファイル構成
・参考。.tsファイルがあるのでこれらはどういう使われ方をしているのか？と思ったが、ng(angular)がwebpackを使って.jsまでトランスパイルしているとのこと。
・srcフォルダ配下に必要なファイルが入る。src/main.tsがメインのファイル。ここに、import ‘./polyfills.ts’; を入れると、古いブラウザでも表示されるようになる（らしい⇒参考）。
またアプリ本体は/src/app配下に作られる。app.component.ts/.html/.css がアプリのルートコンポネントになる。
/src
main.ts ←importでAppModuleを読み込む。
index.html
/app
app.module.ts
←<a href="https://ng2-info.github.io/2016/07/preparing-for-ngmodule/">@NgModule</a>が定義され、class名としてAppModuleとして命名される。また、さらに下位のコンポーネントを読込む。
app.component.ts
←selectorで'app-root'を宣言
app.component.html
←さらに下位のセレクタを記述することで、下位の.htmlを呼び出す
app.component.css
/environments ←環境変数を提示。<a href="https://nobunobu1717.site/?p=1202">この記事</a>が詳しい・Angularの各ファイルの起動の仕方・フォルダ構成を理解するには、この記事が判りやすい。基本的に、/src配下のindex.html、main.tsがキーとなる。特にmain.tsがangularアプリを動かすためのスタートアップコードであり、ここから/src/app配下のapp.module.tsがキックされ、さらにアプリで最初に起動するコンポーネントであるapp.component.tsへと繋がっていく。
実際にindex.htmlがアクセスされると、ここからタグによりapp.component.*に移行されていく。
・polyfills.ts →/src配下にあるファイルで、main.tsより読み込まれる⇒役割
・tsconfig.json: ルート配下にあり、参考
●記法
・？演算子：https://stackoverflow.com/questions/44689474/error-typeerror-cannot-read-property-length-of-undefined、https://www.atmarkit.co.jp/ait/articles/1701/16/news139.html
・テンプレート参照変数（<element #variable …/>における#variable）： 参考、Angularアプリケーションプログラミングp79
・末尾に$がついたパラメータはobservableであることを明示→参考RxJSによるリアクティブプログラミングはどう有用なのか – Qiita
https://qiita.com/pikohideaki/items/292ab134397f4959e66b
・＄｛｝：template literals（バッククオートで囲う必要あり）。参考
・バッククォート（`～`）でくくられている記法：TypeScript／ECMAScript 2015の構文で「テンプレート文字列」と呼ばれます。テンプレート文字列を利用することで、複数行にまたがる文字列を1つの文字列リテラルとして表現できるようになります。
●片方向バインディング、双方向バインディング
①-1. コンポーネント⇒テンプレート ⇒{{ }}、Property Binding、Attribute（属性） Binding、
①-2. テンプレート⇒コンポーネント ⇒Event Binding
②双方向バインディング ⇒[( )]
●入力フォーム
・テンプレート駆動型フォーム：FormsModuleを@angular/formsよりインポート
※ngModelディレクティブ（双方向バインディング）
・リアクティブフォーム：ReactiveFormsModule、FormGroup、FormControl、（FormBuilder）を@angular/formsよりインポート
●router
・https://angular.jp/guide/router,https://atmarkit.itmedia.co.jp/ait/articles/1808/30/news030.html
・構成
①Module
（app-routing.moduleにて使用）
・RouterModule.forRoot([
{path:xxx,
component:xxx
},
{}
])
・Routes
（コンポーネントにて使用）
・ActivatedRoute
・Router
⇒router.navigate([,]); ←routerLinkを使う場合は不要。
②html：
・[routerLink]=●URLパラメータ関連
・urlからid部分を取出す：
constructor(private route: ActivatedRoute){};
getContact(): void{
const ID = +this.route.snapshot.paramMap.get('id'); }上記で+を用いることで数字として扱ってくれる模様。
app-routing.module.tsにて以下を宣言することで、上記の’id’と連携される。
const routes: Routes = [
{ path: "detail/:id", component: xxComponent },
]⇒クエリパラメータ →Angular Webアプリ開発スタートブックp229、Angularアプリケーションプログラミングp326。html側は[queryParams]。queryParams属性はプロバティーバインディング[]で渡す点がポイントとなる。
・How to refresh a route’s resolved data?
pathが明らかに変わる場合（detail/ とかsearch/ とか）はroutesの指示通りにコンポーネントの再描写が為されるが、パラメータ部分だけが変更された場合は再描写されないため、何とかならないか色々と調べたところ、
app-routing.module.ts等に記載されているroutesに、runGuardsAndResolvers: ‘paramsChange’を設定することによりparamsが変更されたのを検知して再描写するようになる事が判った。※参考：https://angular.io/api/router/RunGuardsAndResolvers
const routes: Routes = [
{ path: '', component: ContactListComponent,runGuardsAndResolvers: 'paramsChange'},
{ path: "detail/:id", component: ContactDetailsComponent },
{ path: "search", component: ContactSearchComponent }
];⇒https://stackoverflow.com/questions/44232418/how-to-refresh-a-routes-resolved-data
⇒https://qiita.com/Yrock/items/6fff30f77a6b36e1bb23
・queryParamsHandling を使用したクエリパラメータの保持またはマージ
●PWA、Service Worker
・公式ページ。似たような技術にWebWorkerというものがあるが、ServiceWorker・PWAはこれの進化系と考えられる（参考、参考１、参考２、参考３）
・PWAを構成する技術、
⇒Service Worker
- このブログが詳しい。
- Service Workerがちゃんと動いているかどうかはネットワークタブを開くことでわかる。https://angular.jp/guide/service-worker-getting-started
- Service Workerはng serveだと動かないので要注意 →関連記事
従ってローカルで確認する際は、ng buildした後に
npx http-server -p 8080 -c-1 dist/アプリ名
等でwebサーバを起動した上でアプリを動かす必要がある。
- Web App Manifest
Web App Manifestは、Webアプリのタイトルやアイコンなどについてまとめたファイルです。このファイルがどこで使われるかというと、主にWebアプリのインストール時です。PWAの特徴のところで「インストールできる」と述べました。気に入ったWebアプリがPWAの場合、それをインストールすると、アプリ一覧もしくはホーム画面に追加されます。このときに、Web App Manifestに書かれているアプリの名前やアイコンのURLが使われるわけです。機能としてはHTMLのmeta要素、特にOGP（Open Graph Protocol）に書いてある情報と似ています。Web App Manifestはそれらの情報を、外部ファイルにしたようなものと考えるとわかりやすいでしょうか。https://www.codegrid.net/articles/webappmanifest-1/
・pwaのインストール
>ng add @angular/pwa --project project-name
⇒src\manifest.webmanifest、ngsw-config.jsonファイルが作成される。Tips
●ページング：sliceパイプを使うと上手くいく。参考
●コンポーネント間のデータの受け渡し
⇒https://dev.classmethod.jp/client-side/angular-input-output/
⇒http://dblog.athome.co.jp/entry/2018/09/20/120000
●配列からid要素（contactId）を引数としインデックス番号を検索する方法。
private getIndexOfContact = (contactId: String) => {
return this.contacts.findIndex((contact) => {
return contact.id === contactId;
});
}●変更した時に、何かの処理をするには？ ⇒リアクティブフォームでのvalueChangesの利用方法
●過去のバージョンについて：
Angular JSはver1、Angular2はver2、Angularはver4。
angular-cliは@angula/cliになったようなので、@angular/cliに変更する。→参考
⇒ng version 若しくはng -vにてバージョンが判る。
⇒angular cliをインストールすることで、ngコマンドが使えるようになる。 ⇒参考
●コーディング作業： 自動リロードするローカルWebサーバが便利。npm start若しくはGulp/Webpackで、トランスパイル＆angular内部サーバ立ち上げも不要。liveserver→https://www.mitsue.co.jp/knowledge/blog/frontend/201810/02_1329.html
●イベントオブジェクト：
$event ⇒https://www.atmarkit.co.jp/ait/articles/1707/31/news124.html
●コンポーネントを強制的に再描画する: changeDetectorRef.detectChanges()
●定数を外部定義する方法
●asyncパイプ：
https://angular.jp/api/common/AsyncPipe
https://blog.lacolaco.net/2020/02/async-pipe-initial-null-problem
●その他
・html、script、body、baseタグは使えない。(日経Linux2019.4)
・angular.jsonの”styles”:[]には”src/styles.css”しか配置できない。それ以外のcssファイルは、styles.cssにて@importする。←本当https://stackoverflow.com/questions/50617488/angular-6-load-css-folders-in-angular-json
Angular6にてangular-cli.jsonからangular.jsonに変更。それに伴いルートも変更。https://dev.classmethod.jp/client-side/angular6-bootstrap4/
・自作javascriptの読み込み：https://thenewsinpu.hatenablog.jp/entry/2018/06/15/233643
⇒javascriptファイルはassets配下でないと動作しない。←試しにsrc配下に持っていったら駄目だった（2019.4.29）
・assets配下には、写真など資材をおく。src配下にimagesフォルダを作成しここに写真を置いていたが上手く読み込めなかったが、assets配下に移動したら上手くいった（2019.4.28）https://mslgt.hatenablog.com/entry/2017/07/03/074301
・bootstrapの組み込み
・CDNよりhttps://getbootstrap.com/、index,htmlに記述した例https://tonari-it.com/bootstrap-cdn/
・index.htmに記述しなくても、angular.jsonに記述すればindex.htmlに記述したのと同様にファイルが読み込まれるhttps://angular.jp/guide/workspace-config
参考情報
・https://qiita.com/kitfactory/items/c95ca84371670b21f4ac 注）Angular Webアプリ開発 スタートブックp17
関連ライブラリ
・angular material、angular-flex-layout 参考
・ng-bootstrap： https://ng-bootstrap.github.io/#/home
・angular firabase： https://angular-ja.firebaseapp.com/guide/quickstart（チュートリアル）、ハンズオン
・Swiper: https://swiperjs.com/
補足（Angular作成方法）
・ng new XXX（プロジェクト名）でXXXフォルダにファイルが作られる。
→node_moduleが作られる。
→githubからダウンロードした場合はnode_moduleがないので、npm installが必要。
・ng g component xxxでxxxという名前のコンポーネントが作られる（併せてapp.module.tsも更新される）。
・ng serveにて、仮想サーバが起動し、angularが動作する。
・ng built –prodでdistフォルダ配下にプロダクトファイルが作成されるので、dist配下に移動後、http-serverコマンドにてangularが動く。
＃サービスの追加はng g service 参考
コメントを残す