CODEWITHSUNDEEP
c#asp.net-mvc-4angularjsservicestack
jeff
jeff

Reputation: 684

AngularJS with ServiceStack/WebApi/MVC Actions

I am new to AngularJS and want to use it for our new project based on ASPNET MVC. I want AngularJS to manage the views ( it will be hybrid SPA, some pages normal MVC generated views). But I am in fix to decide what should I choose at the server end. i.e. ServiceStack/WebApi/MVC Actions ? There are examples in the web for WebAPI and regular ASPNET MVC, but couldn't find any SS+Angular examples. Could you give me an example project with SS+Angular( how to manage routing, prevent the views( html files) from opening directly by the user etc).

Upvotes: 8

Views: 6182

Answers (5)

pedrommuller
pedrommuller

Reputation: 16066

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

Upvotes: 2

Vincenzo
Vincenzo

Reputation: 1811

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

Upvotes: 5

paaschpa
paaschpa

Reputation: 4816

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.

Upvotes: 8

David
David

Reputation: 8670

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.

Upvotes: 2

Silas
Silas

Reputation: 406

Would this be what you are looking for?

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

Upvotes: 2

Related Questions