AngularJS и embedded framework html

Question

Я разрабатываю страницу настроек пользователя, и я решил использовать AngularJS для управления состоянием данных.

То, что я хотел бы получить, - это страница, показывающая настройки текущего пользователя и позволяющая пользователю редактировать их, отменять их изменения или сохранять &, чтобы отправить изменения, если они того пожелают. Я привязал свои ярлыки и элементы ввода к модели, чтобы, когда пользователь изменяет свой адрес электронной почты, он отображается правильно.

Я основывая свою работу с этого примера № 3, кстати: http://code.angularjs.org/1.0.0rc12/docs-1.0.0rc12/guide/forms

Мой вопрос связан с использованием значений по умолчанию для страницы. Поскольку модель определена как объект в Javascript. В приведенной выше ссылке значения по умолчанию можно установить здесь в $scope.master= {};, который отлично работает, за исключением того, что я использую фреймворк для создания статической страницы и не извлекаю объект json с моего сервера. Мои страницы написаны во встроенной scala, поэтому я обращаюсь к значениям serveride. Каков наилучший способ получить информацию, полученную на сервере, и превратиться в объектную клиентскую сторону, к которой может обращаться javascript?

Answer 1

У вас есть несколько вариантов. То, как я буду делать это, будет толкать начальное состояние (через WebSocket или что-то еще) на Angular как JSON или иметь Угловое вытягивание его с сервера через HTTP-вызов.

Возможно, вы также можете сделать страницу с тегами ng-init, чтобы установить начальное состояние, но этот способ кажется мне странным.

<div ng-controller="FormController" ng-init="formData = {}"> 
    <form> 
    <input ng-model="formData.input1" ng-init="formData.input1 = 'initialValue'> 
    </form> 
</div> 

Answer 2

Я использую ASP.NET и Dapper-Dot-Net. Я использую следующие методы, чтобы получить мои данные на странице, а затем в Угловую область. Он должен быть достаточно переносимым для вашей среды.

1. Определение класса DataTransferObject на странице на стороне сервера и публичная строка называется DtoJson провести последовательную версию вашего экземпляра класса.

   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. На стороне клиента я ставлю тег сценария в голове страницы и ввести DtoJson в него, чтобы получить его в глобальную область видимости

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

3. В нижней части моей страницы У меня есть сценарий src = "pageName.js", который является моим файлом с угловым контроллером. Внутри контроллера я говорю

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

4. Теперь JSON, который был создан на стороне сервера находится в области видимости моего контроллера, и я могу данные связываются с {{dto.User.FIRST_NAME}} и {{dto.Projects [ 0] .ID}} ng-repeat = "для p в dto.Projects" и т. Д.

Я надеюсь, что это имеет смысл.

Peter