BT

Angular.JS と ASP.NET を利用した Single Page アプリケーションの作成

| 作者: Jeff Martin フォローする 17 人のフォロワー , 翻訳者 勇 大地 フォローする 1 人のフォロワー 投稿日 2014年4月13日. 推定読書時間: 3 分 |

原文(投稿日:2014/04/04)へのリンク

Build の水曜日セッションにて、David Catuhe 氏と Jon Galloway 氏が AngularJS を ASP.NET アプリケーションで利用する方法をプレゼンテーションした。これにより、開発者はモダンな Single Page アプリケーションを高速に作成する方法を提供された。

Angular は Google によって作成され、現在はオープンソースプロジェクトとして扱われてサポートされている。名前の示す通り JavaScript ベースのライブラリであり、Model View Controller (MVC) 設計パターンにしたがっている。Catuhe 氏と Galloway 氏の説明する通り、Angular は DI(依存注入)を利用して ASP.NET アプリケーションを機能強化する。単一ファイルである angular.min.js は、機能を有効化するために一度だけ読み込む必要がある。(NuGet ユーザは最新版(β)か安定板を 取得 することができる)。

Angular の利用方法としては、全てに適用/全てに適用しないという二者択一のアプローチではないことを指摘しており、作成しているサイトに対し選択要素の機能のみを利用するといった方法も考えられる。 どのイベントでも Catuhe 氏と Galloway 氏は Scripts フォルダの下に “apps” を作成して体系化することを推奨している。

JavaScript の圧縮についての重要な警告:標準で利用される圧縮の場合、コード内の Angular における依存注入を破壊する恐れがある(Angular のチュートリアルドキュメントである XHRs & Dependency Injection の“A Note on Minification”に記載されている)。

Angular を自身のサイト内で利用する場合、html タグ内に “ng-app” を追加する必要がある。

<html ng-app … >

上記を記載することが Angular の実行準備となる。Angular は $http を利用し、jQuery の軽量バージョンのファイルをロードする。すでに jQuery を配置して利用している場合、Angular は一貫性を維持するために配置済みの jQuery を利用する。 

Catuhe 氏と Galloway 氏はマジック:ザ・ギャザリング のカードのサンプルアプリケーションを利用し、Single Page アプリケーション(SPA)ベースでの表示/情報格納についてデモを実施した。UI 構築時に SPA はビューを利用するが、Angular 自身はそれらのビューで定義されたルーティングを利用する。

Angular で MVC Route を用いる際にディープリンクが衝突する場合があるので、彼らは Catch All Route の利用を提案している。

 

routes.MapRoute(
                name: "Catch all route for SPA",
                url: "App/{*catchall}",
                defaults: new{
                                controller = "Home",
                                action = "Index"});

 

HTML表示における他のTIPSが存在する。ビューから生成されたHTMLの場合は複雑な処理は必要な一方で、単一のファイル(MyHTML.html)からなる HTML の場合は IIS Rewrite ルールを利用して URL を変更することだ。

/myHTML.html -> /myHTML

 

彼らのデモアプリケーションの動作を閲覧したい場合、Channel9 ページ に情報提供を相談して欲しい。

 

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT