Angular2 (アンギュラー ツー)
Googleが開発している、フロントエンド用のフレームワーク。

よく比較される、React.jsはライブライリとして使うが、
Angularは、フレームワークとして利用する事になる。

面倒な事はフレームワーク側でやってくれる。

Webpack, Typescript がすでに利用出来るようにセットアップされているので、
てっとり早く始めやすい。

Angular-CLI のインストール

いろいろインストールするものがあるのだけれども、このCLI をインストールすると
ngコマンドが利用できるようになる。

そのコマンドを使ってnew するだけで、もうプロジェクトは作成完了しているという早さ！

# 各種ツールがまとめてインストールされる
npm install -g @angular/cli

ngコマンドってなんでngなんだろ〜？
不思議な名前だ。。
(ンガーコマンドと個人的には呼ぶことにしよう。)

ngコマンドを使って、新規プロジェクトを作成

ng new コマンドでプロジェクトを作成できる。
今回の例では、AngularTestというディレクトリが作成され、その中に必要なファイルをセットアップしてくれる。

ng new AngularTest

installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.

色々、ファイルが作成されるが、
なんと作成したプロジェクトは既にGit管理されている！

.gitignoreとか、いつも作るも面倒なのでこれはラクだ〜。

自動で生成されたpackage.json

{
  "name": "angular-test",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.2",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}

自動で生成されたtsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

最初に npm install を実行するように勧められる。

作成されたpackage.jsonに記載されているパケージをインストールする必要があるので、npm install でインストールする。

cd AngularTest
npm install

npm install せずに、なにかしようとすると以下のような警告が出る。（賢い）

node_modules appears empty, you may need to run npm install

実行してみる。

ng serve コマンドでローカルサーバーを立ち上げてくれる。
package.json には既に
"start": "ng serve",
と定義されているので、npm run start でいける。

npm run start

** NG Live Development Server is running on http://localhost:4200 **
Hash: 861883b8fbab5c7f75ec
Time: 7441ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 157 kB {4} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.js.map (styles) 65.2 kB {4} [initial] [rendered]
chunk    {2} main.bundle.js, main.bundle.js.map (main) 3.63 kB {3} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.45 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

これだけで、ファイルの変更をwatchしてくれている状態に。
しかも、webpackとTypeScriptが導入済みで既にコンパイルしてくれている！！

めっちゃラクやん、
webpack.config.js とか、tsconfig.json とかの設定で最初に躓くこともない。

componentを作成してみる

Angular2 では部品をコンポーネントとして定義している。
コンポーネントを作成して、それらを好きに配置する事ができる。

コンポーネントは、HTML/CSS/TSから構成される。

ng generate component <ComponentName> というコマンドでてっとり早くコンポーネントを作成できる。

ng generate component hello

installing component
  create src/app/hello/hello.component.css
  create src/app/hello/hello.component.html
  create src/app/hello/hello.component.spec.ts
  create src/app/hello/hello.component.ts
  update src/app/app.module.ts

作成したcomponentを配置する。

作成したコンポーネントは、app.component.htmlに追記することで配置が可能。

src/app/app.component.htmlに追記する。

<app-hello></app-hello>

app-hello というタグにすると、helloコンポーネントがそこに挿入される。

おしまい

最初の始めやすさは、これがダントツでラクだと思った。
まだ細かい使い方までは勉強中だが、なんか良さげだぞ！

Angular2