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

I'm developing a user preferences page and I've decided to use AngularJS to control the state of the data.

What I would like to achieve is a page that shows the current user's settings and allows a user to edit them, cancel their changes, or save & submit changes if they so desire. I've binded my labels and my input controls to the model so that when a user modifies their email address, it is reflected across correctly.

I'm basing my work off this example #3 by the way: http://code.angularjs.org/1.0.0rc12/docs-1.0.0rc12/guide/forms

My question is related to the default values for the page. Since the model is defined as an object in Javascript. In the link above, default values can be set over here in $scope.master= {}; which works fine except that I'm using a framework to generate a static page and not retrieving an json object from my server. My pages are all written in embedded scala, so I access the values serverside. What is the best way to take the info retrieved serverside and turn into an object client side javascript can access?

share|improve this question

2 Answers

up vote 1 down vote accepted

You have a few choices. The way I would do it would be to push the initial state (through a WebSocket or something) to Angular as JSON, or have Angular pull it from the server through an HTTP call.

You could also perhaps render the page with ng-init tags to set the initial state, but this way seems weird to me.

<div ng-controller="FormController" ng-init="formData = {}">
  <form>
     <input ng-model="formData.input1" ng-init="formData.input1 = 'initialValue'>
  </form>
</div>
share|improve this answer
ng-init should work for me just fine. Eventually I'll be move everything over to use AJAX and retrieve the data via a separate HTTP call; we're just on a really tight schedule and don't want to complicate things. :) – sbilstein Jun 14 '12 at 15:03
I'm not sure the AngularJS docs recommend against using ng-init: docs.angularjs.org/guide/dev_guide.mvc.understanding_model They don't provide a reason but recommend to only use this for example apps and not in production. – sbilstein Jun 14 '12 at 21:45
up vote 1 down vote

I am using ASP.NET and Dapper-Dot-Net. I use the following techniques to get my data on to the page and then into Angular scope. It should be pretty transferable to your environment.

  1. Define a DataTransferObject class in the page on the server side and a public string called DtoJson to hold the serialized version of your class instance.

    private class DataTransferObject{
  public User User;
  public List<Project> Projects
}

public string DtoJson;

var dto=new DataTransferObject();
var userName="however you get a username";
dto.User=User.Get(userName);  // I already have a User class
var sql="select * from projects where user_name=:UserName";
var p=new DynamicParameters();
p.Add(":UserId", dto.User.ID);
dto.Projects=Project.Query<Project>(sql, p);  // returns a list of Project

// I use json.net to convert the Dto to json and expose it as a public variable
var DtoJson=Json.Convert(dto);  // approximate syntax but you get the idea

  2. On the client side I put a script tag at the head of the page and inject the DtoJson into it to get it into the global scope

    <script>var dto=<%=DtoJson%>;</script>

  3. At the bottom of my page I have a script src="pageName.js" which is my Angular controller file. Inside the controller I say

    $scope.dto=dto;
console.log($scope.dto);

  4. Now the json that was created on the server side is in my controller's scope and I can data bind to {{dto.User.FIRST_NAME}} and {{dto.Projects[0].ID}} ng-repeat="for p in dto.Projects" etc

I hope that that makes sense.

Peter

share|improve this answer
Thanks for the comment Peter. Explanation totally makes sense and was one of the ways I was considering doing it. The angular docs mention that using the ng-init solution above is not recommended for production apps, but fail to mention why. Your solution looks like an equally valid approach to me, although creating an inline variable was something I wanted to avoid (mostly for style purposes). Something similar should be easy enough to implement in the Scala/Play world. – sbilstein Jun 14 '12 at 21:46
The in-line variable is a bit ugly I agree. Maybe a better approach would be to create a service and inject it into the controller. – user1457174 Jul 5 '12 at 10:38

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.