针对单页面应用程序进行休息服务的锻炼

Question

我只是Angularjs的初学者。我一直在尝试使用angularjs来使用WebApi服务。我正在关注this

1：http://weblogs.asp.net/dwahlin/using-an-angularjs-factory-to-interact-with-a-restful-service文档。关于工厂和服务的使用已经清楚地记录在案。我想执行crud操作并且我遵循相同的方式，但我甚至没有获得Api控制器中调用的方法，我如何才能在视图中列出数据？

我这样做了：我的工厂在index.cshtml中定义

在主视图中，即。 Index.cshtml

@{
    ViewBag.Title = "Index";
}
<style>
    .container {
        float: left;
        width: 100%;
    }
</style>
<script src="~/Scripts/angular.min.js"></script>

<h2>Practising Angular</h2>
<a href="#/">List</a>
<a href="#/Edit">Edit</a>

<div ng-app="demoApp">
    <div class="container">
        <div ng-view=""></div>
    </div>
</div>


<script>
    var demoApp = angular.module('demoApp', []);

    demoApp.config(function ($routeProvider) {
        $routeProvider.when('/', { controller: 'SimpleController', templateUrl: 'Home/List' })
                      .when('/Edit', { controller: 'SimpleController', templateUrl: 'Home/Edit' })
                      .otherwise({ redirectTo: '/' });
    });



    demoApp.factory('dataFactory', ['$http', function ($http) {
        var urlBase = '/api/Customer';
        var dataFactory = {};
        dataFactory.getCustomers = function () {
            return $http.get(urlBase);
        };
        dataFactory.getCustomer = function (id) {
            return $http.get(urlBase + '/' + id);
        };
        return dataFactory;
    }]);



    demoApp.controller('customersController', ['$scope', 'dataFactory', function ($scope, dataFactory) {

        $scope.status;
        $scope.customers;
        getCustomers();

        function getCustomers() {
            dataFactory.getCustomers()
                .success(function (custs) {
                    $scope.customers = custs;
                })
                .error(function (error) {
                    $scope.status = 'Unable to load customer data: ' + error.message;
                });
        }



    }]);

</script>

我有这个控制器默认运行，因为它是一个MVC 4.0项目和＆＃34; Home Controller＆＃34;和＆＃34;索引＆＃34;在路线中定义。

namespace Routing_Angular.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult List()
        {
            return PartialView();
        }
        public ActionResult Edit()
        {
            return PartialView();
        }
    }
}

List和Edit Action方法作为partialviews返回，因为它们将作为视图以角度js呈现数据。

所以，这就是我在两个部分视图中所拥有的......

List.cshtml

@{
    ViewBag.Title = "List";
}

<h2>Listing the users in order </h2>

<div class="container">
    Name:&nbsp;<input type="text" ng-model="filter.name" />
    <ul>
        <li ng-repeat="objCust in customers  | filter:filter.name">{{objCust.name }}-{{objCust.city}}
        </li>
    </ul>
    Customer Name:<br />
    <input type="text" ng-model="newCustomer.name" /><br />
    Customer city:<br />
    <input type="text" ng-model="newCustomer.city" /><br />
    <button ng-click="addCustomer()">Add customer</button>
</div>




Edit.cshtml
@{
    ViewBag.Title = "Edit";
}

<h2>Edit  the particular user. Things are under construction</h2>


<h2>Listing the users in order </h2>

<div class="container">
    Name:&nbsp;<input type="text" ng-model="city" />
    <ul>
        <li ng-repeat="objCust in customers | filter:city">{{objCust.name }}-{{objCust.city}}
        </li>
    </ul>

</div>

这是在index.cshtml中从Factory调用的Api控制器/服务。但没有一种方法被调用。如何从工厂对象获取数据将显示在视图？

中

ApiController

namespace Routing_Angular.Controllers
{
    public class CustomerController : ApiController
    {
        //
        // GET: /Customer/
        public HttpResponseMessage Get()
        {
            CustomerService ObjService = new CustomerService();
            var Clients = ObjService.GetClients();
            if (Clients.Count < 1) throw new HttpResponseException(HttpStatusCode.NotFound);
            return Request.CreateResponse<IEnumerable<tblreferralService>>(HttpStatusCode.OK, Clients);
        }

        // GET api/customers/5
        public HttpResponseMessage Get(int id)
        {
            CustomerService ObjService = new CustomerService();
            var Client = ObjService.GetClient(id);
            if (Client == null) throw new HttpResponseException(HttpStatusCode.NotFound);
            return Request.CreateResponse<tblreferralService>(HttpStatusCode.OK, Client);
        }

    }
}

下面我附上项目结构图片。这只是一个基本结构。