- Contents -
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
2件のコメント