かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

angularjs

TypeScript + AngularJS「リソースを使う」

結構めんどくさい。とりあえず動いたのでメモ。 ng.resource.IResourceを継承したものを作る プロパティを生やす IResourceServiceからIResourceClassを作る IResourceClassのgetの戻り値を自作のIResourceを継承したものにキャスト あとは好きにする /// <reference path="scripts/typings/angularjs/angular.d.ts" /> /</reference>…

TypeScript + AngularJS + ASP.NET WebAPI + ASP.NET Identity + Form認証でサインイン処理してみよう

カオスな感じですが、AngularJSを使ってForm認証を行うサンプルを作成しました。ちょっと自信がないので、突っ込み歓迎です…。 TypeScript + AngularJSでASP.NETのForm認証を行う in C#, JavaScript for Visual Studio 2013 基本的にはASP.NET Identityでユ…

不可解なエラーのとき確認するポイント

ただのメモです。 AngularJS使っててエラーがでたら以下の点を確認すること。 必要なモジュールは読み込まれているか angujar.module("hoge", [ここを確認]) 必要なjsファイルは、ちゃんとページに読み込まれているか typoしてないか $routeProviderを$rootP…

ルート定義のresolve

ルート定義のwhenメソッドの第二引数のresolveでは、コントローラに注入したいデータを取得する処理を定義することが出来ます。 /// <reference path="scripts/typings/angularjs/angular.d.ts" /> /// <reference path="scripts/typings/angularjs/angular-route.d.ts" /> module TypeScriptAngularJSApp2 { angular.module("MyApp", ["ngRoute"]) // コントローラの定義。value1とvalue2を</reference></reference>…

AngularJSとTypeScript「サービスを共有してページ間のデータ共有」

サービスのインスタンスは1つ。ということは、同じサービスをページ間で共有すればデータを渡すことが出来るということです。ということでやってみました。 /// <reference path="scripts/typings/angularjs/angular.d.ts" /> /// <reference path="scripts/typings/angularjs/angular-route.d.ts" /> module TypeScriptAngularJSApp2 { // データ共有用のサービス class SampleService { ke</reference></reference>…

ng.ILocationServiceを使った画面遷移での画面間データ渡し

とりあえずパラメータを使うのが一番楽そうです。パラメータはng.ILocationServiceのsearchメソッドにオブジェクトを渡してやるといい感じに面倒を見てくれます。 前回の処理に、ページ間のデータ渡しをコントローラに追加したコードは以下のような感じにな…

TypeScriptとAngularJS「コントローラ起点の画面遷移」

ng.ILocationServiceを使います。 ルートの定義 $locationでng.ILocationServiceをコントローラにインジェクションできるので、そいつのpathメソッドにURLを指定することで画面遷移が出来ます。 /// <reference path="scripts/typings/angularjs/angular.d.ts" /> /// <reference path="scripts/typings/angularjs/angular-route.d.ts" /> module TypeScriptAngularJSApp2 { // Page1用のス</reference></reference>…

AngularJSとTypeScript「Directiveのハローワールド」

AngularJSのかなり強力なディレクティブという機能のハローワールドしてみました。こいつAngularJSでDOM操作する処理をカプセル化する素敵なやつです。とりあえず、JavaScriptではなくてTypeScriptでは、どういう風にかくのかというのをつかむために、Hello …

TypeScriptとAngularJS「Visual Studio用プロジェクトテンプレート」

毎回NuGetからAngularJSと型定義入れたりするのがめんどくさくなったので、プロジェクトテンプレート化しました。zipのまま、TemplatesのProjectTemplatesフォルダにつっこめば使えると思います。

TypeScriptとAngularJS「ページ切り替え」

Single Page Applicationだとしても、疑似的にページ切り替えしますよね。ということで、そのための機能がAngularJSにもあります。 使い方 angular-route.js(min.js)をangular.js(min.js)の後に追加。angular.moduleのモジュール作成時に"ngRoute"への依存関…

TypeScriptとAngularJS「サービス」

サービスというものは、シングルトンで管理されるコントローラあたりから使うものみたいです。作り方はコントローラと大して変わらないけど、モジュールのserviceメソッドで登録するらしい。 ということで、サービスとスコープとコントローラを定義してみた…

TypeScriptとAngularJS「表示非表示を切り替えるng-show ng-hide」

お手軽にDOMの要素の表示非表示を切り替えれるっぽいということで試してみました。バックのTypeScriptは、フラグを1つもったScopeを定義して、それをtrue/falseを切り替えるだけのシンプル実装 /// <reference path="scripts/typings/angularjs/angular.d.ts" /> interface ToggleMenuScope extends ng.IScope { isShow: </reference>…

TypeScriptとAngularJS「formのサブミット時に処理をする」

入力フォームとかで使いそうです。先ほどの例では、ボタンに直接ng-clickをつけて関数を割り当ててましたが、formでやるように改造してみます。ちなみにTypeScript側は下と同じです。 TypeScriptとAngularJS「プロパティの監視とコレクションのバインド」 - …

TypeScriptとAngularJS「プロパティの監視とコレクションのバインド」

とあるプロパティの値の変化を監視して、その中身をコレクションに履歴として収集するようにするアプリを組んでみました。ここまで、すんなりいってるので怖いです。 TypeScript側 ポイントは$scopeの$watch関数。こいつに監視したいスコープのプロパティを…

TypeScriptとAngularJS「スコープにオブジェクトを持たせる」

やってることは大したことではないけど、実際のプログラムでは、スコープに持たせるのは単純なプリミティブ型ではなくてオブジェクトですよね。ということでやってみた。結果としてはちゃんと動いた TypeScript側 /// <reference path="scripts/typings/angularjs/angular.d.ts" /> module MyApp { // scopeに持たせるオ</reference>…

TypeScriptとAngularJSでボタンクリックしてみよう

ボタンクリックに反応するようにしてみました。やり方は簡単でボタン系のタグにng-click属性つけてやればいいみたいです。 コントローラとスコープのコードは以下のような感じ。 /// <reference path="scripts/typings/angularjs/angular.d.ts" /> module MyApp { interface GreetScope extends ng.IScope { message: str</reference>…

TypeScript + AngularJSのHelloWorldしてみた

何事もHelloWorldみたいなのから。HelloWorldといっても、モジュールとスコープとコントローラ使う感じで。 プロジェクト 以下のライブラリをNuGetから突っ込みます。 angularjs angularjs.TypeScript.DefinitelyTyped スコープの定義 とりあえず、挨拶用の…

TypeScript + AngularJSでTodoのサンプルを書いてみた

2014/05/25追記 こういう書き方も出来ると紹介してもらいました。 @okazuki $scopeのメソッドの型をFunctionにしたくない場合 URL こーゆー感じで書くとコピペで済む+型チェックの恩恵が受けられるのでよいと思います。2014-05-25 02:06:40 via twicli to @o…