Building A Basic Crud Application Using AngularJs

In this tutorial, I am going to teach you, how to create a basic crud application using AngularJs. I am not using any REST APIs or backend services. I am just implementing the functionality of AngularJs 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

Our bookstore application includes the following features.

  1. Adding a new book to the store
  2. Editing the existing book
  3. Displaying books on the store
  4. Deleting a book

Prerequisites

You should be familiar with the following technologies before going to this tutorial.

  1. HTML and CSS
  2. Bootstrap
  3. Javascript
  4. 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>

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;
}

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
    }
  ];

});

Code Explanation :

In the above example, I have created an angular module called Bookstore and stored it in a variable app.

Then I have created a controller called BooksController.

In the BooksController, I created a $scope.books array to store the books.

Let’s add a piece of HTML code for adding a 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 -->

Code Explanation :

In the above code, we have taken 3 input fields and binds the values to the application using the ng-model directive.

Here the ng-click directive handles an addBook method and passes bookTitle, bookAuthor, bookPages as parameters.

Let’s define the addBook method in BooksController to add a new book.

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

Code Explanation :

In the above code, we make an object with the parameters of the $scope.addBook method. Then we push that object into the $scope.books array.

Now write the 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 -->

Code Explanation :

In the above code, I am using the ng-repeat directive to display each book in the $scope.books array.

The ng-repeat directive is used to iterate through 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 $scope.delete method on the BooksController and takes an index of current value as a parameter.

If you click on the update button, it takes newly updated values as parameters and updates the $scope.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;
}

Code Explanation :

In the above code, we are updating the existing values with new values of $scope.books array.

If you follow, everything properly your output may look like the below picture.

building a basic crud appliation using angular js

See the demo Here.

Also, Try How to upload images to amazon s3 using AngularJs

If you have any doubts feel free to comment below.

If this article helps you, comment below as It helped me.

Thanks for reading!

Keep [email protected]

 
Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes7
No1
Powered by Pixelbart

Leave a Reply

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