MVC4 Web API Service & MVC4 AngularJS Get?

18 views

Skip to first unread message

Kevin Snyder

unread,

Apr 14, 2014, 1:54:16 PM4/14/14

to ang...@googlegroups.com

Just now breaking into AngularJS and MVC4. My problem is not being able to return any data from our local Intranet 2012 Server web api service. Also, the project does not error when running in browser. It just does not display any data. Help!

I have a working test service on our local 2012 server which returns JSON like so:

192.168.1.11:8080/api/values

[{"ID":1,"Name":"sankar","Address":"cuttack","DOB":"1983-01-22T00:00:00"},{"ID":3,"Name":"My Test Name","Address":"My Test Address","DOB":"1980-01-01T00:00:00"}]

I used Nuget to download and install the latest AngularJS in this new 'empty] mvc 4 project.

I'm using VS2012 and MVC project with the following code to pull a simple list from the local server like so:

[_Layout.cshtml]
<!DOCTYPE html>
<html lang="en" data-ng-app="">
<head>
<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
 <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/ValuesController.js"></script>
</head>
<body>
    @RenderBody()
</body>
</html>


[Index.cshtml]
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/ValuesController.js"></script>

<div data-ng-controller="ValuesController">

    <div class="row">
        <h2>Projects and its Tasks</h2>
        <p>Number of Projects : {{ data.length }}</p>
    </div> 

    <div data-ng-repeat="d in data">
        
        <p>Name : {{d.Name}}</p>
    </div>

</div>


I have one ValuesController in this directory (../scripts/ValuesController.js) like so:

function ValuesController($scope, $http)
{
    $scope.length = 0;
    $scope.data = [];

    $http.get("192.168.1.11:8080/api/values")
       .then(
           function (result)
           {               
               angular.copy(result.data, $scope.data);
           },
           function ()
           {
               //handle error
           }
       );




}

Reply all

Reply to author

Forward

0 new messages