posted by  on  

AngularJS is a JavaScript Framework and it is a library written in JavaScript. This tutorial will focus on CRUD (Create, Read, Update, and Delete) operations with AngularJS.

Create new project in visual studio and follow the step.

For this example, we'll create a simple table (tblAngularCustomer) with some basic columns where customers data would be stored.

CREATE TABLE [dbo].[tblAngularCustomer](
	[Id] [int] IDENTITY(1,1) NOT NULL,
	[Name] [nvarchar](50) NULL,
	[Age] [int] NULL,
	[City] [nvarchar](200) NULL,
	[Languages] [nvarchar](200) NULL,
	[Skills] [nvarchar](200) NULL,
 CONSTRAINT [PK_tblAngular] PRIMARY KEY CLUSTERED 
(
	[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

Add new ADO.NET Entity Data Model. Follow the steps given. Once you have done the processes, you can see the edmx file and other files in your project.

After you have successfully created edmx, create the API controller now. give name like DataCustomerController.

public class DataCustomerController : ApiController
{
    LocalProjectEntities db = new LocalProjectEntities();

    public void PostCustomer(tblAngularCustomer customer)
    {
        db.tblAngularCustomers.Add(customer);
        db.SaveChanges();
    }

    public List<tblAngularCustomer> GetDisplayData()
    {
        var data = db.tblAngularCustomers.ToList();

        return data;
    }

    public void DeleteCustomer(int Id)
    {
        tblAngularCustomer customer = db.tblAngularCustomers.Where(x => x.Id == Id).FirstOrDefault();
        db.tblAngularCustomers.Remove(customer);
        db.SaveChanges();
    }

    public tblAngularCustomer GetCustomerId(int Id)
    {
        var data = db.tblAngularCustomers.FirstOrDefault(x => x.Id == Id);
        return data;
    } 

    public void PutCustomer(tblAngularCustomer customer)
    {
        tblAngularCustomer obj = db.tblAngularCustomers.Single(x => x.Id == customer.Id);
        obj.Name = customer.Name;
        obj.Age = customer.Age;
        obj.City = customer.City;
        obj.Languages = customer.Languages;
        obj.Skills = customer.Skills;

        db.SaveChanges();
    }
}

We are now done with our backend. Let’s now create a small AngularJS frontend application.

Now defines the view for CRUD operation on user entity. Here, I am using simple HTML page for Create, Edit and Delete operations.

Create One Html page under Solution and give name like Register.html

Note :- Add jquery and angularjs reference to your html page.

<body ng-app="customerModule">
    <div ng-controller="CustomerRegistration">
        <div class="container">
            <div class="row">

                <div class="col-md-3">
                    <h3>Register Here...!</h3>
                    <form role="form" name="AddCustomer" style="margin-top:50px">
                        <input type="hidden" ng-model="txtId" ng-value="customerdata.data.Id" />
                        <div class="form-group">
                            <label for="Name">Name</label>
                            <input id="Name" type="text"
                                   class="form-control" ng-model="customerdata.data.Name" name="name" required />
                        </div>
                        <div class="form-group">
                            <label for="Age">Age</label>
                            <input id="Age" type="text"
                                   class="form-control" ng-model="customerdata.data.Age" name="age" required />
                        </div>
                        <div class="form-group">
                            <label for="City">City</label>
                            <input id="City" type="text"
                                   class="form-control" ng-model="customerdata.data.City" name="city" required />
                        </div>
                        <div class="form-group">
                            <label for="language">Language</label>
                            <input id="language" type="text"
                                   class="form-control" ng-model="customerdata.data.Languages" name="language" required />
                        </div>
                        <div class="form-group">
                            <label for="skill">Skill</label>
                            <input id="skill" type="text"
                                   class="form-control" ng-model="customerdata.data.Skills" name="skill" required />
                        </div>
                        <input type="submit" id="btnAddCustomer" ng-show="!customerdata.data.Id" class="btn btn-primary" value="Add Customer" ng-click="InsertData()">
                        <input type="submit" id="btnUpdateCustomer" ng-show="customerdata.data.Id" class="btn btn-primary" value="Update" ng-click="UpdateCustomer()">
                    </form>
                </div>

                <div class="col-md-1"></div>

                <div class="col-md-8">

                    <div class="row">
                        <div class="col-md-6">
                            <h3>Order By</h3>
                            <select class="form-control" ng-model="sortorder">
                                <option value="Name">
                                    Name
                                </option>
                                <option value="Age">
                                    Age
                                </option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <h3>Search</h3>
                            <input type="text" ng-model="searchtext.$" class="form-control" />
                        </div>
                    </div>


                    <div ng-init="DisplayData()">
                        <center><h3>Employee Detail</h3></center>
                        <table class="table">

                            <tr>
                                <th>
                                    Name
                                </th>
                                <th>
                                    Age
                                </th>
                                <th>
                                    City
                                </th>
                                <th>
                                    Language
                                </th>
                                <th>
                                    Skill
                                </th>
                                <th>
                                    Action
                                </th>
                            </tr>

                            <tr ng-repeat="item in CustomerList | orderBy : sortorder | filter : searchtext">
                                <td>{{item.Name}}</td>
                                <td>{{item.Age}}</td>
                                <td>{{item.City}}</td>
                                <td>{{item.Languages}}</td>
                                <td>{{item.Skills}}</td>
                                <td><a href="#" ng-click="SearchbyId(item.Id)">Edit |</a><a href="#" ng-click="DeleteCustomer(item.Id)"> Delete</a></td>
                            </tr>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Add new script under solution and give it name like custom.js

Note :- Add reference of custom.js to your register.html page.

I am posting the data using AngularJS $http service. I also have five $scope functions inside my controller that will perform insert, edit, update, delete and displayall records functions.

var cusomerModule = angular.module('customerModule', [])

cusomerModule.controller('CustomerRegistration', function ($scope, $http) {

    $scope.InsertData = function () {
        var customer = new Object();
        customer = $.param({
            'Id': $scope.Id, 'Name': $scope.customerdata.data.Name, 'Age': $scope.customerdata.data.Age,
            'City': $scope.customerdata.data.City, 'Languages': $scope.customerdata.data.Languages, 'Skills': $scope.customerdata.data.Skills
        })

        $http({
            method: "POST",
            url: "/api/DataCustomer/",
            data: customer,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(onSuccess, onError);
    }

    var onSuccess = function (data) {
        $scope.customerdata = data;
        //GetCustomerList();
        $scope.DisplayData();
    }

    var onError = function (response) {
        $scope.errorMessage = 'error...!';
    }

    var onUpdateSuccess = function (data) {
        //$scope.buttonsave = { text: "Update" }
        $scope.Id = data.data.Id;
        $scope.customerdata = data;
    }

    $scope.DisplayData = function () {

        $http.get('/api/DataCustomer/')
            .then(function (response) {
                $scope.CustomerList = response.data;
                return response.data;
            })
    }

    $scope.DeleteCustomer = function (Id) {        
        $http.delete("/api/DataCustomer/" + Id).then(onSuccess, onError)
    }

    $scope.SearchbyId = function (Id) {
        $http.get("/api/DataCustomer/" + Id).then(onUpdateSuccess, onError)
    }

    $scope.UpdateCustomer = function () {

        var customer = new Object();
        customer = $.param({
            'Id': $scope.Id, 'Name': $scope.customerdata.data.Name, 'Age': $scope.customerdata.data.Age,
            'City': $scope.customerdata.data.City, 'Languages': $scope.customerdata.data.Languages, 'Skills': $scope.customerdata.data.Skills
        })

        $http({
            method: "PUT",
            url: "/api/DataCustomer/",
            data: customer,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(onSuccess, onError);
    }

})

Output

Add New Customer

Update Customer Record

Search and Filter

Download full source code from Github repository. Click Here

Lateshtclick Technology Blog
Tags AngularJS WebAPI MVC
posted by Latesht Click Latesht Click

Comments


Leave a Reply

Feel free to contribute!
Comment:
Name*:
Email*: