AngularJS $Resource POST WebAPI 2 - angularjs

I'm trying to post bookData to my WebAPI2 service by using the "$resource" in AngularJS. This works fine when it gets a book from the BookService first, modify the book and post it to the BookService.
I'm looking for a way posting a book without getting a book from the BookService first.
First, i have created an REST-service in WebAPI2:
public IHttpActionResult Get([FromUri] string id)
public IHttpActionResult Post([FromBody] BookData bookData)
Second, in the controller i'm trying to get en post some bookdata. The BookService is injected in the Controller
var bookData;
var book = BookService.get({ id: 1 }, function()
{
bookData = book;
});
$scope.sendBook = function () {
bookData.Title = 'Test REST';
var book = new BookService(bookData);
book.$save();
}
I've tried the following, but it doesn't work
var bookData = {Title: 'Test REST'};
$scope.sendBook = function () {
var book = new BookService(bookData);
book.$save();
}

There are only some static data in it.
public class BookController : ApiController
{
[HttpGet]
public IHttpActionResult Get([FromUri] string id)
{
BookViewModel vm = new BookViewModel
{
Title = "TEST REST"
};
return Ok(vm);
}
[HttpPost]
public IHttpActionResult Post([FromBody] BookData bookData)
{
BookViewModel vm = new BookViewModel
{
Title = "TEST REST"
};
return Created(new Url(Request.RequestUri.ToString()), vm);
}
}

I've find a solution. Assign the bookData to $scope
Something like:
$scope.bookData = { Title: 'Some title' };

Related

Render AngularJs index.html in an ASP.NET Core MVC view

I'm currently working on migrating a web app with the following tech:
ASP.NET MVC
AngularJs
Gulp
Azure cloud service
to :
ASP.NET Core MVC
AngularJs
Webpack
Azure App service
The migrated app correctly bundle and serve AngularJs index.html to wwwroot.
Currently, I need to add two views to the ASP.NET Core MVC app and inject the index.html to these views.
I can't figure out how to :
Inject the index.html
Make one of the views as a startup view.
to finally have an URL pattern:
localhost/View1/#/angularJs-state
or
localhost/View2/#/angularJs-state
wwwroot :
Home :
public class BaseController : Controller
{
public IActionResult Index()
{
return View("portal");
}
}
First view :
public class PortalController : Controller
{
public IActionResult Index()
{
return View();
}
}
Startup.cs
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(name: "portal",
pattern: "Portal",
defaults: new { controller = "Portal", action = "Index" });
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Base}/{action=Index}/{id?}");
});
The first view is correctly displayed but without the view name in
the url .
Is it possible to render the index.html from wwwroot in the cshtml
view using #html.Partial ?
According to your description, if you want to render the html page in the view, I suggest you could write a custom render method in mvc and return the index file as the file result to the mvc view.
More details, you could refer to below codes:
1.Create render extension method:
public static class HtmlHelperViewExtensions
{
public static IHtmlContent RenderAction(this IHtmlHelper helper, string action, object parameters = null)
{
var controller = (string)helper.ViewContext.RouteData.Values["controller"];
return RenderAction(helper, action, controller, parameters);
}
public static IHtmlContent RenderAction(this IHtmlHelper helper, string action, string controller, object parameters = null)
{
var area = (string)helper.ViewContext.RouteData.Values["area"];
return RenderAction(helper, action, controller, area, parameters);
}
public static IHtmlContent RenderAction(this IHtmlHelper helper, string action, string controller, string area, object parameters = null)
{
if (action == null)
throw new ArgumentNullException(nameof(controller));
if (controller == null)
throw new ArgumentNullException(nameof(action));
var task = RenderActionAsync(helper, action, controller, area, parameters);
return task.Result;
}
private static async Task<IHtmlContent> RenderActionAsync(this IHtmlHelper helper, string action, string controller, string area, object parameters = null)
{
// fetching required services for invocation
var currentHttpContext = helper.ViewContext.HttpContext;
var httpContextFactory = GetServiceOrFail<IHttpContextFactory>(currentHttpContext);
var actionInvokerFactory = GetServiceOrFail<IActionInvokerFactory>(currentHttpContext);
var actionSelector = GetServiceOrFail<IActionDescriptorCollectionProvider>(currentHttpContext);
// creating new action invocation context
var routeData = new RouteData();
var routeParams = new RouteValueDictionary(parameters ?? new { });
var routeValues = new RouteValueDictionary(new { area, controller, action });
var newHttpContext = httpContextFactory.Create(currentHttpContext.Features);
newHttpContext.Response.Body = new MemoryStream();
foreach (var router in helper.ViewContext.RouteData.Routers)
routeData.PushState(router, null, null);
routeData.PushState(null, routeValues, null);
routeData.PushState(null, routeParams, null);
var actionDescriptor = actionSelector.ActionDescriptors.Items.First(i => i.RouteValues["Controller"] == controller && i.RouteValues["Action"] == action);
var actionContext = new ActionContext(newHttpContext, routeData, actionDescriptor);
// invoke action and retreive the response body
var invoker = actionInvokerFactory.CreateInvoker(actionContext);
string content = null;
await invoker.InvokeAsync().ContinueWith(task =>
{
if (task.IsFaulted)
{
content = task.Exception.Message;
}
else if (task.IsCompleted)
{
newHttpContext.Response.Body.Position = 0;
using (var reader = new StreamReader(newHttpContext.Response.Body))
content = reader.ReadToEnd();
}
});
return new HtmlString(content);
}
private static TService GetServiceOrFail<TService>(HttpContext httpContext)
{
if (httpContext == null)
throw new ArgumentNullException(nameof(httpContext));
var service = httpContext.RequestServices.GetService(typeof(TService));
if (service == null)
throw new InvalidOperationException($"Could not locate service: {nameof(TService)}");
return (TService)service;
}
}
2.Add controller method as below:
public IActionResult IndexFile()
{
return File("index.html", "text/html");
}
3.Add below codes into view:
#Html.RenderAction("IndexFile", "Yourcontrollername")

Passing multiple paramters to web api 2 from angularJs Controller

I am attempting to call an httpGet on a web api controller from my angular controller but nothing I've been able to do allows me to pass multiple parameters.
I have tried adding the parameters to the route, (route/{email}/{firstName}/{lastName}.
I can verify that the angular method, getCurrentAlumniInfo is getting called and is attempting to route to a controller. I have used Postman, with the following URI,
"localHost: PortNumber/api/alumni/currentAlumniInfo?Email=flintrock&FirstName=Fredf&LastName=Flintstone"
Here are the relevant snippets. First, WebApiConfig using attribute routing:
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
var jsonFormatter = config.Formatters.OfType<JsonMediaTypeFormatter>().First();
jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
}
}
Next my api controller
[RoutePrefix("api/Alumni")]
public class AlumniController : ApiController
{
private readonly AlumniRepository _repository;
private readonly AuthRepository _authRepository;
public AlumniController()
{
_repository = new AlumniRepository();
_authRepository=new AuthRepository();
}
[Route("alumniInfo")]
[HttpGet]
public IHttpActionResult GetAlumniInfo([FromUri]string email,string firstName, string lasttName)
{
return Ok("Success" + lasttName);
}
}
}
Lastly, the angular (v. 1)
var getCurrentAlumniInfo = function() {
var alumniData = alumniModel.buildAlumniMatchData();
var deferred = $q.defer();
//string email, string lastName,string middleName, string firstName
$http.get(serviceBase + 'api/alumni/alumniInfo',
{
params: {
Email: encodeURIComponent(alumniData.email),
FirstName: alumniData.firstName,
//MiddleName: alumniData.middleName,
LastName: alumniData.lastName
}
})
.then(function(response) {
deferred.resolve(response);
})
.catch(function(response) {
alert(response.statusCode + " error: " + response.status);
deferred.reject(response);
});
return deferred.promise;
};
For what it's worth, I'm using v. 4.5.2 of the framework and Visual Studio 2015.
Any help appreciated.
either you should change your get method to post and pass the parameter as model, so that you can receive the model as parameter of your API.
Service
$http.post(serviceBase + 'api/alumni/alumniInfo',
{
params: {
Email: encodeURIComponent(alumniData.email),
FirstName: alumniData.firstName,
//MiddleName: alumniData.middleName,
LastName: alumniData.lastName
}
})
.then(function(response) {
...
})
.catch(function(response) {
...
});
Model
public class RecieveModel
{
public string Email {get;set;}
public string FirstName {get;set;}
public string LastName{get;set;}
}
API
[Route("alumniInfo")]
[HttpPost]
public HttpResponseMessage GetAlumniInfo(ReceiveModel model)
{
return Request.CreateResponse(HttpStatusCode.OK);
}
OR
change your route config defaults: new { id = RouteParameter.Optional ,id1 = RouteParameter.Optional,id2 = RouteParameter.Optional}
);
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}/{id1}/{id2}",
defaults: new { id = RouteParameter.Optional ,id1 = RouteParameter.Optional,id2 = RouteParameter.Optional});
In case others land here looking to solve the issue, this won't help them -- unless they too have coded too late at night. The answer is in my code. I typed a parameter string lasttname with two t's. Yes, it was literally that easy and that stupid and I looked at it for an hour without realizing it. It was only seeing the question this morning that it stood out like two t's in 480 pt. font.
With attribute routing, literally all that is required is that the parameter names match the URI variable names. One could create a model and add the [FromUri] attribute to the parameter, but it isn't necessary in this case.
So, the controller can simply be
[Route("alumniInfo")]
[HttpGet]
public IHttpActionResult GetAlumniInfo(string email, string firstName, string lastName)
{
return Ok("Success" + lastName);
}

