Use Angular js API with ASP.net webForms

Question

I am using angular js with Asp.net webforms. I want to retrieve data from database using angular js API. All I have seen on google or any tutorial , uses angular js API's with Asp.net MVC .

My question is: Can we use angular js API with Asp.net web Forms?

If yes, then method will be the same as in Asp.net MVC?

Further I know angular js is for SPA(single page app) and it has Models views and controllers.

Solution 1

Yes, you could.

But I really really don't recommend it. It might be extremely hard to ensure they are not stepping in each other toes, because they both work by enhancing the HTML.

My recommendation is that you start moving your business logic from the Web forms code behind into Service classes, so that you can expose the business logic via [WebMethods]. You could add the WebMethods to the pages but it would be way better if you could add a REST web service endpoint using WebAPI.

Think of an angular SPA as completely independent from the server technology, all you need for Angular to work with the server is an HTTP API, preferably one that returns JSON.

Solution 2

Hi you can use angular with web forms, and you can do single page application also by using $HTTP service in angular. i have written one ajax call by using web form.

<script type="text/javascript" ><src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope, $http, $window) {
        $scope.ButtonClick = function () {
            var post = $http({
                method: "POST",
                url: "Default.aspx/GetCurrentTime",
                dataType: 'json',
                data: { name: $scope.Name },
                headers: { "Content-Type": "application/json" }
            });

            post.success(function (data, status) {
                $window.alert(data.d);
            });

            post.error(function (data, status) {
                $window.alert(data.Message);
            });
        }
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    Name:
    <input type="text" ng-model="Name" />
    <br />
    <br />
    <input type="button" value="Submit" ng-click="ButtonClick()" />
</div>