8

私は AngularJS を初めて使用し、ASPNET MVC に基づく新しいプロジェクトに使用したいと考えています。AngularJS でビューを管理したい (ハイブリッド SPA になり、一部のページは通常の MVC 生成ビューになります)。しかし、私はサーバー側で何を選択すべきかを決定するのに苦労しています。つまり、ServiceStack/WebApi/MVC アクション? WebAPI と通常の ASPNET MVC の例は Web にありますが、SS+Angular の例は見つかりませんでした。SS+Angular を使用したサンプル プロジェクトを教えてください (ルーティングを管理する方法、ビュー (html ファイル) がユーザーによって直接開かれないようにする方法など)。

4

5 に答える 5

8

数か月前、シカゴ コード キャンプ 2013のデモ プロジェクト( https://github.com/paaschpa/ordersDemo ) をまとめました。 configs は GitHub リポジトリにあります.GitHub とそれらの間で構成/設定を正しく取得することはできません)が、コードはあなたが求めているものに似ていると思います. AngularJS (おそらくその最良の例ではありません)、/api でホストされる ServiceStack を備えた .NET MVC を使用します。また、Twitter BootStrap、Redis Pub/Sub、SignalR も使用しています...おそらく、このプロジェクト/サンプルにあまりにも多くのものをぶつけました。Redis をインストールできる場合 ( https://github.com/dmajkic/redis/downloads ) 、redisUrllocalhost:6379web.config ファイルでは、ローカルで実行できるはずです。

于 2013-09-05T23:08:16.357 に答える
5

プロジェクトで ServiceStack + ASP.NET MVC + Angular を使用しています。

ServiceStack がインストールされると (ナゲット パッケージを使用すると非常に簡単です)、ServiceStack Rest WS を呼び出すのは、サービスで angular を使用すると非常に簡単です。

GetById: function (movieId) {
    var url = root + 'api/movie/' + movieId;
    var promise = $http({ method: 'GET', url: url }).then(function (response) {
        return response.data;
    });

    return promise;
}, ...

ServiceStack では、次のように DTO と ViewModel を使用します。

#region MovieDTO
[Api("GET Movie by Id")]
[Route("/movie/{Id}")]
public class MovieDTORequest
{
    public int Id { get; set; }
}

public class MovieDTOResponse
{
    public MovieViewModel Movie{ get; set; }
}

#endregion

そして私のサービスを終了するには：

private MovieBusiness _movieBusiness= (MovieBusiness )UnityHelper.BusinessResolve<Movie>();
public object Get(MovieDTORequest request)
{
    Movie movie = _movieBusiness.GetById(request.Id);
    MovieViewModel movieViewModel = MovieAdapter.ToViewModel(movie);

    return new MovieDTOResponse { Movie = movieViewModel };
}

ルーティングに関しては、私の場合、ASP.NET MVC ルートの方が使いやすいので、ASP.NET MVC ルートを使用します。そのため、ServiceStack ユーザーを各ビューに送信する BaseController を作成しました。

[ProfilingActionFilter]
public class BaseController : ServiceStackController<CustomUserSession>
{
    /// <summary>
    /// Surcharge de l'action pour charger la notification dans le ViewBag s'il y en a une et l'a marquer comme delivrée
    /// </summary>
    protected override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        base.OnActionExecuting(filterContext);
        int Id = 0;
        UserViewModel user= new UserViewModel ();

        if (int.TryParse(base.UserSession.UserAuthId, out Id))
        {
            user= new UserViewModel ()
            {
                id = Convert.ToInt32(base.UserSession.UserAuthId),
                nom = base.UserSession.DisplayName,
                roles = base.UserSession.Roles != null ? string.Join(",", base.UserSession.Roles.ToArray()) : string.Empty
            };
        }
        ViewBag.User= user;
    }

次に、ViewModel を angular Controller に直接渡す必要がある場合は、これを実行できます。

@model AddictLive.Core.ViewModel.Mobile.ViewModels.MovieViewModel
@using Newtonsoft.Json

<div ng-controller="MovieController" ng-init="init(@Html.Raw(JsonConvert.SerializeObject(Model)))">
     ...
</div>

angular コントローラーの init() メソッドのサンプル:

$scope.init = function (movieViewModel) {
    $scope.property1= movieViewModel.property1;
    $scope.property2= movieViewModel.property2;
};

わかりやすくするためにすべての例を単純化しましたが、さらに説明が必要な場合はお知らせください

于 2013-09-12T08:31:04.600 に答える
2

これはあなたが探しているものでしょうか？

https://github.com/Wintellect/Angular-MVC-Cookbook

于 2013-09-04T19:17:18.670 に答える