My angular frontend App can not send PUT request to my backend REST app

I have two web apps running on a single tomcat instance. One of them is Spring MVC Rest app which has basic structure, a rest controller, a service layer and DAO layer which is interacting with postgresql .
Below you can see my RestController
package com.hizir.acil.main.controller;
import com.hizir.acil.main.model.Donor;
import com.hizir.acil.main.service.DonorService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.MessageSource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.ui.ModelMap;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.util.UriComponentsBuilder;
import org.joda.time.*;
import javax.validation.Valid;
import java.util.List;
/**
* Created by TTTDEMIRCI on 12/29/2015.
*/
#RestController
#RequestMapping("/")
public class AppController {
#Autowired
DonorService donorService;
#Autowired
MessageSource messageSource;
/*
* This method will list all existing Donors in for JSP .
*/
#RequestMapping(value = { "/", "/listAllDonors" }, method = RequestMethod.GET)
public String listDonors(ModelMap model) {
List<Donor> donors = donorService.findAllDonors();
model.addAttribute("donors", donors);
return "alldonors";
}
/*
* This method will list all existing Donors in json format.
*/
#RequestMapping(value = { "/listjson" }, method = RequestMethod.GET, produces = "application/json")
public ResponseEntity<List<Donor>> listDonors() {
List<Donor> donors = donorService.findAllDonors();
if (donors.isEmpty()) {
return new ResponseEntity<List<Donor>>(HttpStatus.NO_CONTENT);
}
return new ResponseEntity<List<Donor>>(donors, HttpStatus.OK);
}
/*
* This method will provide the medium to add a new donor.
*/
#RequestMapping(value = { "/new" }, method = RequestMethod.GET)
public String newDonor(ModelMap model) {
Donor donor = new Donor();
model.addAttribute("donor", donor);
model.addAttribute("edit", false);
return "registration";
}
//-------------------Create a Donor--------------------------------------------------------
#RequestMapping(value = "/listjson", method = RequestMethod.POST)
public ResponseEntity<Void> createUser(#RequestBody Donor donor, UriComponentsBuilder ucBuilder) {
System.out.println("Creating Donor " + donor.getName());
// if (donorService.isUserExist(user)) {
// System.out.println("A User with name " + user.getUsername() + " already exist");
// return new ResponseEntity<Void>(HttpStatus.CONFLICT);
// }
donor.setCreationDate(new LocalDate());
donorService.saveDonor(donor);
System.out.println("donor created.............."+donor.getId());
HttpHeaders headers = new HttpHeaders();
headers.setLocation(ucBuilder.path("/listjson/{id}").buildAndExpand(donor.getId()).toUri());
return new ResponseEntity<Void>(headers, HttpStatus.CREATED);
}
//------------------- Update a donor --------------------------------------------------------
#RequestMapping( method = RequestMethod.PUT)
public ResponseEntity<Donor> updateUser(#PathVariable("id") int id, #RequestBody Donor donor) {
System.out.println("Updating donor " + id);
Donor currentDonor = donorService.findById(id);
// if (currentUser==null) {
// System.out.println("User with id " + id + " not found");
// return new ResponseEntity<User>(HttpStatus.NOT_FOUND);
// }
currentDonor.setName(donor.getName());
currentDonor.setSurname(donor.getSurname());
currentDonor.setBloodType(donor.getBloodType());
donorService.updateDonor(currentDonor);
return new ResponseEntity<Donor>(currentDonor, HttpStatus.OK);
}
/*
* This method will be called on form submission, handling POST request for
* saving donor in database. It also validates the user input
*/
#RequestMapping(value = { "/new" }, method = RequestMethod.POST)
public String saveDonor(#Valid Donor donor, BindingResult result,
ModelMap model) {
if (result.hasErrors()) {
return "registration";
}
donorService.saveDonor(donor);
model.addAttribute("success", "Donor " + donor.getName() + " registered successfully");
return "success";
}
/*
* This method will provide the medium to update an existing Donor.
*/
#RequestMapping(value = { "/edit-{id}-donor" }, method = RequestMethod.GET)
public String editDonor(#PathVariable int id, ModelMap model) {
Donor donor= donorService.findById(id);
model.addAttribute("donor", donor);
model.addAttribute("edit", true);
return "registration";
}
/*
* This method will be called on form submission, handling POST request for
* updating donor in database. It also validates the user input
*/
#RequestMapping(value = { "/edit-{id}-donor" }, method = RequestMethod.POST)
public String updateDonor(#Valid Donor donor, BindingResult result,
ModelMap model, #PathVariable int id) {
if (result.hasErrors()) {
return "registration";
}
// if(!service.isEmployeeSsnUnique(employee.getId(), employee.getSsn())){
// FieldError ssnError =new FieldError("employee","ssn",messageSource.getMessage("non.unique.ssn", new String[]{employee.getSsn()}, Locale.getDefault()));
// result.addError(ssnError);
// return "registration";
// }
donorService.updateDonor(donor);
model.addAttribute("success", "Donor " + donor.getName() + " updated successfully");
return "success";
}
/*
* This method will delete a donor by it's id value.
*/
#RequestMapping(value = { "/delete-{id}-donor" }, method = RequestMethod.GET)
public String deleteDonorById(#PathVariable int id) {
donorService.deleteDonorById(id);
return "redirect:/listAllDonors";
}
}
As you can see there are several request mappings. Listing donors and creating donor is working fine with frontend app and I can create new donor and list them. But when I try to update any request is not accessing this rest controller method.
Below is my angular service of frontedn app.
App.factory('User', [
'$resource',
function($resource) {
return $resource(
'http://localhost:8080/HizirAcilBackendApp/listjson/:id', {id: '#id'}, {
update : {
method : 'PUT'
}
},
{
stripTrailingSlashes: false
});
} ]);
and below is my angular controller
/**
*
*/
'use strict';
App.controller('UserController', ['$scope', 'User', function($scope, User) {
var self = this;
self.user= new User();
self.users=[];
self.fetchAllUsers = function(){
self.users = User.query();
};
self.createUser = function(){
self.user.$save(function(){
self.fetchAllUsers();
});
};
self.updateUser = function(){
self.user.$update(function(){
self.fetchAllUsers();
});
};
self.deleteUser = function(identity){
var user = User.get({id:identity}, function() {
user.$delete(function(){
console.log('Deleting user with id ', identity);
self.fetchAllUsers();
});
});
};
self.fetchAllUsers();
self.submit = function() {
if(self.user.id==null){
console.log('Saving New User', self.user);
self.createUser();
}else{
console.log('Upddating user with id ', self.user.id);
self.updateUser();
console.log('User updated with id ', self.user.id);
}
self.reset();
};
self.edit = function(id){
console.log('id to be edited', id);
for(var i = 0; i < self.users.length; i++){
if(self.users[i].id === id) {
self.user = angular.copy(self.users[i]);
break;
}
}
};
self.remove = function(id){
console.log('id to be deleted', id);
if(self.user.id === id) {//If it is the one shown on screen, reset screen
self.reset();
}
self.deleteUser(id);
};
self.reset = function(){
self.user= new User();
$scope.myForm.$setPristine(); //reset Form
};
}]);
I am trying to learn Angular,rest and spring all in one place and I think I have made a good progress but I stuck with this PUT request problem.
Any help and comment would be appreciated.
Regards
Turkmen
Looks like your RequestMapping is wrong, you did not specify a path there :
#RequestMapping( method = RequestMethod.PUT)
You need to set a apth and add {id} so spring can map it as #PathVariable
#RequestMapping(value = "/listjson/{id}", method = RequestMethod.POST)

