markdown AngulerJS v5.2.0

Posted 2021-05-06

# AngularJS tutorial

## version

- AngularJS
> `5.2.0`

- node
> `>= 6.9`

- npm
> `>= 3.x`

## 1. Angular CLI install

```
$ npm install -g @angular/cli
```

## 2. Create Project

```
$ ng new my-app
```

## 3. Start server

```
$ cd my-app
$ ng serve --open
```

## Project Tree

```
|-- .angular-cli.json
|-- .editorconfig
|-- README.md
|-- e2e
|   |-- app.e2e-spec.ts
|   |-- app.po.ts
|   `-- tsconfig.e2e.json
|-- karma.conf.js
|-- package-lock.json
|-- package.json
|-- protractor.conf.js
|-- src
|   |-- app
|   |   |-- app.component.css
|   |   |-- app.component.html
|   |   |-- app.component.spec.ts
|   |   |-- app.component.ts
|   |   `-- app.module.ts
|   |-- assets
|   |   `-- .gitkeep
|   |-- environments
|   |   |-- environment.prod.ts
|   |   `-- environment.ts
|   |-- favicon.ico
|   |-- index.html
|   |-- main.ts
|   |-- polyfills.ts
|   |-- styles.css
|   |-- test.ts
|   |-- tsconfig.app.json
|   |-- tsconfig.spec.json
|   `-- typings.d.ts
|-- tsconfig.json
`-- tslint.json
```

### Src Folder

|File            |目的                                        |
|----------------|-------------------------------------------|
|app/app.component.{ts,html,css,spec,ts}|アプリケーションが進化するにつれてネストされたコンポーネントのツリーになる要素のコンポーネントです。`AppComponent`をHTMLテンプレート、、CSS、ユニットテストと一緒に定義します。|
|app/app.module.ts|アプリケーションのルートモジュール。|
|assets/*|画像等のアセットファイルを格納する|
|enviroments/*|環境別の設定ファイル|
|favicon.ico|favicon|
|index.html|main HTML page|
|main.ts|アプリケーションのエントリーポイント。アプリケーションをJITコンパイラでコンパイルし、アプリケーションのルートモジュール(AppModule)をブートストラップしてブラウザで実行します。|
|polyfills.ts|異なるブラウザ間での違いを正規化するのに役立ちます。[Browser Support Guid](https://angular.io/guide/browser-support)|
|styles.css|グローバルで呼ばれるCSS|
|test.ts|メインエントリーポイントに対するユニットテスト|
|tsconfig.{app|spec}.json|TypeScript コンパイラ設定ファイル|

### The root folder

|File            |目的                                        |
|----------------|-------------------------------------------|
|e2e/            |内部E2Eテスト                                |
|node_modules/   |インストールされてるnode module                |
|.angular-cli.json|Angular CLIの設定ファイル。プロジェクトのビルドの設定など出来る|
|.editorconfig   |エディタの基本設定 [EditorConfigについて](https://qiita.com/naru0504/items/82f09881abaf3f4dc171)|
|.gitignore      |.gitignoreです。                            |
|karma.conf.js   |Karmaの設定ファイル [Karma](https://karma-runner.github.io/2.0/index.html) |
|package.json    |npmの設定ファイル                             |
|protractor.conf.js|E2EテストフレームワークのProtractorの設定ファイル [Protractor](http://www.protractortest.org/#/)|
|README.md       |READMEです。マークダウンです。                  |
|tsconfig.json   |TypeScriptコンパイラの設定ファイル。            |
|tslint.json     |TSLint(コードスタイル)の設定ファイル。           |


## Angular CLI

### Generate Component

Webページの１部分を構成する。

```typescript
import { Component } from '@angular/core';

// メタデータ
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

// コンポーネント
export class AppComponent {
  title = 'My First Angular App';
}
```

`<app-root>`タグが記述された場所に描画される。

```
$ ng g component my-new-component
```

### Generate Directive

ViewとModelの双方向バインドを実現するための根幹的な仕組み。ディレクティブを使用すると、DOMの要素に動作を割り当てる事ができる。

```
$ ng g directive my-new-directive
```

### Generate Pipe

なんに使うのか不明


```
$ ng g pipe my-new-pipe
```

### Generate Service

アプリにおいて任意のタスクを実行する関数として使用される。

```
$ ng g service my-new-service
```

### Generate Class

```
$ ng g class my-new-class
```

### Generate Guard

```
$ ng g guard my-new-guard
```

### Generate Interface

```
$ ng g interface my-new-interface
```

### Generate Enum

```
$ ng g enum my-new-enum
```

### Generate Module

コンポーネントなどの実装をグループ化。

```typescript
// モジュール参照
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// コンポーネント参照
import { AppComponent } from './app.component';

// モジュールのメタデータ
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

// モジュールクラス
export class AppModule { }
```

```
$ ng g module my-module
```