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
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について
.gitignore	.gitignoreです。
karma.conf.js	Karmaの設定ファイル Karma
package.json	npmの設定ファイル
protractor.conf.js	E2EテストフレームワークのProtractorの設定ファイル Protractor
README.md	READMEです。マークダウンです。
tsconfig.json	TypeScriptコンパイラの設定ファイル。
tslint.json	TSLint(コードスタイル)の設定ファイル。

Angular CLI

Generate Component

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

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

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

// モジュール参照
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