Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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.

share|improve this question
1  
Why not to use regular REST service? – vittore Jul 13 at 7:47
1  
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 Jul 13 at 7:57
1  
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 Jul 13 at 11:30
1  
@frapontillo I totally understand how you feel. My PM insists to use Web Form. So I use Web form + AngularJS lol – maxisam Jul 13 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 Jul 13 at 17:17

1 Answer

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.

share|improve this answer
It is not only hacky, it IS REST service, just with bad payload. – vittore Jul 14 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 Jul 14 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 Jul 14 at 13:58

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.