21

I've encountered what I believe to be a common scenario, in which I am using an MVC pattern (specifically ASP.NET's MVC framework) for a web application, with AngularJS on the front-end. My problem is that I have a particular value which is part of the model getting passed to my view, which I also want to make available to my Angular controller's $scope, ideally as soon as the controller is initialized.

How to do this is a question that has been asked and answered before. There's an obvious candidate for it: ngInit. However, at some point Angular updated their documentation with what appears to be a warning against this specific thought:

The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

The suggested alternative isn't very relevant.

Of course, there are other workarounds I can think of. The view could insert the value into an ngModel directive on a hidden input, for example. Or I could just plain ignore the warning and use ngInit anyway. But any that I can think of are either an uglier way of doing the same thing as ngInit, or clearly worse.

Ultimately the fact that what seems like the obvious solution to me is apparently the wrong one is probably an indicator that my mindset isn't in tune with how Angular is supposed to be done. So my question isn't "how do I deal with this scenario", instead it's:

  1. How am I supposed to deal with, or avoid, this scenario?
  2. Why am I not supposed to use ngInit?

A clarification, since from the first two comments this isn't clear: This is for a situation where some or most of the page is being served directly as the MVC view, with only some particular piece of functionality being provided by Angular. The data that I want to pass to my Angular controller is already passed to the view in the model. I don't want the Angular controller to then go and have to do its own get request to the server just to get the same parameter that's already available to the view in a different format.

6
  • usually, u use a webservice call to get the value & then assign it to a variable in your $scope
    – Foo L
    Commented Mar 7, 2014 at 23:56
  • If I understand correctly, you have a value created on the server, which you are trying to embed into your javascript, so that when your angular service requests data from the server, it includes this variable. Is that correct? Like passing a userId back to the server?
    – pedalpete
    Commented Mar 8, 2014 at 0:08
  • 1
    @pedalpete The idea is that the value from the server is already needed directly in the MVC view. This assumes I don't want Angular to have to do its own get request. This is more for a situation where Angular is only supposed to be used for, e.g., a particular part of my page rather than more of an SPA style where I'd assume that everything important on my page will have gone through my Angular controller. I'll update the question to make this clearer Commented Mar 8, 2014 at 0:27
  • Server-side render an AngularJS service to exposes the value, then inject that service into your controller. Commented Mar 8, 2014 at 1:23
  • @JoelSkrepnek That's an interesting answer! Do you have a link to any articles or documentation that support this as a good practice? Commented Mar 9, 2014 at 16:34

2 Answers 2

25

You should pass it from your server side controller to your AngularJS controller by using either a 'value' or 'constant' provider, as described here: https://docs.angularjs.org/guide/providers

For example, you could do something like the following:

<script>
    angular.module("hobbitModule").value("companionship", @Html.Raw(Model));
</script>

and then inject it in to your controller

var module = angular.module("hobbitModule");
module.controller("CompanionshipController", function($scope, companionship) {
    $scope.companions = companionship;
});

as described in this article: http://blog.mariusschulz.com/2014/03/25/bootstrapping-angularjs-applications-with-server-side-data-from-aspnet-mvc

If you think it may become more complicated that just a value, you could use a Service provider and inject that instead of the value provider.

1
  • This doesn't seem to be the exact problem these are trying to solve, but they do look simple and appropriate. Commented Sep 5, 2014 at 15:17
2

supposed that you have this model :
Model

public class Product
{
        public int Id { get; set; }
        public string Name { get; set; }
        public float Price { get; set; }
        public string Description { get; set; }
}

this way you can pass data from your controller into your view :
Controller

public string GetSerializedProduct()
{
    var products = new[] 
    { 
        new Product{Id=1,Name="product1",Price=4500,Description="description of this product"},
        new Product{Id=2,Name="product2",Price=500,Description="description of this product"},
        new Product{Id=3,Name="product3",Price=400,Description="description of this product"},
        new Product{Id=4,Name="product4",Price=5500,Description="description of this product"},
        new Product{Id=5,Name="product5",Price=66500,Description="description of this product"}
    };
    var settings = new JsonSerializerSettings { ContractResolver=new CamelCasePropertyNamesContractResolver()};
    return JsonConvert.SerializeObject(products,Formatting.None,settings);
    }
}

View :

@model string
<div class="container" ng-init="products = @Model">
    <div class="row">
        <div class="col-lg-12">
            <table class="table table-condensed table-hover">
                <tr>
                    <th>Id</th>
                    <th>Product Name</th>
                    <th>Price</th>
                    <th>Description</th>
                </tr>
                <tr ng-repeat="product in products">
                    <td>{{product.id}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.price}}</td>
                    <td>{{product.description}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>
3
  • 1
    Hi, thanks for the detail here. While I agree that this works, this seems to contradict the warning in the Angular documentation I linked to. As I mentioned in my question, I'm capable of coming up with something that works, I'm more interested in how it's -supposed- to be done. What Angular considers best practice. Commented Mar 9, 2014 at 16:33
  • Could someone explain how "products = @Model" and "@model string" works? I have never seen these before so I don't understand how the data is being passed. Also, how would you pass this object in ASP.net web Forms?
    – JerryKur
    Commented Apr 18, 2014 at 0:44
  • since your controller is being passed string data your model needs to be string type by define it with @model string Commented Apr 18, 2014 at 5:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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