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

几个月前,我为芝加哥Code Camp 2013制作了一个Demo项目(https://github.com/paaschpa/ordersDemo).AppHarbor上的示例网站似乎已经关闭(我的AppHarbor网站正在运行,但我的所有'生产configs'在GitHub回购中.我永远无法在GitHub和它们之间获得配置/设置)但我认为代码类似于你所要求的.它使用AngularJS(可能不是最好的例子),.NET MVC w/ServiceStack托管在/ api.它还使用Twitter BootStrap,Redis Pub/Sub和SignalR ...可能会在这个项目/示例中粉碎太多东西.如果您可以安装Redis(https://github.com/dmajkic/redis/downloads)并将其更改redisUrl为localhost:6379 在web.config文件中,您应该能够在本地运行它.

Answer 2

我在我的项目中使用ServiceStack + ASP.NET MVC + Angular.

一旦安装了ServiceStack(使用nugget包很容易),调用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 };
}

关于路由,在我的cas中我使用ASP.NET MVC路由因为我对它更熟悉.所以我创建了一个BaseController,将ServiceStack用户发送到每个View:

[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;
};

我简化了所有示例以使其易于理解,但如果您需要更多解释,请告诉我