チュートリアル:WindowsストアアプリをAngularJSで作ってみる(Part 2)

Windows Store Tutorial Part 2

AngularJSを使ってWindowsストアアプリを作ってみる このチュートリアルは、AngularJSを使ってWindowsストアアプリを使って作ってみます。 Part 1では、HelloWorld!を、Microsoft独自のJavaScriptのライブラリを実装したWinJSだけで作ってみました。 Part 2では、同じアプリをAngularJSで作ってみます。 チュートリアル(Part 2) Part 1のチュートリアルでは、Microsoftが出している HelloWorld!の事例をもとに、Microsoftが提供するWindowsストア用のJavaScriptライブラリ、WinJSだけでアプリだけで作ってみました。見かけはAngularJSっぽい動きにしましたが、ソースコードはAngularJS抜きで実現しました。 こんどは、早速、AngularJSで同じWindowsストアアプリに挑戦してみます。 最初のAngularJS+Windowsストアアプリ:「ハローワールド!」 MicrosoftのHelloWorld!の事例は、ユーザーが名前をInputフィールドに入れてボタンをクリックすると、Inputフィールドの下に「Hello ○○!」と表示されるものです。 そこの部分をAngularJSに置き換えて、Inputフィールドに何かを入力するたびに、Inputフィールドの下に入力した文字列を表示するようにしました。 完成したAngularJSでのHelloWorld!は次のような感じです: default.htmlの中身 default.htmlは、Part 1と比べて、3点ほど違いがありますが、ここでは default.html ... Read more »

チュートリアル:Windows ストアアプリをAngularJSで作ってみる(Part 1)

Windows Store Tutorial Part 1

AngularJSを使ってWindowsストアアプリを作ってみる このチュートリアルは、AngularJSを使ってWindowsストアアプリを使って作ってみます。 Part 1では、HelloWorld!を、Microsoft独自のJavaScriptを実装した、WinJSだけで作ってみます。 Part 2では、同じアプリをAngularJSで作ってみます。 チュートリアル(Part 1) 最近Windowsストアアプリに挑戦する機会があって、AngularJSで作ってみたいと思いました。 もし皆さんも同じことを考ていたら、このチュートリアルを参考に是非試してみてください。 このPart 1では、Microsoftが出している HelloWorld!の事例をもとに、Microsoftが提供するWindowsストア用のJavaScript、WinJSだけでアプリを作ってみます。 最初のWindowsストアアプリ:「ハローワールド!」 MicrosoftのHelloWorld!の事例は、ユーザーが名前をInputフィールドに入れてボタンをクリックすると、Inputフィールドの下に「Hello ○○!」と表示されるものです。 そのコードを若干手直しして、Inputフィールドに何かを入力するたびに、Inputフィールドの下に入力した文字列を表示するようにしました。 完成したHelloWorld!は次のような感じです: default.htmlの中身 このWindowsストアアプリは、default.html、default.js、default.cssからなりたっています(これらのコードの説明は、HelloWorld! ... Read more »