再度AngularJS(#1)

JavaScriptライブラリ人気調査によるとMVC系フレームワークはAngularJSぶっちぎりじゃないですか。

MS謹製ということでKnockout.js使ってしまってちょっと後悔。

Visual Studio 2013 Community Editionも出ましたし、以前にさらっといじったAngularJSを新しめの環境で使ってみたいと思います、

開発環境はVisual Studio 2013 Community Edition。

こちらのページのTodoサンプルをASP.NETで焼き直します。

WebAPI使って永続化をサポートするようにします。

プロジェクト

フレームワークは「.Net Framework 4.5.1」

テンプレートは[Visual C#] – [Web] – [ASP.NET Web Application]

名前は適当にAGSampleとしました。

さらにサブテンプレート(?)で[Empty]を選択、[MVC]にチェックを入れてOK。

参照設定とか細かくされてますけど、ソースファイルとして作られるのはそんなに多くありません。gitで見るとわかりやすい（？）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


\AGSample>git add .
\AGSample>git status
On branch master
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

        new file:   AGSample.sln
        new file:   AGSample/AGSample.csproj
        new file:   AGSample/App_Start/RouteConfig.cs
        new file:   AGSample/Global.asax
        new file:   AGSample/Global.asax.cs
        new file:   AGSample/Properties/AssemblyInfo.cs
        new file:   AGSample/Views/web.config
        new file:   AGSample/Web.Debug.config
        new file:   AGSample/Web.Release.config
        new file:   AGSample/Web.config
        new file:   AGSample/packages.config

ライブラリ追加

NuGetで

AngularJS

EntityFramework

EntityFramework.SqlServerCompact

をインストールします。

1
2
3


PM> Install-Package angularjs -Version 1.3.13
PM> Install-Package EntityFramework -Version 6.1.2
PM> Install-Package EntityFramework.SqlServerCompact -Version 6.1.2

バージョン部分は現時点での最新安定版。

Model

この辺りを斜め読みして、かなり端折ってます。

ModelsフォルダTodo.csを追加。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Web;

namespace AGSample.Models
{
    public class Todo
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public bool Done { get; set; }
    }
}

DALフォルダを作って、AGSampleContext.csとAGSampleInitializer.csを追加。(DAL:Data Access Layer)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


using AGSample.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;

namespace AGSample.DAL
{
    public class AGSampleContext : DbContext
    {
        public AGSampleContext() : base("AGSampleDb"){} //connection string name
        public DbSet<Todo> Todos { get; set; }
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


using AGSample.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace AGSample.DAL
{
    public class AGSampleInitializer : System.Data.Entity.DropCreateDatabaseIfModelChanges<AGSampleContext>
    {
        protected override void Seed(AGSampleContext context) {
            var todos = new List<Todo> {
                new Todo{Text="AngularJSの学習",Done=false},
                new Todo{Text="AngularJSのアプリケーション構築",Done=false},
            };
            todos.ForEach(t => context.Todos.Add(t));
            context.SaveChanges();
        }
    }
}

web.configに接続文字列とInitializerの設定。

1
2
3
4


</configSections>
  <connectionStrings>
    <add name="AGSampleDb" connectionString="Data Source=|DataDirectory|\AGSampleDatabase.sdf" providerName="System.Data.SqlServerCe.4.0"/>
  </connectionStrings>

1
2
3
4
5
6


<entityFramework>
    <contexts>
      <context type="AGSample.DAL.AGSampleContext, AGSample">
        <databaseInitializer type="AGSample.DAL.AGSampleInitializer, AGSample" />
      </context>
    </contexts>

ここでいったんコンパイル。

Controller(for API)

Controllersで右クリック [Add]-[Controller]で「Web API 2 Controller with actions,using Entity Framework」を選択。

ModelにTodo、Data ContextにAGSampleContext、せっかくなのでasyncなオプションをONにして、名前は「TodoesController」にしました。

AddするとTodoesController.csが追加され、なにやらreadme.txtが表示されます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


Visual Studio has added the full set of dependencies for ASP.NET Web API 2 to project 'AGSample'.

The Global.asax.cs file in the project may require additional changes to enable ASP.NET Web API.

1. Add the following namespace references:

    using System.Web.Http;
    using System.Web.Routing;

2. If the code does not already define an Application_Start method, add the following method:

    protected void Application_Start()
    {
    }

3. Add the following lines to the beginning of the Application_Start method:

    GlobalConfiguration.Configure(WebApiConfig.Register);

言われた通り、Global.asax.cs のApplication_Start()に

1

System.Web.Http.GlobalConfiguration.Configure(WebApiConfig.Register);

を追加。

RouteConfig.RegisterRoutes(RouteTable.Routes);より前に追加しないとダメみたいです。

Controller(for View)

そろそろ実行したいので表示用ページとコントローラとして、View\Home\Index.cshtmlとControllers\HomeController.csを作成します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AGSample.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index() { return View(); }
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


@{
    Layout = null;
}
<!DOCTYPE html>
<html ng-app>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AngularJS Sample SPA</title>
    <script src="~/Scripts/angular.min.js"></script> <!-- don't need Url.Content from MVC4-->
</head>
<body>
    <div>
        Home\Index.cshtml
    </div>
</body>
</html>

ちなみにウイザードでMVC5用のViewを作るとjQueryとかbootstrapとか勝手にインストールされるので、今回は使用しません。

View\Home\Index.cshtmlの編集ではインテリセンスが効きます！

やったね！

デバッグでhttp://localhost:????/api/todoes にアクセスするとデータが出るはず。

長くなったので、続きは次回に…