Windows8.1でAngular2を触ってみる

Angular2、何それ?おいしいの?

よくわからないが、Javascript(Typescript?)によるWEBフレームワークらしい。

何のためのフレームワークか、わたしにはよく分からない。

とりあえず、やってみる

(環境)
Windows8,1
C:\js\ フォルダに、angular2-quickstart フォルダを作成

Angluar2のクイックスタートとチュートリアルを実施 – その1
Angular2Angular2181JavaScriptJavaScript11012TypeScriptTypeScript674
gambareが2016/09/09に投稿(2016/09/23に編集)
http://qiita.com/gambare/items/e52b49c09890e1180610

の通りにやってみる。

(0)事前に必要なもの
npm
node.js
TypeScript

image

npmが入っているのは分かるが、node.js と、TypeScriptが入っているのかどうかは確認できず。。。たしか、以前、node.js はインストールした記憶が、、、

image

TypeScriptはこれで入っているのかな???WARN が出ているけど、、、

(1)プロジェクトの作成と設定

http://qiita.com/gambare/items/e52b49c09890e1180610#%E3%82%B9%E3%83%86%E3%83%83%E3%83%971%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%A8%E8%A8%AD%E5%AE%9A

の通りに。

C:\js\ フォルダに、angular2-quickstart フォルダを作成

image

angular2-quickstart フォルダに、package.json、systemjs.config.js、tsconfig.json、typings.jsonを作成して、

https://angular.io/docs/ts/latest/quickstart.html#!#add-config-files

からコピペしてから、端末で、

npm install

結構時間がかかる。

image

(2)アプリケーションの作成

http://qiita.com/gambare/items/e52b49c09890e1180610#%E3%82%B9%E3%83%86%E3%83%83%E3%83%972-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BD%9C%E6%88%90

の通りにやるだけ。

C:\js\angular2-quickstart フォルダに、app フォルダを作成し、さらにその下に、

app.module.ts
app.component.ts
main.ts

を作成し、上記サイトの内容をコピペ。

(3)WEBページを作る。

C:\js\angular2-quickstart フォルダに、以下の2つを作成して、上記サイトの内容をコピペ。

index.html
styles.css

そうしてから、端末で、

npm start

image

すると、自動的に、ブラウザが立ち上がり、以下のように表示される。

image

とりあえず、ここまで。

次は、以下をやってみたい。

Angluar2のクイックスタートとチュートリアルを実施 – その2
Angular2Angular2181JavaScriptJavaScript11014TypeScriptTypeScript674
gambareが2016/09/12に投稿(2016/09/16に編集)
http://qiita.com/gambare/items/52ab19f8937ffc228cec

関連記事
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする