Building a basic crud application using angularjs


In this tutorial, we are going to create a basic crud application using Angularjs. We are not using any rest API or backend service. We are just implementing the functionality of angular js by creating a bookstore app.

First, we need to create a web page for creating a view for a bookstore app. So, we start with creating an index.html page and also we need to add the Angularjs and bootstrap libraries. In this tutorial, I am using a bootstrap framework to style the HTML components and also I added some CSS to make the bookstore app cleaner and neater.

basic crud application using angularjs

index.html

<!DOCYTPE html>
<html ng-app="BookStore">
  <head>
    <title>Angular BookStore App</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="./angular.min.js" charset="utf-8"></script>
    <script src="./index.js" ></script>
  </head>
  <body>
    <div class="container" ng-controller="BooksController">
          		<div class="BookContainer">
            		<div class="row text-center">
              			<h2 class="store-title">Book Store</h2>
            		</div>
            		<div class="row">
              			<!-- Adding new book -->
              
              			<!-- Adding new book -->

              			<!-- display all books -->
            
              			<!-- display all books -->
            		</div>
          		</div>
        	</div>
  </body>
</html>

Create a Style.css file add the following code.

style.css

body{
  background-color: #ddd;
}
.BookContainer{
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
  padding: 2%;
  border-radius: 10px;
  background-color: #3c6f98;
}
.store-title{
  font-weight: bold;
  color: white;
}

Now, we need to create and index.js file to bring the functionality to the bookstroe app.

Index.js

//Defining angular module..
var app=angular.module('BookStore',[]);

//Adding Bookscontroller to app module
app.controller('BooksController',function($scope,$http){

//Defining Books Array to Collect Books
  $scope.books=[
    {
      title:'Eloquent Javascript ',
      author:'Margin haverbeka',
      pages:350
    },
    {
      title:'Javascript for Kids ',
      author:' Nick Morgan',
      pages:344
    },
    {
      title:'Javasript : The Good Parts',
      author:'Douglas Crackford',
      pages:500
    }
  ];

});

We had created an application called BookStore and added a controller BooksController to it. The BooksController adds books array to the current $scope object.

Note:  $scope object is like a window in Javascript.

let’s add a piece of html code for adding new book to the store.

<!-- Adding new book -->
<div class="col-sm-4 col-md-4">
  
  <div class="row text-center">
    <h4 style="font-weight:bold; color:white;">Add New Book</h4>
  </div>

  <div class="addBook">
    <div class="form-group">
      <input type="text" ng-model="bookTitle" placeholder="Book Title" class="form-control"/>
    </div>
    <div class="form-group">
      <input type="text" ng-model="bookAuthor" placeholder="Author" class="form-control"/>
    </div>
    <div class="form-group">
      <input type="text" ng-model="bookPages" placeholder="Pages" class="form-control"/>
    </div>
    <div class="form-group">
      <button type="button" name="button" class="btn btn-primary" ng-click="addBook(bookTitle,bookAuthor,bookPages)">Add Book</button>
    </div>
  </div>

</div>
<!-- Adding new book -->

In the above code, we have taken 3 input fields and binds the values to the application using ng-model directive.
Here ng-click directive handles an addBook method and passes bookTitle,bookAuthor,bookPages as parameters.

define an addBook method in BooksController to add new book.

//Angular Method for Adding book
  $scope.addBook=function(bookTitle,bookAuthor,bookPages){
    $scope.books.push({title:bookTitle,author:bookAuthor,pages:bookPages});
};

let’s add a piece of html code for displaying all books.

<!-- display all books -->
  <div class="col-sm-8 col-md-8">
     <div class="row text-center">
         <h4 style="font-weight:bold; color:white;">All Books</h4>
     </div>
     <ul class="list-group">
       <li class="list-group-item" ng-repeat="book in books">
          <span ng-hide="edit">
             <b>{{book.title}}</b> | by {{book.author}}
             <span class="badge">{{book.pages}} pages</span>
             <span class="pull-right">
                <button type="button" name="button" class="btn btn-info btn-sm" ng-click="edit=true">edit</button>
                <button type="button" name="button" class="btn btn-danger btn-sm" ng-click="delete($index)">delete</button>
             </span>
          </span>

          <span ng-show="edit">
            <input type="text"  ng-model="book.title" />
            <input type="text"  ng-model="book.author" />
            <input type="text"  ng-model="book.pages" />
            <button type="button" name="button" class="btn btn-primary btn-sm" ng-click="update(book.title,book.author,book.pages,$index);edit=false">update</button>
          </span>

        </li>
     </ul>
 </div>
<!-- display all books -->

Here we are using the ng-repeat directive to display each book in the books array. ng-repeat is used to display arrays in angularjs

When you click on the edit button, it will display input fields of title, author, pages to update. When you click on the delete button it takes you to a delete method on the BooksController and takes an index as a parameter.
If you click on update method, it takes newly updated values as parameters and updates the books array in the BooksController.

//Angular Method for Updating Book
  $scope.update=function(title,author,pages,key){
    $scope.books[key].title=title;
    $scope.books[key].author=author;
    $scope.books[key].pages=pages;
    $scope.edit=false;
}

 

And the Final result should be below.
basic crud application using angularjs
 
see the demo here 
 
Hope you like this tutorial. If you have any doubts, just feel free to comment below.
 
you may also like 
                          how to upload images to amazon s3 using angularjs 
 

Leave a Reply

Your email address will not be published. Required fields are marked *