AngularJS с ServiceStack/WebApi/MVC Действия

Question

Я новичок в AngularJS и хочу использовать его для нашего нового проекта на основе ASPNET MVC. Я хочу, чтобы AngularJS управлял представлениями (это будет гибридный SPA, некоторые страницы с обычным MVC-просмотром). Но я вправе решить, что выбрать на сервере. т. е. действия ServiceStack/WebApi/MVC? В Интернете есть примеры для WebAPI и обычного ASPNET MVC, но не удалось найти SS + Угловые примеры. Не могли бы вы дать мне пример проекта с SS + Angular (как управлять маршрутизацией, запрещать открывать представления (html-файлы) непосредственно пользователем и т. Д.).

Answer 1

Несколько месяцев назад я собрал Demo project (https://github.com/paaschpa/ordersDemo) для Chicago Code Camp 2013 Сайт образца на AppHarbor, кажется вниз (я получил сайт AppHarbor работает, но все мои «производственные конфиги» находятся в GitHub repo. Я никогда не могу получить конфигурацию/настройки прямо между 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

Это то, что вы ищете?

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

Answer 3

Проект SocialBootstrap содержит приличные полные настройки стеки, он использует Backbone.js & underscore.js не угловые, хотя - это может помочь прочитать его.

https://github.com/ServiceStack/SocialBootstrapApi

Хотя, в этом примере уровень службы тесно связан с передним концом, как они оба включены в том же проекте. Это то, что я постараюсь избежать и для большего SPA.

Answer 4

Я использую ServiceStack + ASP.NET MVC + Angular в моем проекте.

После ServiceStack установлен (довольно легко с пакетом самородка), вызовите 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 direcly на угловой контроллер вы можете сделать это:

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

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

Образец инициализации (метод) в угловом контроллере:

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

Я упростил все мои примеры, чтобы сделать его легко понять, но если вам нужно больше объяснений, дайте мне знать

Answer 5

Я делаю SS + AngularJs + SignalR, и я могу сказать вам, что я не жалею об этом, лично я чувствую, что очень прямо вперед, рамки нацелены только на использование плагинов и вашего IoC (в моем я использую SimpleInjector).

Я исследовал угловые и SS separatelly так REST вызовов в угловой можно BACKEND агностик, но вам все еще нужно, чтобы понять это такие вещи, как интегрировать безопасность между передним концом и задним концом, маршрутизацией и т.д.

вы можете найти небольшая демонстрация на razorRockstarts, которая использует SS + angularJs, вы можете взглянуть на это post и на этот other.

Я надеюсь, что это поможет