Модель использования данных AngularJS

Question

Я новичок в angularjs, и в своем приложении я делаю вызов API REST и возвращаемый ответ сохраняется как объект модели. По моему мнению, я создал отдельный объект модели представления, поскольку ответ от API не может быть таким, как он используется в пользовательском интерфейсе.

Это правильный подход? Обратите внимание, что я использую две разные модели -> Один получает данные с сервера, а другой используется в качестве модели подбора интерфейса. Это похоже на бэк-компонент и объекты DAO в Java-инфраструктурах.

Просьба сообщить, подходит ли этот подход или его следует изменить. Если да, то как?

Update проиллюстрировали вопрос в http://jsfiddle.net/LGEKX/

function mycontroller($scope){ 
//The view model is populated by a seperate method 
var viewmodel = populateViewModel(); 
$scope.viewmodel = viewmodel; 
} 

function populateViewModel(){ 
//Call service to update local model 
var backendModel = serviceCall(); 
//Invoke conversion service 
var converteModel = convertBackEndModel(backendModel); 
} 

function serviceCall(){ 
//Service method calls server side API and the data returned is returned in success  callback 
$http({method: 'GET', url: '/someUrl'}). 
    success(function(data, status, headers, config) { 
    return data; 
}). 
error(function(data, status, headers, config) { 
    ... 
    }); 

} 

function convertBackEndModel(data){ 
    //This takes the data returned from API call as input and creates a view model 
    //which will be used for angularjs view (in HTML) 
var viewModel = {}; 
viewModel.name = backendModel.backendName; 
//Though this is simple, actual code has lots of logic which basically converts one JSON structure to another 
} 

и в моем HTML

<div ng-app> 
<div ng-controller="mycontroller"> 
    <!-- Binding to viewmodel from the HTML--> 
    <div ng-model="viewmodel.name"></div> 
</div> 

Answer 1

Вот простой шаблон с помощью $ HTTP, чтобы сделать вызов сервер, а затем html для привязки к переменной области

$http({ 
       url: "http://localhost/people/1" 
      }).success(function (data, status, headers, config) { 
       if (data) { 
        $scope.person = data; 
       } 
      }); 



<div>{{person.firstName}}</div> <!-- one way --> 
<input ng-model='person.firstName' /> <!-- two way --> 

Единственная причина, я думаю, что вы, возможно, потребуется отдельный DTO есть, если GET и PUT службы используют различные классы, в этом случае вам нужно будет массировать данные.