8

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

4

5 回答 5

8

几个月前，我为 Chicago Code Camp 2013整理了一个演示项目( 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 文件中，您应该能够让它在本地运行。

于 2013-09-05T23:08:16.357 回答
5

我在我的项目中使用 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 };
}

关于路由，在我的案例中，我使用 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;
};

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

于 2013-09-12T08:31:04.600 回答
2

这会是你要找的吗？

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

于 2013-09-04T19:17:18.670 回答
2

SocialBootstrap 项目包含一个体面的全栈设置，它使用了骨干.js 和 underscore.js，但不是有角度的——它可能有助于通读它。

https://github.com/ServiceStack/SocialBootstrapApi

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

于 2013-09-04T21:53:18.210 回答
2

我正在做一个 SS + AngularJs + SignalR，我可以对你说我对此并不后悔，我个人觉得这个框架非常直接，旨在仅使用插件和你的 IoC（在我的情况下，我使用 SimpleInjector ）。

我分别研究了 Angular 和 SS，因为 Angular 中的 REST 调用可能与后端无关，但您仍然需要弄清楚诸如在前端和后端之间集成安全性、路由等

你可以在razorRockstarts找到一个使用 SS + angularJs 的小演示，你可以看看这篇文章 和其他文章。

我希望这会有所帮助

于 2013-09-13T14:27:33.083 回答