Question

我是AngularJS的新手，想把它用于我们基于ASPNET MVC的新项目。我希望AngularJS管理视图（它将是混合SPA，一些页面正常MVC生成的视图）。但我正在努力决定我应该在服务器端选择什么。即ServiceStack / WebApi / MVC行动？ Web上有WebAPI和常规ASPNET MVC的例子，但找不到任何SS + Angular示例。你能给我一个SS + Angular的示例项目（如何管理路由，防止用户直接打开视图（html文件）等。）

Answer 1

几个月前，我为芝加哥Code Code Camp安排了一个Demo project（https://github.com/paaschpa/ordersDemo）。 ~~AppHarbor上的示例网站似乎已经停止~~（我得到了AppHarbor网站工作但我所有的'生产配置'都在GitHub回购中。我永远无法在GitHub和它们之间获得配置/设置）但我认为代码类似于你所要求的。它使用AngularJS（可能不是最好的例子），.NET MVC w / ServiceStack托管在/ api。它还使用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 };
}

关于路由，在我的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;
};

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

Answer 3

这会是你想要的吗？

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

Answer 4

SocialBootstrap项目包含一个不错的完整堆栈设置，它使用backbone.js＆amp;虽然undercore.js没有棱角分明 - 它可能有助于阅读它。

https://github.com/ServiceStack/SocialBootstrapApi

尽管在此示例中，服务层与前端紧密耦合，因为它们都包含在同一项目中。对于更大的SPA，我会尝试避免这种情况。

Answer 5

我正在做一个SS + AngularJs + SignalR，我可以对你说我对它没有任何遗憾，我个人认为非常直接的框架旨在使用插件和你的IoC（在我的情况下）我使用SimpleInjector）。

我单独研究了角度和SS，因为角度中的REST调用可以是BackEnd不可知的，但你仍需要弄清楚诸如前端和后端之间的集成安全性，路由等等。

您可以在razorRockstarts找到使用SS + angularJs的小型演示，您可以查看此post和此other。

我希望有帮助

AngularJS与ServiceStack / WebApi / MVC操作

5 个答案: