articles

Home / DeveloperSection / Articles / CRUD operation in AngularJs

CRUD operation in AngularJs

Anonymous User28368 15-Apr-2015

AngularJs maintained by google and help in creating single-page application using html, css and JavaScript. Now in this post explaining about crud operation with list using AngularJs.

Introduction:

AngularJs is one of the most popular client-side frameworks on the web. Angularjs frameworks provides Model, View and Controller (MVC) on the client side and helps the developer to implement structural JavaScript on client-side. The data binding and dependency injection features provided by AngularJs simplifies the heavy and complex JavaScript code on the client, which we used to write earlier to do the same task. If you are absolutely new to AngularJs you can get some additional information from my previous posts.

Introduction of AngularJs

Angularjs Environment setup

Angularjs MVC Architecture

Angularjs First Application

AngularJs Directives

AngularJs Expressions

AngularJs Controllers

AngularJs Filters

Angularjs HTML DOM

AngularJs Modules

AngularJs Forms

AngularJs Includes

Working with Ajax in AngularJs

What is Scope in AngularJs

AngularJs Services 

In this article, we will make simple create, read, update and delete operation AngularJS to develop an application for performing CRUD operations. We will use the following features of AngularJS in our application:

DataBinding: This provides an automatic synchronization of data in between data model and the User interface components. This synchronization is managed in such a way that when any changes occur in either Model or View, it is notified to one another.

Module: Acts as a container for different components of the application e.g. Controller, Services, directives, etc. The bootstrapping of the application is specified by the Module. This is attached with DOM using ng-app directive.

Controller: Controller is a repository for the actions to be exposed to the DOM. This is a JavaScript constructor function attached to the DOM using ng-controller directive. When the controller is attached with DOM a new injectable scope parameter will be available to the controller’s constructor function of the name $scope.

Services: Component to act as a repository for the code to be shared across the application. Generally we can make use of it to define external services call from Angular application.

Some Angular Directives used in the Application:

Directives add capability of extending HTML. They are the most complex and the most important part of AngularJS. Here are some built-in directives used in this application:

  •   ng-app: used to auto bootstrap the AngularJS application. This is typically applied to the root of HTML document e.g. <html>, <body>.
  •   ng-controller: used to attach the controller class to the view. This helps to expose the action methods and the scope model from the controller to be accessible to view.
  •   ng-model: used to bind the scope model declared in the controller to the UI elements e.g. input, select,etc.
  •   ng-repeat: used to instantiate the template for each item in the source collection received from the scope of the controller.
  •   ng-click: executes the action method form the controller class when the element on the View is clicked. 
Now start develop crud operation in angularjs:

Step 1: Firstly setup the project for performing crud operation

Step 2: in this we use angularjs library for use angularjs functionality and bootstrap css for good looking.

<linkhref="~/Content/bootstrap.min.css"rel="stylesheet"/>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

Step 3: in this step you we design html page

Crud.cshtml:
<divng-app="MyApp"class="container"ng-controller="Book">
    <tableclass="table table-striped table-bordered">
        <tr>
            <td>ID</td>
            <td>
                <inputtype="text"class="form-control"ng-model="item.id"/></td>
        </tr>
        <tr>
            <td>Name</td>
            <td>
                <inputtype="text"class="form-control"ng-model="item.name"/></td>
        </tr>
        <tr>
            <td>EmailID</td>
            <td>
                <inputtype="text"class="form-control"ng-model="item.email"/></td>
        </tr>
        <tr>
            <td>Password</td>
            <td>
                <inputtype="password"class="form-control"ng-model="item.password"/></td>
        </tr>
        <tr>
            <td>Phone</td>
            <td>
                <inputtype="text"class="form-control"ng-model="item.phone"/></td>
        </tr>
        <tr>
            <tdclass="text-right"colspan="2">
                <buttonng-click="addItem(item)"class="btn btn-primary">
                    Add
                </button>
            </td>
        </tr>
    </table>
    <tableclass="table table-striped table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>EmailID</th>
                <th>Phone</th>
                <th>Edit</th>
                <th>Remove</th>
            </tr>
        </thead>
        <tbody>
            <trng-repeat="item in items">
                <td><spanng-hide="editMode">{{item.id}}</span>
                    <inputtype="text"ng-show="editMode"ng-model="item.id"/>
                </td>
                <td>
                    <spanng-hide="editMode">{{item.name}}</span>
                    <inputtype="text"ng-show="editMode"ng-model="item.name"/>
                </td>
                <td>
                    <spanng-hide="editMode">{{item.email}}</span>
                    <inputtype="text"ng-show="editMode"ng-model="item.email"/>
                </td>
                <td>
                    <spanng-hide="editMode">{{item.phone}}</span>
                    <inputtype="text"ng-show="editMode"ng-model="item.phone"/>
                </td>
                <td>
                    <ing-hide="editMode"ng-click="editMode = true; editItem(item)"class="glyphicon glyphicon-edit"></i>
                    <iclass="glyphicon glyphicon-saved"ng-show="editMode"ng-click="editMode = false"></i>
                </td>
                <td>
                    <ing-click="removeItem($index)"class="glyphicon glyphicon-trash"></i>
                </td>
            </tr>
        </tbody>
    </table>
</div>

 Step 4: now write angular js code.

<script>
    var app = angular.module('MyApp', []);
 
    app.controller("Book", function ($scope) {
        $scope.items = [];
        $scope.addItem = function (item) {
            $scope.items.push(item);
            $scope.item = {};
        },
        $scope.removeItem = function (index) {
            console.log(index);
            $scope.items.splice(index, 1)
        },
        $scope.editItem = function (index) {
            $scope.editing = $scope.items.indexOf(index);
        }
 
    });
</script>

 Output:

CRUD operation in AngularJs

When click on add buuton add list in grid

CRUD operation in AngularJs

When click on edit icon

CRUD operation in AngularJs

When click on delete icon in this example delete 1004 record

CRUD operation in AngularJs


I am a content writter !

Leave Comment

Comments

Liked By