AngularJS與ServiceStack / WebApi / MVC操作

Question

我是AngularJS的新手，並希望將其用於基於ASPNET MVC的新項目中。 我希望AngularJS來管理視圖（它將是混合SPA，某些頁面是常規MVC生成的視圖）。 但是我可以決定在服務器端應該選擇什么。 即ServiceStack / WebApi / MVC操作？ Web上有一些用於WebAPI和常規ASPNET MVC的示例，但是找不到任何SS + Angular示例。 您能給我一個帶有SS + Angular的示例項目（如何管理路由，防止用戶直接打開視圖（html文件）等）。

Answer 1

幾個月前，我為芝加哥代碼營地2013匯總了一個演示項目 （ https://github.com/paaschpa/ordersDemo）。AppHarbor上 的示例站點似乎已關閉 （我讓AppHarbor站點正常工作，但我所有的產品configs位於GitHub存儲庫中。我永遠無法在GitHub和它們之間正確獲得config / settings），但我認為代碼類似於您的要求。 它使用AngularJS（可能不是最好的例子），/ api托管的帶ServiceStack的.NET MVC。 它還使用Twitter BootStrap，Redis Pub / Sub和SignalR ...可能在這個項目/示例中搗碎了太多東西。 如果可以安裝Redis（ https://github.com/dmajkic/redis/downloads ），並且在web.config文件中將redisUrl更改為localhost:6379 ，則應該可以使其在本地運行。

Answer 2

我在項目中使用ServiceStack + ASP.NET MVC + Angular。

一旦安裝了ServiceStack（使用nugget軟件包非常容易），就可以在服務中使用angular來調用ServiceStack Rest WS非常簡單：

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路由，因為我對此比較滿意。 所以我創建了一個BaseController發送ServiceStack用戶到每個視圖：

[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直接傳遞給角度控制器，則可以執行以下操作：

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

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

角度控制器中init（）方法的示例：

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

我簡化了所有示例，使其易於理解，但如果您需要更多說明，請告訴我

Answer 3

這是您要尋找的嗎？

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

Answer 4

SocialBootstrap項目包含一個不錯的完整堆棧設置，盡管它使用的不是斜角的ribs.js和underscore.js，這可能有助於通讀它。

https://github.com/ServiceStack/SocialBootstrapApi

盡管在此示例中，服務層與前端緊密耦合，因為它們都包含在同一項目中。 對於較大的SPA，我會嘗試避免這種情況。

Answer 5

我正在做一個SS + AngularJs + SignalR，我可以對你說，我對此並不后悔，就我個人而言，我覺得框架的目的只是為了使用插件和您的IoC（在我的情況下，我使用SimpleInjector ）。

我分開研究了angular和SS，因為angular的REST調用可以與后端無關，但是您仍然需要弄清楚諸如在前端和后端之間集成安全性，路由等問題。

您可以在razorRockstarts上找到一個使用SS + angularJs的小型演示，您也可以看看這篇文章以及其他內容 。

希望對您有所幫助