読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

Ionic Blogで紹介されていたAngular 2 Series: Introductionを試してみました

f:id:tyoshikawa1106:20150404183202p:plain

Ionic BlogのAngular 2 Series: Introductionという記事でAngular2のQuick Startについて紹介されていたので試してみました。最初、Ionicで動かすものかと思ったのですが、今回の記事ではIonicに関係なくAngurar2の紹介となっていました。


ちなみにAngular2のQuick StartについてはAngularのサイトで確認できます。
f:id:tyoshikawa1106:20150404183502p:plain

5 Min Quickstart - js

Create a project

次のコマンドでプロジェクトを作成できます。

mkdir myApp
cd myApp
git clone git@github.com:angular/quickstart.git

f:id:tyoshikawa1106:20150404184052p:plain


mkdirはディレクトリを作成するコマンドです。上記のコマンドを実行するとmyAppフォルダ内にQuickStart用のファイル一式を用意できます。

f:id:tyoshikawa1106:20150404184255p:plain

Create a new index.html file

新しくindex.htmlを作成します。内容はIonic Blogからコピペできるようになっていました。おそらくこんな感じです。

f:id:tyoshikawa1106:20150404184926p:plain


 * Create a new app.js file
JavaScriptのファイルを作成します。

f:id:tyoshikawa1106:20150404185254p:plain

Open Localhost

こんな感じでLocalhostを立ち上げます。

f:id:tyoshikawa1106:20150404185714p:plain


python -m SimpleHTTPServerの方で試してみました。

f:id:tyoshikawa1106:20150404185721p:plain


Serving HTTP on 0.0.0.0 port 8000 ...と書いてあったので『localhost:8000』にアクセスしてみます。『Hello Alice』と正しく表示されました。

f:id:tyoshikawa1106:20150404185940p:plain


Aliceの部分はapp.jsで指定した値だと思います。ひとまずAngular2のHello World的な部分を確認できました。今回のIonic Blogではここまでの紹介となっています。続きはAngularのサイトで確認できると思います。


また、Next up: Componentsと次回予告もあったので近いうちに続きが紹介されると思います。

f:id:tyoshikawa1106:20150404190251p:plain