I have 4+ experience and working as software Engineer with Hytech professionals India PVT ltd and also working as Consultant,Trainer,Blogger and Author on Microsoft technologies,Also I have Trained more than 500+ IT professionals.I have knowledge about Asp.net,C#,SQL,Project management,replication,MVC,WebApi,SSRS,PostMan,TFS,SVN,Swagger,WMI,Agile,SignalR,Angularjs,IIS configuration.

Basic CRUD Operation in angularjs without Database.

In this blog  we will make simple create, read, update and delete operation using  AngularJS to develop an application for performing CRUD operations with HTML. We will use the following features of AngularJS in our application.I hope it will help you to understand basic logic of Angularjs.
Some Angular Directives used in this example:-
Directives use to add capability of extending HTML. They are the most important part of AngularJS. Here are some in-built directives used in this example.
For more details of directive follow this link:-

  1. ng-app:- Used to auto bootstrap the AngularJS application. This is typically applied to the root of HTML document e.g. <html>, <body>.
  2. 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.
  3. ng-model:- Used to bind the scope model declared in the controller to the UI elements e.g. input, select,etc.
  4. ng-repeat:- Used to instantiate the template for each item in the source collection received from the scope of the controller.
  5. ng-click:- Executes the action method form the controller class when the element on the View is clicked
Basic Example of Crud operation using HTML :-
Step 1:-Create simple HTML page.
Step 2:-Include AngularJs library  to support Angularjs in your application inside head tag with script tag.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="library//crud.js"></script>
<div ng-app="MyApp" class="container" ng-controller="Book">
<table class="table table-striped table-bordered">
<input type="text" class="form-control" ng-model="item.id" /></td>
<input type="text" class="form-control" ng-model="item.name" /></td>
<input type="text" class="form-control" ng-model="item.email" /></td>
<input type="password" class="form-control" ng-model="item.password" /></td>
<input type="text" class="form-control" ng-model="item.phone" /></td>
<td class="text-right" colspan="2">
<button ng-click="addItem(item)" class="btn btn-primary">
<table class="table table-striped table-bordered">
<tr ng-repeat="item in items">
<td><span ng-hide="editMode">{{item.id}}</span>
<input type="text" ng-show="editMode" ng-model="item.id" />
<span ng-hide="editMode">{{item.name}}</span>
<input type="text" ng-show="editMode" ng-model="item.name" />
<span ng-hide="editMode">{{item.email}}</span>
<input type="text" ng-show="editMode" ng-model="item.email" />
<span ng-hide="editMode">{{item.phone}}</span>
<input type="text" ng-show="editMode" ng-model="item.phone" />
<i ng-hide="editMode" ng-click="editMode = true; editItem(item)" class="glyphicon glyphicon-edit"></i>
<i class="glyphicon glyphicon-saved" ng-show="editMode" ng-click="editMode = false"></i>
<i ng-click="removeItem($index)" class="glyphicon glyphicon-trash"></i>
Step 3:-Create js file
var app = angular.module('MyApp', []); //create model
app.controller("Book", function ($scope) { //create controller
$scope.items = [];
$scope.addItem = function (item) {  //to add item
$scope.item = {};
$scope.removeItem = function (index) {   //to remove item
$scope.items.splice(index, 1)
$scope.editItem = function (index) { //to edit item
$scope.editing = $scope.items.indexOf(index);
Step 4:-Run your page..
Output like this:-

Description:- We are using single controller "Book" and module "app" to manage data from html  page.coming data from html view "item" store in array "items".for delete remove row from array.for show data bind item $scope value in html element using ng-model in table.for good design using bootsrap.css.
For video session follow:-https://www.youtube.com/watch?v=w-mSJshwEzg
Note:-CRUD with database on next blog.

You have just read an article that categorized by title AngularJs by title Basic CRUD Operation in angularjs without Database.. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2016/02/part-13-basic-crud-operation-in.html. Thank You!
Author: Bikesh Srivastava - Saturday, 27 February 2016

4 comments to "Basic CRUD Operation in angularjs without Database."

  1. I really appreciate the information shared above. It’s of great help. MaxMunus provides Remote Support For Corporate and for Individuals. If anyone is facing any issue in his project of # ANGULAR JS we can support them remotely , kindly contact us http://www.maxmunus.com/contact
    MaxMunus Offer World Class Industry best Consultant on# ANGULAR JS. We provide end to end Remote Support on Projects. MaxMunus is successfully doing remote support for countries like India, USA, UK, Australia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain, and UAE etc.
    E-mail: saurabh@maxmunus.com
    Skype id: saurabhmaxmunus
    Ph:(0) 8553576305/ 080 - 41103383

  2. I read your blog in this we have a content on Angularjs Online Training Hyderabad check it once.

  3. I like your blog, I read this blog please update more content on hacking,
    Nice post,and good information Thanks for sharing
    further check it once at .NET Online Course


Life Is Complicated, But Now programmer Can Keep It Simple.