Angular-cliとQuickStart for 入門者

Angular2を勉強するにあたって

この1週間でなんとかAngular2を扱えるようになったんだけど… 入門コストが高いといわれるだけあった。

最初、躓いたのは以下の点

• File構造の複雑さ・多さ
• Component,Service,Modelの何が何だかわからない感

コードを始める気にすらならないこの辺がもういやだってなる。

せめてFile構造を気にせずプログラムしたい。。。

Angular-cliに出会う

Angular-cliは、ひな形の自動生成、更新ファイルを自動ロードなど、 開発環境が整っているCLI。

Angular-cliでquickstartをやる

僕「これの組み合わせでやればコードのことだけ考えられる。。。」

Angular2「error!」

僕「（　＾ω＾）・・・」

package.jsonの違い

これによってimportするFileが決まる。 しかし、Angular-cliとquickstartのjsonが違うことに気付く。

僕「あああああああああああ～～～～～」

というわけで"あいのこ.json"を生成

{
    "name": "[ファイル名を入れてね]",
    "version": "0.0.0",
    "license": "MIT",
    "keywords": [],
    "author": "",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^4.2.4",
        "@angular/common": "^4.2.4",
        "@angular/compiler": "^4.2.4",
        "@angular/core": "^4.2.4",
        "@angular/forms": "^4.2.4",
        "@angular/http": "^4.2.4",
        "@angular/platform-browser": "^4.2.4",
        "@angular/platform-browser-dynamic": "^4.2.4",
        "@angular/router": "^4.2.4",
        "angular-in-memory-web-api": "~0.3.0",
        "systemjs": "0.19.40",
        "core-js": "^2.4.1",
        "rxjs": "^5.4.2",
        "zone.js": "^0.8.14"
    },
    "devDependencies": {
        "@angular/cli": "1.3.2",
        "@angular/compiler-cli": "^4.2.4",
        "@angular/language-service": "^4.2.4",
        "@types/jasmine": "~2.5.53",
        "@types/jasminewd2": "~2.0.2",
        "@types/node": "~6.0.60",
        "codelyzer": "~3.1.1",
        "jasmine-core": "~2.6.2",
        "jasmine-spec-reporter": "~4.1.0",
        "karma": "~1.7.0",
        "karma-chrome-launcher": "~2.1.1",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "^1.2.1",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.1.2",
        "ts-node": "~3.2.0",
        "tslint": "~5.3.2",
        "typescript": "~2.3.3",
        "canonical-path": "0.0.2",
        "lodash": "^4.16.4",
        "rimraf": "^2.5.4"
    }
}

[ファイル名を入れてね]に自分のファイル名を入れてください（管理しやすいので)

【使い方】 “あいのこ.json"をAngular-cliで生成したフォルダ直下にあるpackage.jsonに上書き保存。

なんだかんだ言って重宝してるので記事にしました。

これからもっと頑張って勉強します。