Angularプロジェクトの概要と始め方を記載します。Versionの変更がたびたびあるので、内容はリンクは最新のVersionのページを確認すること。
社内教育に使っている資料なのでメモ書きです。
URL
アプリケーション生成
ngnewapplication-nameでプロジェクト構成-Routingの設定を聞かれるので>y-cssの設定はscssで起動コマンド
ngserveディレクトリ構成
全体感をつかむためにプロジェクトの構造を把握します。ディレクトリ構造を知っておくとバグ時にどのファイルが原因か可能性を絞れるようになります。
コンパイル関係
tsconfig
tsconfig.json:editorから参照されるファイル?(詳細は理解しておらず)tsconfig.base.json:app.json,spec.jsonの両方に継承されているコンパイル設定tsconfig.app.json:通常のコンパイル設定tsconfig.spec.json:テスト用のコンパイル設定angular.json
Angularプロジェクトのビルドの設定などが記述されている。よく利用して重要なのは以下の3プロパティー。
- assets: 画像などを格納するdirectory
- styles: cssやscssなどを格納する。node_modulesに入っているscssなどを入れる。
- scripts: Javascriptファイルを読み込む
"assets":["src/favicon.ico","src/assets"],"styles":["src/styles.scss"],"scripts":["node_modules/libraryA/js/index.js"]おそらく最適化などの処理をしてもらえるので、Index.htmlをいじるのでなく上のファイルをいじることでJavaScriptやCSSなどを読み込むのがよい。
その他
とりあえずデフォルトのままで問題ないファイル。
src/test.ssrc/main.tssrc/polyfills.tssrc/index.htmlエディター設定ファイル
.editorconfig:エディター一般の構文設定tslint.json:typescriptの構文設定環境設定ファイル
angular.jsonファイルのコンパイル設定で設定だれている。
envrionments.environment.tsAngularの構文
特に重要で理解したい概念
- Component
- Provider(Service)
- Module
理解したい構文
以下のdeclarations, imports, providers,exports。bootstrapはとりあえずとばしてよい
@NgModule({declarations:[AppComponent,UserListComponent],imports:[BrowserModule,AppRoutingModule],providers:[],exports:[],bootstrap:[AppComponent]})exportclassAppModule{}とりあえずすすめたいところ
Getting Started, FundamentalsのComponent Interactionまで
モジュールとコンポーネント
export, import, declarationとcomponentの関係を正確に理解するのが重要
Yet to be written.
モジュールとコンポーネントの関係を理解するためのデモソースコード
URL: https://github.com/programmerkgit/angular-module-import-demo
Angular Module
- Moduleのdeclareに記載されたComponentが利用できるようになる。
- componentは同じmodule内でdeclareされた他のcomponentを利用できる。
- componentは同じmodule内にimportされたModuleの中でdeclareかつexportされたcomponentを利用できる
- MainModuleがChildModuleをimportし、ChildModuleがGrandChildModuleをimportしている場合。ChildModuleがGrandChildModuleをexportすると、MainModuleからGrandChildModuleでexportしているModuleやcomponentにアクセスできる
MainModuledeclaration:[MainComponentA,MainComponentB],import:[ChildModule]ChildModuledeclaration:[ChildComponent,ExportedChildComponent]import:[GrandChildModule,ExportedGrandChildModule],export:[ExportedGrandChildModule]GrandChildModuledeclaration:[GrandChildComponent,ExportedChildComponent]export:[ExportedChildComponent]ExportedGrandChildModuledeclaration:[ExportedGrandChildComponent,ExportedExportedChildComponent]export:[ExportedChildComponent]