AngularJS and embedded framework html

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?

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>

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