Question

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?

Answer 1

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>