チュートリアル: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 »

チュートリアル:jsFiddle + AngularJS

jsFiddle and AngularJS Tutorial

jsFiddleで「ハローワールド!」のコード・スニピットを作ってみる このチュートリアルは、jsFiddleのチュートリアルを参考に、日本語版にしたものです。コードの事例は、AngularJSとBootstrapを使っています。 チュートリアル jsFiddleは、簡単でわかりやすく使えるようになっています。 このチュートリアルは、jsFiddleを使って「ハローワールド!」の作り方をお見せします。HTML、CSS、JavaScriptの経験は必要ありません。 最初のFiddle:「ハローワールド!」 ここで、jsFiddleを使って、簡単な「ハローワールド!」を作ってみましょう。 その後に、Bootstrapのスタイルシートを付け足します。 jsFiddleを開きましょう まず、jsFiddleをブラウザーで開きましょう。まっさらなjsFiddleのスクリーンが開きます。 ここに4つのパネルがあります。そのうち3つはHTMLとCSSとJavaScriptの編集用です。最後のResultパネルは、編集したコードを実行したときに表示される結果です。 パネルの上にあるメニューは、現在編集しているFiddle(注1)の詳細を設定するためのものです。 [新しいFiddleのページ] AngularJSのフレームワークを選びます ページの左側に「Frameworks & Extensions」のドロップダウンメニューがあります。これをクリックして、 ... Read more »