AngularJS with ServiceStack/WebApi/MVC Actions

A few months back I put together a Demo project (https://github.com/paaschpa/ordersDemo) for Chicago Code Camp 2013. The sample site on AppHarbor seems to be down (I got the AppHarbor site working but all my 'production configs' are in the GitHub repo. I can never get the config/settings right between GitHub and them) but I think the code resembles what you're asking for. It uses AngularJS (probably not the best example of it), .NET MVC w/ServiceStack hosted at /api. It also uses Twitter BootStrap, Redis Pub/Sub and SignalR...probably smashed too much stuff into this project/example. If you can get Redis installed (https://github.com/dmajkic/redis/downloads) and you change the redisUrl to localhost:6379 in the web.config file you should be able to get it running locally.

I use ServiceStack + ASP.NET MVC + Angular in my project.

Once ServiceStack installed (pretty easy with nugget package), call ServiceStack Rest WS is very simple with angular in a service:

GetById: function (movieId) {    var url = root + 'api/movie/' + movieId;    var promise = $http({ method: 'GET', url: url }).then(function (response) {        return response.data;    });    return promise;}, ...

In ServiceStack I Use DTO and ViewModel like this :

#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

And to finish my service :

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

Concerning routing, in my cas I use ASP.NET MVC route because I am more comfortable with it.So I have created a BaseController sending ServiceStack User to each 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;    }

Next if you need to pass a ViewModel direcly to a angular Controller you can do this :

@model AddictLive.Core.ViewModel.Mobile.ViewModels.MovieViewModel@using Newtonsoft.Json<div ng-controller="MovieController" ng-init="init(@Html.Raw(JsonConvert.SerializeObject(Model)))">     ...</div>

Sample of init() method in the angular controller :

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

I simplified all my examples to make it easy to understand but if you need more explanation let me know

Would this be what you are looking for?

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