Value not added while $http.post() using AngularJS consuming a Spring REST API

I have a simple spring REST API as follow :
2 Entities (Product, Category)
#Entity
public class Category implements Serializable {
#Id
#GeneratedValue(strategy = GenerationType.IDENTITY)
private Long idCat;
private String nameCat;
#OneToOne // I want is as a one to one relation
#JoinColumn(name = "product_id")
private Product product;
// setters getters etc
}
#Entity
public class Product implements Serializable {
#Id
#GeneratedValue(strategy = GenerationType.IDENTITY)
private Long idProduct;
private String nameProduct;
#OneToOne(mappedBy = "product")
private Category category;
// setters getters etc
}
I have 2 RestController :
Product :
#RestController
public class ProductRestService {
#Autowired
ProductBusiness productBusiness; // Spring DATA Repo
#RequestMapping(value="/products", method = RequestMethod.POST)
public Ferme addProduct(#RequestBody Product p) {
return productBusiness.addProduct(p);
}
}
Category :
#RestController
public class CategoryRestService {
#Autowired
CategoryBusiness categoryBusiness; // Spring DATA Repo
#RequestMapping(value="/categories", method = RequestMethod.POST)
public Ferme addCategory(#RequestBody Category c) {
return categoryBusiness.addCategory(c);
}
}
And here is my AngularJS code which consumes the REST API :
var app = angular.module("myApp", []);
app.controller("myController", function($scope, $http) {
$scope.product = null;
$scope.addedProduct = null;
$scope.category = {"product":$scope.addedProduct, "nameCat":null};
$scope.saveProduct = function() {
$http.post("/products", $scope.product)
.then(function(response){
$scope.addedProduct = response.data;
}, function(err){
console.log(err);
});
};
$scope.saveCat = function() {
$http.post("/categories", $scope.category)
.then(function(response){
$scope.addedCategory = response.data;
}, function(err){
console.log(err);
});
};
});
I call the methods saveProduct() and then saveCategory() by using a ng-click in an html file, the first method works and the value of the returned Product is saved in the $scope.addedProduct, then I click to save the Category it works too but the product doesn't get saved in the category even if i'm using $scope.category = {"product":$scope.addedProduct, "nameCat":null}; then I pass the category object here $http.post("/categories", $scope.category){.. which means that the previously addedProduct should be saved inside the $scope.category but it's not the case, a value NULL is added in the category table in the database instead of the actual product_id which I verified it exists in $scope.addedProduct. I don't know how to solve this. Sorry if it seems a bit unclear, and I can provide more info if needed.
Thank you in advance.
EDIT :
//
Try declaring $scope.category = {"product":$scope.addedProduct, "nameCat":null}; as
$scope.category = {product:$scope.addedProduct, "nameCat":null};
and then instead updating $scope.addedProduct = response.data; update with
$scope.category.product = response.data;
in your code addedProduct is nowhere backtracking where its assigned and its not going to work.
Solved, I had to put $scope.category = {"product":$scope.addedProduct, "nameCat":null}; inside the saveProduct method.

Custom Route using Attribute Routing in WebApi

I'm working on retrieving list of Movie Details from DB using WebAPi. I've http verbs and it does work as normal. I've a scenario where i've to get records based on categories like Title, Date, Rating
WebConfig:
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional, action = "ActionName" }
Controller :
[HttpGet]
[GET("api/GetMovieByCategory/{movieData}")]
public IEnumerable<MovieData> GetMovieByCategory(MovieData movieData)
{
IEnumerable<MovieData> movieDataByCat = null;
string[] paramCast;
if(movieData.Cast.Count()!=0)
paramCast = movieData.Cast;
IEnumerable<MovieData> GetAllMovies = null;
GetAllMovies = repo.GetAll();`
if (movieData.Cast == null || movieData.Cast.Count() == 0)
{
movieDataByCat = from data in GetAllMovies
where (data.Classification == (movieData.Classification == null ? string.Empty : movieData.Classification) ||
data.Genre == (movieData.Genre == null ? string.Empty : movieData.Genre) ||
data.Rating == movieData.Rating ||
data.ReleaseDate == movieData.ReleaseDate ||
data.Title == (movieData.Title == null ? string.Empty : movieData.Title))
select data;
}
return movieDataByCat;
}
Angular Service :
//GetByCategory
this.getbyCat = function (Movie) {
return $http.get("/api/values/GetMovieByCategory/" + Movie);
};
when i try to execute, i'm getting an exception as follows,
Remote Address:[::1]:50948
Request URL:http://localhost:50948/api/values/GetMovieByCategory/[object%20Object]
Request Method:GET
Status Code:404 Not Found
I've no idea how to overcome this and get it resolved. I'm in beginner level. Please help.
Rest of all verbs (get,put,post) are working fine.
Note : I've installed NugetPackage AttributeRouting.Web.Http; for Route.
Update 1 :
Contoller.js :
$scope.srchbycat = function () {
var Movie = {
_title:"",
_genre: "",
_classification:"",
_releaseDate: "",
_rating: "",
_cast: ""
};
Movie = {
_title: $scope.txttitle,
_genre: $scope.txtGenre,
_classification: $scope.txtClassification,
_releaseDate: $scope.txtDate,
_rating: $scope.user.txtRating,
_cast: $scope.txtCast
};
var promisePost = MyService.getbyCat(Movie);
Recent Error :
Remote Address:[::1]:50948
Request URL:http://localhost:50948/api/values/GetMovieByCategory/?_genre=sdf
Request Method:GET
Status Code:400 Bad Request
In the Angular Service, instead of appending the Movie object, pass it as parameter.
eg.
//GetByCategory
this.getbyCat = function (Movie) {
return $http.get("/api/values/GetMovieByCategory/", { params: Movie});
};
This will make the HTTP get with the the properties as url parameters.
And I dont think there is a need for the {movieData} parameter in the Route defined, since WebApi will automatically Serialize the url parameters to the object MovieData
eg.
index.js
angular.module('index.services', []).
factory('indexService', function ($http) {
var api = 'api/values/GetData';
var indexAPI = {};
indexAPI.getData = function (params) {
return $http.get(api, { params: params });
}
return indexAPI;
});
angular.module('index.controllers', ['index.services']).
controller('indexController', function ($scope, indexService) {
$scope.getData = function () {
var params = {
name: 'test',
age: '10'
};
$scope.errorOccured = false;
indexService.getData(params).then(function (response) {
$scope.data = response.data;
}, function (response) {
$scope.errorOccured = true;
});
}
});
angular.module('index', ['index.controllers']);
Index.cshtml
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js"></script>
<script src="~/Scripts/app/index.js"></script>
<div ng-app="index" ng-controller="indexController">
<button ng-click="getData()">Get Data</button>
<div ng-if="errorOccured==true">Error Occured</div>
<div ng-repeat="item in data">
<div>{{item}}</div>
</div>
</div>
DataRequestModel.cs
public class DataRequestModel
{
public string Name { get; set; }
public string Age { get; set; }
}
ValuesController.cs
public class ValuesController : ApiController
{
[HttpGet]
public IEnumerable<string> GetData([FromUri]DataRequestModel dataRequest)
{
return new string[] { dataRequest.Name, dataRequest.Age.ToString() };
}
}

Resources