AngularJS and ASP.NET MVC integration and bootstrapping

Question

I'm writing a web application that will mainly use AngularJS for its modularity and testability and ASP.NET MVC server side technologies for model validation.

The idea is to load PartialViews in ng-views in order to asynchronously load only specific logic parts. So the question is: how to better pass server-side objects to AngularJS controllers? A silly hack that comes to mind is to print things in the PartialView such as:

window.myValue = 42;

and then get it back from the controller with the $window service injected:

$scope.myValue = $window.myValue

This is not feasible, though, as ng-view loadings strip out every <script> tag before inserting the partial content into the DOM.

I have noticed that there is the ng-init directive, should I rely on that one alone? Generally speaking, what are the best practices for making these two parts work with each other?

Thanks.

I know what you mean, and I completely agree with you. The project manager is pushing towards this kind of mixed approach and, as much as I explicitly disagreed with him and iterated about how south things can go, that's the way it has to be. — frapontillo, CommentedJul 13, 2013 at 7:57
I think it can be valuable to be able to render your templates with razor etc on the first request, but still have a restful service for your data shoveling. This way you have the power of asp.net on your templates? I don't see what's wrong with initializing your views with ng-init. That's what it is for. I've used that approach a couple of times with success. — marko, CommentedJul 13, 2013 at 11:30
@frapontillo I totally understand how you feel. My PM insists to use Web Form. So I use Web form + AngularJS lol — maxisam, CommentedJul 13, 2013 at 16:28
if your application is a Single Page Application (SPA) then its really good to choose angularJS. but I really dint find the good sample application that combines with asp.net mvc . But in my thought angularJS has lot of features including major features "directives" — Chandu, CommentedJul 13, 2013 at 17:17

lucuma · Accepted Answer · 2013-07-13 21:55:53Z

If you are unable to use a REST service (best option) you can easily do exactly what you suggest in your question but perhaps in more modular way. You can encode your view's model and place it in a global variable and then have a service that pulls this out:

Here is an example:

<body ng-controller="MainCtrl"> <div>ID: {{data.id}}</div> <div>Name: {{data.name}}</div> <script type='text/javascript'> // mystuff = @Html.Raw(Json.Encode(Model)); Encode the model to json mystuff = { id: 1, name: 'the name'}; </script> </body> app.controller('MainCtrl', function($scope, DataService) { $scope.data = DataService.getData('mystuff'); }); app.factory('DataService', function($window) { var service = {} service.getData = function(data) { if ($window[data] !== undefined) return $window[data]; else return undefined; } return service; });

Demo: http://plnkr.co/edit/jqm2uT3kbDm2U30MCf48?p=preview

You'd might want to create a standardized model that you use in all of your pages. This is a bit hacky and a REST service is your best option as others have stated.

It is not only hacky, it IS REST service, just with bad payload. — vittore, CommentedJul 14, 2013 at 4:00
This is a no go, as I said in my question I can't include any script tag, as they are stripped out from the AngularJS ng-view rendering engine. — frapontillo, CommentedJul 14, 2013 at 7:43
it is very hacky as I stated but if you don't want to use a Rest service than you start limiting options. If you include jquery in the project you should be able to include scripts in your partials. — lucuma, CommentedJul 14, 2013 at 13:58

frapontillo · Accepted Answer · 2013-10-07 11:48:40Z

I ended up using the ng-init directive.

Luckily, I got to restructure the Web application and go for a single page, client-side, application based on Web services only.

Collectives™ on Stack Overflow

AngularJS and ASP.NET MVC integration and bootstrapping

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related