AngularJS with ServiceStack/WebApi/MVC Actions

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

The SocialBootstrap project contains an decent full stack setup, it uses backbone.js & underscore.js not angular though - it may help to read through it.

https://github.com/ServiceStack/SocialBootstrapApi

Although, in this example the service layer is tightly coupled to the front-end as they are both included in the same project. This is something I would try and avoid for a larger SPA.

I'm doing a SS + AngularJs + SignalR and I can say to you I have no regret about it, personally I feel is very straight forward the framework aims to just the usage of the plugins and your IoC (in my case I use SimpleInjector).

I researched angular and SS separatelly since REST calls in angular can be BackEnd agnostic but you still need to figure it out things like integrate security between the front end and the back end, routing, etc

you can find a small demo at razorRockstarts which uses SS + angularJs you can take a look to this post and this other as well.

I hope that helps