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

カオスな感じですが、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…

ルート定義の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>…

サービスのインスタンスは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のsearchメソッドにオブジェクトを渡してやるといい感じに面倒を見てくれます。 前回の処理に、ページ間のデータ渡しをコントローラに追加したコードは以下のような感じにな…

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

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

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

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

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

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

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

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

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

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

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